Aide-mémoire JavaScript
Dernière mise à jour
Variables (let, const, var)
Déclarer des valeurs ; préférez const, puis let, et évitez var.
| Opération | Syntaxe |
|---|---|
| Portée de bloc, réaffectable | let count = 0; |
| Portée de bloc, non réaffectable | const name = "Ada"; |
| Portée de fonction (ancien) | var x = 1; |
| Déclarer sans valeur | let result; |
| Déclarations multiples | let a = 1, b = 2; |
| Objet constant (contenu modifiable) | const user = {}; user.id = 1; |
Types de données
Les types primitifs et référence, et comment les vérifier.
| Type | Exemple |
|---|---|
| Number | let n = 42; |
| String | let s = "hi"; |
| Boolean | let ok = true; |
| Array | let arr = [1, 2, 3]; |
| Object | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| Vérifier un type | typeof n |
| Convertir | Number("7"), String(42), Boolean(0) |
Chaînes et littéraux de gabarit
Construire et manipuler du texte.
| Opération | Syntaxe |
|---|---|
| Littéral de gabarit | Hi ${name}, age ${age} (entourer de backticks) |
| Longueur | text.length |
| Majuscules / minuscules | text.toUpperCase(), text.toLowerCase() |
| Supprimer les espaces | text.trim() |
| Tout remplacer | text.replaceAll("a", "b") |
| Découper en tableau | text.split(",") |
| Contient | text.includes("js") |
| Slice | text.slice(0, 3) |
Tableaux et méthodes de tableau
Collections ordonnées et les méthodes qui les parcourent.
| Opération | Syntaxe |
|---|---|
| Ajouter / retirer à la fin | arr.push(4), arr.pop() |
| Ajouter / retirer au début | arr.unshift(0), arr.shift() |
| Transformer chaque élément | arr.map(x => x * 2) |
| Conserver les éléments correspondants | arr.filter(x => x > 0) |
| Réduire à une seule valeur | arr.reduce((sum, x) => sum + x, 0) |
| Trouver un élément | arr.find(x => x.id === 1) |
| Tester some / every | arr.some(f), arr.every(f) |
| Indice d'une valeur | arr.indexOf(3), arr.includes(3) |
| Joindre en chaîne | arr.join(", ") |
Objets
Collections de paires clé-valeur.
| Opération | Syntaxe |
|---|---|
| Créer | const user = { id: 1, name: "Ada" }; |
| Accéder à une propriété | user.name, user["name"] |
| Ajouter / mettre à jour une propriété | user.age = 25; |
| Supprimer une propriété | delete user.age; |
| Obtenir toutes les clés / valeurs | Object.keys(user), Object.values(user) |
| Obtenir les entrées | Object.entries(user) |
| Fusionner des objets | Object.assign({}, a, b) |
| Copie superficielle | const copy = { ...user }; |
Contrôle de flux
Conditions et boucles.
| Opération | Syntaxe |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Ternaire | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| Boucle for | for (let i = 0; i < 5; i++) { … } |
| For-of (valeurs) | for (const item of arr) { … } |
| For-in (clés) | for (const key in obj) { … } |
| Boucle while | while (x < 10) { … } |
Fonctions et fonctions fléchées
Définir des blocs réutilisables et appelables.
| Opération | Syntaxe |
|---|---|
| Déclaration de fonction | function add(a, b) { return a + b; } |
| Fonction fléchée | const add = (a, b) => a + b; |
| Fléchée à un argument | const sq = x => x * x; |
| Fléchée sans argument | const now = () => Date.now(); |
| Paramètre par défaut | function f(x = 0) { … } |
| Paramètres du reste | function f(...args) { … } |
| Invoquée immédiatement (IIFE) | (() => { … })(); |
Déstructuration et spread
Décomposer des valeurs et copier/fusionner des structures.
| Opération | Syntaxe |
|---|---|
| Déstructuration de tableau | const [a, b] = arr; |
| Déstructuration d'objet | const { id, name } = user; |
| Renommer en décomposant | const { id: userId } = user; |
| Valeur par défaut | const { age = 0 } = user; |
| Étaler un tableau | const all = [...a, ...b]; |
| Étaler un objet | const next = { ...user, age: 25 }; |
| Reste dans la déstructuration | const [first, ...rest] = arr; |
Promesses et async/await
Gérer le travail asynchrone comme les requêtes réseau.
| Opération | Syntaxe |
|---|---|
| Fonction asynchrone | async function load() { … } |
| Attendre une promesse | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Try / catch avec await | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| Attendre toutes | await Promise.all([a, b]) |
| La première réglée | await Promise.race([a, b]) |
La syntaxe JavaScript moderne que vous utilisez le plus, sur une seule page. Cet aide-mémoire JavaScript est une référence rapide pour l'ES6+ au quotidien - déclarer des variables, les méthodes de chaîne et de tableau, les objets, les fonctions fléchées, la déstructuration et async/await.
Tout ce qui figure ici est du JavaScript standard qui s'exécute dans les navigateurs modernes et Node.js. Copiez ce dont vous avez besoin, ou essayez n'importe quel extrait en direct dans le playground JS - rien à installer.
FAQ de l'aide-mémoire JavaScript
Cet aide-mémoire JavaScript est-il gratuit ?
Oui. Cet aide-mémoire JavaScript est entièrement gratuit, sans inscription. Mettez-le en favori et revenez dès que vous devez retrouver une syntaxe, une méthode de tableau ou un motif asynchrone.
Quelle est la différence entre == et === en JavaScript ?
== est l'égalité faible : elle convertit les opérandes au même type avant de comparer, donc 0 == "0" vaut true. === est l'égalité stricte : elle compare à la fois la valeur et le type sans conversion, donc 0 === "0" vaut false. Préférez === (et !==) dans presque tous les cas - c'est prévisible et cela évite les coercitions surprenantes.Quelle est la différence entre let, const et var ?
const et let ont une portée de bloc et ont été ajoutés en ES6 ; var a une portée de fonction et est plus ancien. Utilisez const pour les valeurs que vous ne réaffectez jamais, let pour celles que vous réaffectez, et évitez var pour prévenir les bugs de hoisting et de portée. Notez qu'un objet ou un tableau const peut toujours voir son contenu modifié - seule la liaison est constante.Puis-je m'entraîner à JavaScript en ligne ?
Oui. Ouvrez le playground JS pour exécuter n'importe quel extrait de cet aide-mémoire dans votre navigateur - rien à installer. Quand vous voulez de la structure, le cours JavaScript interactif gratuit de Coddy vous emmène des variables et des boucles jusqu'aux méthodes de tableau et à async/await, étape par étape.
Cet aide-mémoire convient-il aux débutants ?
Oui. Il est organisé des bases (variables, types de données, chaînes) jusqu'à la déstructuration et async/await, pour que vous puissiez utiliser les premières sections dès le premier jour et progresser vers les fonctionnalités modernes de l'ES6+.
Ressources connexes
Plus d'aide-mémoires
