var a une portée fonction, let et const ont une portée bloc.Utilise
letpour des variables qui changent,constpour des constantes. Évitevarsauf nécessité spécifique, pour prévenir les bugs liés à la portée et au hoisting.
var et let ?const ? Pourquoi ?let avant sa déclaration ?const par défaut ?| Variable | Scope | Réassignable | Hoisting | Usage recommandé |
|---|---|---|---|---|
var | Fonction | Oui | Oui (initialisation pas) | À éviter sauf legacy |
let | Bloc | Oui | Non (zone morte) | Généralement préféré |
const | Bloc | Non | Non (zone morte) | Pour constantes, objets mutables |
let count = 0;
count++; // OK
const API_KEY = 'abc123';
// API_KEY = 'xyz'; // Erreur, non réassignable
if (true) {
var x = 5;
}
console.log(x); // 5, car var est fonction-scopée, pas bloc-scopée
let et const pour éviter les bugs liés à la portée.const lors de sa déclaration.const par défaut, sauf si la variable doit changer.Pense à
varcomme un ancien outil, souvent source de bugs, alors queletetconstsont conçus pour une gestion claire de la portée et de la mutabilité.
const= constante, immuable (sauf objets),let= variable mutable.
Version avancée / mode "crack" :
Maîtrise la portée, le hoisting et la mutabilité pour écrire un code robuste, performant et sans bugs subtils liés à la déclaration des variables. Connais les pièges du moteur JS, notamment comment var peut causer des effets de bord difficiles à diagnostiquer.
Type de données : classification des valeurs en JavaScript (Number, String, Boolean, Object, Undefined, Null, Symbol, BigInt).
Intuitive : ce que la valeur "est".
Technique : classification selon la représentation interne du moteur JS.
Coercition : conversion automatique ou explicite d’un type en un autre lors d’opérations.
Intuitive : JavaScript "force" une valeur à changer de type pour que l’opération soit possible.
Technique : conversion implicite (coercition automatique) ou explicite (avec cast).
Coercition implicite : conversion automatique lors d’opérations (ex : ==, + avec chaîne).
Exemple : '5' + 1 → '51'.
Piège : peut conduire à des résultats inattendus.
Coercition explicite : conversion volontaire via des fonctions (String(), Number(), Boolean()).
Exemple : Number('123') → 123.
Equality (==) vs Strict equality (===) :
== : compare après coercition si nécessaire.=== : compare sans coercition, plus sûr.JavaScript possède des types dynamiques, ce qui permet de changer le type d’une variable à tout moment.
La coercition peut entraîner des bugs difficiles à repérer, notamment avec ==.
La comparaison stricte (===) est recommandée pour éviter les surprises liées à la coercition.
La coercition implicite suit des règles précises :
null et undefined ne se convertissent pas en nombre ou chaîne lors de == mais ont des comportements spécifiques.+, si l’un des opérandes est une chaîne, l’autre est converti en chaîne.-, *, /, les opérandes sont convertis en nombres.La conversion en nombre (Number()) :
null → 0true → 1false → 0'' (chaîne vide) → 0undefined → NaNLa coercition en JavaScript peut être source de bugs subtils. Privilégier
===et maîtriser les règles de conversion pour écrire un code fiable et prévisible.
Fonction déclarée (Function Declaration)
Définition simple : Fonction définie avec le mot-clé function et accessible dans tout le scope (hoisting).
Définition technique : Fonction hoistée, peut être appelée avant sa déclaration dans le code, possède son propre scope local.
Exemple :
function add(a, b) {
return a + b;
}
Piège fréquent : Ne pas comprendre le hoisting, ce qui peut causer des erreurs si on tente d'appeler une fonction déclarée avant sa définition dans un bloc.
Fonction fléchée (Arrow Function)
Définition simple : Syntaxe compacte pour écrire des fonctions, ne possède pas son propre this.
Définition technique : Fonction anonyme, non hoistée, lexicalement liée à this (hérite du contexte parent).
Exemple :
const multiply = (x, y) => x * y;
Piège fréquent : Perte de this dans les callbacks ou méthodes d’objet, à cause de la liaison lexicale.
Callback
Définition simple : Fonction passée en argument à une autre fonction, exécutée plus tard.
Définition technique : Fonction de rappel utilisée pour gérer l’asynchronisme ou la logique après une opération.
Exemple :
setTimeout(() => {
console.log('Timeout terminé');
}, 1000);
Piège fréquent : Mauvaise gestion de l’asynchronisme, oubli de gérer les erreurs dans les callbacks.
Scope d’une fonction
Définition simple : Zone où une fonction peut accéder à ses variables.
Définition technique : La portée locale ou globale, dépendant de la déclaration (var, let, const).
Closures
Définition simple : Fonction qui "se souvient" du contexte dans lequel elle a été créée.
Définition technique : Fonction interne qui garde accès aux variables de sa fonction parente même après l'exécution de cette dernière.
function) est hoistée, contrairement aux fonctions fléchées (=>) qui ne le sont pas.this, elles héritent celui du scope lexical.Les fonctions en JavaScript, qu'elles soient déclarées ou fléchées, ont des comportements distincts liés à leur hoisting et à leur liaison de this. Maîtriser ces différences est essentiel pour écrire du code robuste, notamment en asynchrone et dans la conception d’API modulaires.
Scope (portée)
Définition simple : La zone dans laquelle une variable est accessible.
Définition technique : La portée détermine la visibilité et la durée de vie d’une variable dans le code, pouvant être global, local (dans une fonction) ou de bloc (avec let/const).
Exemple :
let x = 10; // variable dans le scope global
function test() {
let y = 5; // variable dans le scope local de la fonction
}
Closure (fermeture)
Définition simple : Fonction qui "se souvient" des variables de son environnement même après que cet environnement a disparu.
Définition technique : Fonction interne qui conserve une référence à son scope lexical, permettant d’accéder à des variables de ses parents même après leur exécution.
Exemple :
function outer() {
let count = 0;
return function inner() {
count++;
return count;
}
}
const counter = outer();
console.log(counter()); // 1
Lexical Scope (portée lexicale)
Définition : La portée d’une variable est déterminée à l’écriture du code, non lors de l’exécution. La fermeture conserve cette structure.
Variable Capture (capture de variable)
Définition : Lorsqu’une closure "capture" des variables de son scope parent, permettant leur utilisation ultérieure.
Hoisting (levée de déclaration)
Définition : Mécanisme où les déclarations de variables (avec var) et de fonctions sont remontées en haut de leur scope lors de la compilation, influençant leur disponibilité.
Scope global vs local :
var a une portée fonction ou globale, ce qui peut causer des erreurs si mal utilisé.let et const ont une portée de bloc, limitant leur visibilité.Closures :
Problèmes courants :
var partagent la même référence, causant des bugs.Règle d’or :
let et const pour éviter les pièges de hoisting et de portée globale.Les closures permettent de créer des fonctions avec un état privé en conservant leur environnement lexical, tandis que la compréhension du scope évite les erreurs liées à la visibilité et à la durée de vie des variables. Maîtriser ces concepts est essentiel pour écrire du code robuste, performant et sécurisé en JavaScript.
var et let en termes de scope ?var ?var ?| Concept | var | let / const |
|---|---|---|
| Scope | Fonction ou global | Bloc (délimité par {}) |
| Hoisting | Oui, déclaration remontée | Non, pas d’effet de hoisting sur l’initialisation |
| Réaffectation | Possible | Possible avec let, non avec const |
| Redéclaration | Autorisée dans le même scope | Non, provoque une erreur |
let.Note importante : La maîtrise du scope et des closures est la clé pour écrire un JavaScript avancé, performant et sécurisé, notamment dans la gestion de l’état, la modularité et la programmation asynchrone.
Hoisting (remontée)
Définition simple : Comportement où certaines déclarations (variables, fonctions) sont "levées" en haut de leur contexte d'exécution avant l'exécution du code.
Définition technique : Mécanisme par lequel le moteur JavaScript déclare et initialise certaines entités (variables, fonctions) lors de la phase de compilation, avant l'exécution du script.
Déclarations de variables
var : La déclaration est levée en haut, mais l'initialisation reste à sa place.
let et const : La déclaration est levée, mais l'accès avant déclaration provoque une erreur (zone morte).
Fonctions
Function declaration (déclaration de fonction classique) : Entirement hoisted, accessible partout dans le scope.
Function expression (fonction assignée à une variable) : La variable est levée, mais pas la fonction, ce qui peut causer des erreurs.
Zone Morte (Temporal Dead Zone - TDZ)
Période entre le début du scope et la déclaration où l'accès à let et const provoque une erreur.
Scope
Contexte dans lequel les variables et fonctions sont accessibles. Hoisting dépend du scope (global, fonction, bloc).
Le hoisting peut entraîner des comportements inattendus si mal compris, notamment avec var et les fonctions. La meilleure pratique consiste à déclarer toutes les variables en début de scope et à préférer les déclarations let et const pour éviter la zone morte.
| Variable | Hoisting | Initialisation | Accès avant déclaration | Zone Morte | Usage recommandé |
|---|---|---|---|---|---|
| var | Oui | Oui (undefined) | Possible | Non | À éviter, privilégier let/const |
| let / const | Oui | Non (zone morte) | Erreur (ReferenceError) | Oui | Préféré pour la sécurité |
| Fonction déclarée | Oui | Oui | Possible | Non | Utiliser pour fonctions globales ou locales |
console.log(a); // undefined (var est hoisted, initialisé à undefined)
var a = 10;
foo(); // Fonction hoisted, appel réussi
function foo() {
console.log('Hello');
}
console.log(b); // ReferenceError : b n’est pas accessible avant déclaration
let b = 20;
Point à retenir :
Le hoisting influence la visibilité et l’état initial des variables et fonctions. Comprendre ses mécanismes permet d’éviter des bugs subtils et d’écrire un code plus robuste.
this (en JavaScript)
Définition simple :
Le mot-clé this fait référence à l'objet qui est en train d'exécuter la fonction ou le contexte dans lequel la fonction est appelée.
Définition technique :
this désigne l'objet contextuel lors de l'exécution d'une fonction, dont la valeur dépend du mode d'appel (appel global, méthode d'objet, constructeur, arrow function, etc.).
Contexte d'exécution
Définition simple :
L'environnement dans lequel une fonction s'exécute, déterminant la valeur de this.
Définition technique :
La référence à l'objet dans lequel la fonction est appelée, influencée par la mode d'appel (direct, méthode, constructeur, arrow).
Arrow functions et this
Définition simple :
Les fonctions fléchées ne possèdent pas leur propre this, elles héritent celui du contexte parent.
Définition technique :
La valeur de this dans une arrow function est fixée lexicalement, c’est-à-dire qu’elle ne change pas selon l’appel.
Binding explicite (call, apply, bind)
Définition simple :
Méthodes pour forcer la valeur de this lors de l’appel d’une fonction.
Définition technique :
call et apply invoquent immédiatement la fonction en fixant this, tandis que bind retourne une nouvelle fonction avec this lié.
this dans les constructeurs
Définition simple :
Lorsqu’on utilise new, this fait référence à l’objet en cours de création.
Définition technique :
Dans une fonction constructeur, this est l’instance nouvellement créée.
La valeur de this dépend du mode d’appel :
this fait référence à l’objet global (window en navigateur, global en Node.js).this désigne l’objet propriétaire.this hérite du contexte lexical (parent).call, apply, bind : this est explicitement défini.new) : this est l’objet en cours de création.Les fonctions fléchées sont souvent utilisées pour préserver le contexte de this dans des callbacks ou closures.
La compréhension de this est essentielle pour maîtriser la programmation orientée objet, la gestion des événements, et la conception de modules.
Piège classique : oublier que this dans une fonction régulière dépend de l’appel, pas de la déclaration.
thisen JavaScript est dynamique et dépend du contexte d’appel. La maîtrise de ses règles permet d’éviter de nombreux bugs liés à la portée et au binding, notamment dans les callbacks et les méthodes d’objets.
Que désigne this dans une fonction fléchée ?
this du contexte parentQuelle méthode permet de lier explicitement this à une fonction ?
callapplybindQue se passe-t-il si vous utilisez new avec une fonction ?
this devient l’objet globalthis fait référence à l’objet en cours de créationthis est undefinedQuelle est la principale différence entre call et apply ?
call exécute la fonction, apply ne le fait pascall prend une liste d’arguments, apply un tableau d’argumentscall modifie this, apply ne le fait pas| Cas d’utilisation | this dans une fonction régulière | this dans une arrow function | this avec call / apply / bind |
|---|---|---|---|
| Appel global | Objet global (window) | Hérite du contexte lexical | Peut être explicitement fixé |
| Méthode d’objet | L’objet propriétaire | Hérite du contexte lexical | Peut être explicitement fixé |
| Fonction constructeur | Instance créée (this = nouvel objet) | Hérite du contexte lexical | Peut être fixé avec call / apply / bind |
const obj = {
name: 'JavaScript',
greet: function() {
console.log(this.name);
}
};
obj.greet(); // Affiche : JavaScript
const standaloneGreet = obj.greet;
standaloneGreet(); // Peut afficher undefined ou objet global
const arrowGreet = () => {
console.log(this.name);
};
arrowGreet(); // Hérite du contexte lexical, souvent undefined dans ce cas
// Binding explicite
const boundGreet = obj.greet.bind({ name: 'TypeScript' });
boundGreet(); // Affiche : TypeScript
## 📖 7. Objets et prototypes
### 🔑 Notions clés & Définitions
- **Objet JavaScript**
*Définition simple :* Une collection de propriétés (clés/valeurs) représentant une entité ou un concept.
*Définition technique :* Structure mutable, mutable, pouvant contenir des données et des méthodes, créée via littéral ou constructeur.
*Exemple :*
```js
const personne = {
nom: 'Dupont',
age: 30,
saluer() { return `Bonjour, je suis ${this.nom}`; }
};
Prototype
Définition simple : Objet dont hérite un autre objet, permettant la réutilisation de propriétés/méthodes.
Définition technique : Chaîne de prototypes ([[Prototype]]) permettant la délégation de propriété via le mécanisme de prototype chain.
Exemple :
function Personne(nom) {
this.nom = nom;
}
Personne.prototype.saluer = function() { return `Salut, ${this.nom}`; };
Prototypage
Définition simple : Processus de création et d'héritage via prototypes.
Définition technique : Mode de construction d'objets basé sur l'héritage par prototypes, permettant la délégation de propriétés/méthodes.
Object.create()
Définition simple : Méthode pour créer un nouvel objet avec un prototype spécifique.
Exemple :
const proto = { saluer() { return 'Hello'; } };
const obj = Object.create(proto);
Constructeur (Fonction constructeur)
Définition simple : Fonction utilisée pour créer des objets avec new, initialisant leurs propriétés.
Exemple :
function Voiture(marque) {
this.marque = marque;
}
Voiture.prototype.klaxonner = function() { console.log('Pouet'); };
const v = new Voiture('Toyota');
[[Prototype]]) vers un autre objet, permettant la délégation de propriétés/méthodes.La maîtrise du système de prototypes est essentielle pour comprendre l’héritage, la performance et le comportement avancé de JavaScript. La chaîne de prototypes permet une délégation flexible et puissante, mais peut aussi causer des pièges si mal comprise ou modifiée de façon incorrecte.
| Concept | Description | Exemple |
|---|---|---|
| Objet simple vs prototype | Objet : instance concrète, Prototype : modèle d’héritage | const obj = {} vs Object.create(proto) |
| Fonction classique vs classe | Fonction constructeur vs classe ES6 | function Person() {} vs class Person {} |
Forme, puis créer des sous-classes Cercle, Rectangle via prototypes pour partager des méthodes comme calculerSurface() tout en permettant la spécialisation.Point à retenir :
Les objets en JavaScript sont liés à des prototypes, ce qui permet une délégation efficace et une architecture flexible, mais nécessite une compréhension fine de la chaîne de prototypes pour éviter pièges et bugs.
Tableau (Array)
Définition simple : Collection ordonnée d’éléments accessibles par leur index.
Définition technique : Objet itérable dont chaque propriété numérique correspond à un élément.
Exemple : const fruits = ['pomme', 'banane', 'orange'];
Point important : Indexation à partir de 0.
Méthodes d’itération (forEach, map, filter, reduce)
Définition simple : Fonctions permettant de parcourir ou transformer un tableau.
Exemple : array.forEach(item => console.log(item));
Point important : map retourne un nouveau tableau, forEach modifie en place ou exécute une action, filter filtre, reduce accumule.
Méthodes de transformation (map, filter, reduce)
Définition simple : Fonctions pour créer un nouveau tableau à partir de l’ancien selon une règle.
Exemple : const doubles = [1,2,3].map(x => x*2);
Méthodes de recherche (find, findIndex, includes)
Définition simple : Permettent de rechercher des éléments dans un tableau.
Exemple : array.find(item => item > 10);
Méthodes de manipulation (push, pop, shift, unshift, splice)
Définition simple : Modifient la taille ou le contenu du tableau.
Exemple : array.push(4); ajoute à la fin, pop() enlève le dernier.
push, splice), d’autres créent un nouveau tableau (map, filter).map, filter, reduce peuvent être chaînées pour des transformations complexes.forEach et map sont souvent plus lisibles mais for classique peut être plus performant pour de gros volumes.map et forEach : map retourne un nouveau tableau, forEach ne retourne rien.Les tableaux en JavaScript sont des outils puissants pour manipuler des collections. La maîtrise des méthodes d’itération et de transformation est essentielle pour écrire un code clair, performant et idiomatique.
map et forEach ?splice sur un tableau ?| Méthode | Retourne | Modifie le tableau original | Utilisation principale |
|---|---|---|---|
forEach | Aucun | Non | Exécuter une action sur chaque élément |
map | Nouveau | Non | Transformer chaque élément |
filter | Nouveau | Non | Filtrer selon une condition |
reduce | Valeur unique | Non | Agréger ou accumuler des valeurs |
push / pop | Nouvelle longueur / élément | Oui | Ajouter ou retirer à la fin |
Supposons un tableau d’objets représentant des utilisateurs :
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 22 }
];
const names = users.map(user => user.name);
const adults = users.filter(user => user.age >= 18);
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
## 📖 9. Destructuring
### 🔑 Notions clés & Définitions
- **Destructuring (déstructuration)**
*Définition simple :* Technique permettant d'extraire facilement des valeurs d'objets ou de tableaux pour les assigner à des variables.
*Définition technique :* Syntaxe ES6 qui permet de décomposer des structures de données en variables distinctes, simplifiant l'accès et la manipulation des données.
- **Destructuring de tableau**
*Simple :* Extraction d'éléments par position dans un tableau.
*Technique :* Utilisation de crochets `[ ]` pour assigner plusieurs variables en une ligne.
- **Destructuring d'objet**
*Simple :* Extraction de propriétés par nom dans un objet.
*Technique :* Utilisation d'accolades `{ }` pour assigner des propriétés à des variables.
- **Valeurs par défaut**
*Définition :* Assignation d'une valeur par défaut lors de la destructuration si la valeur extraite est `undefined`.
- **Renommage des variables**
*Définition :* Lors de la destructuration, on peut donner un autre nom à la propriété ou à l'élément extrait.
### 📝 Points essentiels
- La destructuration permet d'écrire un code plus clair et plus concis pour extraire des données complexes.
- Elle fonctionne aussi bien avec des tableaux qu'avec des objets, mais la syntaxe diffère.
- Lors de la destructuration d'objet, l'ordre n'a pas d'importance, contrairement au tableau.
- On peut combiner destructuration avec des valeurs par défaut et du renaming pour plus de flexibilité.
- La destructuration peut être utilisée dans des paramètres de fonctions pour simplifier la gestion des arguments.
### 💡 À retenir
La destructuration est une technique puissante pour accéder rapidement et proprement aux données, en évitant les accès répétitifs ou verbeux. Elle facilite la manipulation des structures complexes et optimise la lisibilité du code.
### Notions complémentaires (pour approfondir)
- **Destructuring dans les paramètres de fonction**
Permet de décomposer directement les arguments passés à une fonction.
Exemple :
```js
function greet({ name, age }) {
console.log(`Bonjour ${name}, tu as ${age} ans`);
}
greet({ name: 'Alice', age: 30 });
Quelle syntaxe utilise-t-on pour destructurer un tableau ?
[ ] ou { } ?[ ]Comment donner une valeur par défaut lors de la destructuration d'une propriété ?
= après la propriété.const { x = 10 } = obj;Peut-on renommer une propriété lors de la destructuration d’un objet ?
property: newName.const { name: userName } = obj;La destructuration peut-elle être utilisée dans les paramètres d’une fonction ?
La destructuration d’un tableau est-elle sensible à l’ordre des éléments ?
| Syntaxe | Utilisation | Particularités |
|---|---|---|
[a, b] = array | Destructuration tableau | Basée sur l’ordre, peut sauter des éléments avec des virgules vides |
{x, y} = object | Destructuration objet | Basée sur les noms de propriété, pas l’ordre |
Exemple avancé :
Supposons un objet complexe avec des données imbriquées :
const user = {
id: 1,
name: 'Alice',
address: {
city: 'Paris',
zip: 75000
}
};
// Destructuration imbriquée
const {
name,
address: { city, zip = '00000' }
} = user;
console.log(name); // Alice
console.log(city); // Paris
console.log(zip); // 75000
Objectif : Extraire des données imbriquées tout en assignant des valeurs par défaut.
La destructuration est une syntaxe essentielle pour écrire un code JavaScript moderne, clair et efficace, permettant d’accéder rapidement aux données structurées tout en améliorant la lisibilité et la maintenabilité.
...)
const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1, 2, 3]
...)
function sum(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
Utilisation du Spread :
Math.max(...array)).Utilisation du Rest :
Pièges fréquents :
spread ne clone pas en profondeur.... : doit être en dernier dans la liste des paramètres (rest).Règles importantes :
... doit être en dernière position dans la liste des paramètres rest.Object.assign).Mini quiz :
const newArr = [...oldArr] ?... dans une déclaration de fonction et dans une expression ?... pour cloner un objet imbriqué ? Pourquoi ?... avant un paramètre dans une fonction ?Comparaisons utiles :
Object.assign() vs spread : ... est plus lisible et évite la mutation.... dans la déclaration de fonction pour capturer l'ensemble des arguments.Cas pratique :
L'opérateur ... en JavaScript, selon le contexte, permet soit d'étaler (spread) les éléments d'un iterable ou d'un objet, soit de rassembler (rest) plusieurs arguments ou éléments en un seul tableau ou objet, ce qui est essentiel pour écrire un code flexible, efficace et moderne.
Promesse (Promise)
Définition simple : Objet représentant une opération asynchrone qui peut réussir ou échouer.
Définition technique : Objet de l'API JavaScript permettant de gérer la résultat d'une opération asynchrone, avec états (en attente, résolue, rejetée).
Exemple : new Promise((resolve, reject) => { /* code */ })
States (États)
Définition simple : Les différentes phases d'une promesse : en attente, résolue, rejetée.
Détails techniques :
Méthodes .then(), .catch(), .finally()
Définition simple : Fonctions pour gérer la résolution ou l’échec d’une promesse.
Détails techniques :
.then() : pour traiter la valeur résolue.catch() : pour gérer l’erreur rejetée.finally() : s’exécute dans tous les cas, après résolution ou rejetChaînage de Promesses
Définition simple : Enchaîner plusieurs .then() pour gérer des opérations successives.
Détails techniques : Permet de gérer des opérations asynchrones dépendantes, avec propagation des valeurs ou erreurs.
Async/Await
Définition simple : Syntaxe plus lisible pour écrire du code asynchrone, basée sur les promesses.
Détails techniques :
async : pour déclarer une fonction asynchroneawait : pour attendre la résolution d’une promessenew Promise() ou obtenue via une API asynchrone (fetch, setTimeout, etc.).resolve) ou le rejet (reject) déclenche l’exécution des .then() ou .catch()..catch() pour éviter que des erreurs non traitées ne cassent le flux..finally() permet d’exécuter du code après la résolution ou le rejet, peu importe le résultat.async/await simplifie la lecture et l’écriture du code asynchrone, mais repose toujours sur des promesses.Les promesses offrent un contrôle précis et lisible sur l’asynchronie en JavaScript, en permettant de chaîner et de gérer efficacement les opérations complexes, tout en évitant les pièges classiques liés aux callbacks.
.catch().then() ?
async/awaitpending d’une promesse ?
.catch() ?
| Fonctionnalité | Promesse | Callback | Async/Await |
|---|---|---|---|
| Syntaxe | Chainée, claire | Nested, difficile à maintenir | Syntactiquement simple, linéaire |
| Gestion erreur | .catch() | Vérification dans chaque callback | try/catch autour de await |
| Concurrence | Facile à chaîner | Complexe à gérer | Simplifié avec Promise.all() |
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.3;
success ? resolve('Données récupérées') : reject('Erreur réseau');
}, 1000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log('Fin du traitement'));
Ce code simule une requête asynchrone avec gestion d’erreur et nettoyage final.
Async (asynchrone)
async qui retourne implicitement une promesse, facilitant la gestion des opérations asynchrones.async function fetchData() {
return "Données";
}
fetchData().then(console.log); // Affiche "Données"
Await (attendre)
async pour attendre la résolution d'une promesse, rendant le code plus linéaire.async function getData() {
const data = await fetch('url');
console.log(data);
}
Promise (Promesse)
pending, fulfilled, rejected) permettant de gérer la résultat ou l'erreur d'une opération asynchrone.const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('OK'), 1000);
});
Gestion d’erreurs avec try/catch
await.async function fetchData() {
try {
const response = await fetch('url');
} catch (error) {
console.error('Erreur:', error);
}
}
Concurrence & parallélisme
const p1 = fetch(url1);
const p2 = fetch(url2);
const results = await Promise.all([p1, p2]);
async transforme une fonction en une fonction qui retourne une promesse, simplifiant la gestion des opérations asynchrones.await ne peut être utilisé qu’à l’intérieur d’une fonction async.try/catch pour gérer proprement les erreurs dans une fonction async.Promise.all() permet d’exécuter plusieurs promesses en parallèle et d’attendre leur complétion.async/await évite le "callback hell" et rend le code plus lisible, mais ne remplace pas la gestion fine des erreurs ou la parallélisation.await bloque l’exécution de la fonction, mais pas le thread principal, permettant à l’interface utilisateur de rester réactive.Async/await est une syntaxe moderne qui simplifie la gestion des opérations asynchrones en JavaScript, en rendant le code plus lisible et plus facile à maintenir, tout en permettant une gestion efficace des erreurs et de la concurrence.
| Aspect | var | let / const |
|---|---|---|
| Scope | Fonction ou global | Bloc (délimité par {}) |
| Hoisting | Oui, déclaration remontée | Non, zone morte jusqu’à déclaration |
| Réassignable | Oui | const non, let oui |
| Mutabilité (objets) | Réassignable, mutable | const : référence immuable, propriétés modifiables |
| Usage recommandé | À éviter sauf legacy | Préféré pour clarté et sécurité |
| Type de données | Exemple | Caractéristiques |
|---|---|---|
| Number | 42, 3.14 | Numérique |
| String | 'Bonjour' | Chaîne de caractères |
| Boolean | true, false | Vrai ou faux |
| Undefined | undefined | Variable déclarée mais non initialisée |
| Null | null | Valeur nulle explicitement assignée |
| Object | { nom: 'Alice' } | Collection de paires clé/valeur |
| Symbol | Symbol('id') | Identifiant unique |
| BigInt | 9007199254740991n | Nombres très grands |
var et let : var est hoistée, let non, ce qui peut causer des erreurs d’accès.== au lieu de === : risque de coercition implicite inattendue.const : erreur, sauf si c’est un objet dont les propriétés peuvent changer.let ou const avant déclaration : erreur de "zone morte".this dans une fonction fléchée hérite du contexte parent, pas de son propre.== : résultats surprenants (null == undefined true).var, let et const en termes de scope, hoisting et mutabilité.===.this dans différentes situations.async/await.Тествайте знанията си по Maîtrise des fondamentaux JavaScript modernes с 8 въпроса с множество отговори с подробни корекции.
1. Qu'est-ce qu'une variable déclarée avec var, let ou const en JavaScript ?
2. Quelle différence principale existe-t-il entre `var` et `let` en JavaScript moderne ?
Запомнете ключовите концепции на Maîtrise des fondamentaux JavaScript modernes с 10 интерактивни флашкарти.
Fonction fléchée — particularité `this` ?
Hérite du contexte lexical, pas de son propre `this`.
Variable — définition?
Conteneur pour stocker une valeur.
Coercition implicite — exemple ?
'5' + 1 donne '51'.
Intelligence Artificielle
Bases de données
Bases de données
Bases de données
Импортирайте курса си и AI генерира листове, тестове и флашкарти за 30 секунди.
Генератор на листове