Affectation
L’arithmétique vous a donné des symboles qui calculent un nouveau nombre. Ici, vous placez le résultat dans une boîte nommée, puis vous la mettez à jour. L’affectation remplit les variables — avec = et des formes courtes comme += qui veulent dire « prends l’ancienne valeur, change-la, range-la à nouveau. »
Qu’est-ce que l’affectation ?
L’affectation stocke une valeur dans une variable. À gauche : le nom. À droite : la valeur (ou une expression qui la produit). Après let points = 10;, le nom points contient 10. Plus loin, vous pouvez lire ce nom ou y ranger une nouvelle valeur.
Les opérateurs en un coup d’œil
📊 Opérateurs d’affectation du quotidien
| Opérateur | Signifie | Équivaut à |
|---|---|---|
= |
stocker | (premier stockage ou remplacement total) |
+= |
ajouter puis stocker | x = x + … |
-= |
soustraire puis stocker | x = x - … |
*= |
multiplier puis stocker | x = x * … |
/= |
diviser puis stocker | x = x / … |
%= |
reste puis stocker | x = x % … |
Gardez cette fiche sous la main. Chaque raccourci reste une affectation — il plie le calcul dans une seule instruction. Un débutant doit pouvoir déplier += en x = x + … mentalement.
let points = 10;
console.log(points);
let label = "ready";
console.log(label);
let total = 4 + 6;
console.log(total);
Réaffecter avec let
Avec let, une affectation ultérieure remplace la valeur stockée. C’est normal pour compteurs, scores et champs de formulaire qui changent.
let score = 0;
console.log(score);
score = 10;
console.log(score);
score = score + 5;
console.log(score);
La console affiche 0, puis 10, puis 15. Chaque = écrit une nouvelle valeur dans score. Préférez const quand le nom ne doit pas changer après le premier stockage — const refuse une seconde affectation à ce nom.
Affectation composée (raccourcis)
Les raccourcis mettent à jour et stockent en une ligne. Le même nom reste à gauche.
let n = 8;
n += 2;
console.log(n);
n -= 3;
console.log(n);
n *= 2;
console.log(n);
n /= 4;
console.log(n);
n %= 3;
console.log(n);
Partez de 8. Après += 2 vous avez 10. Après -= 3 → 7. Après *= 2 → 14. Après /= 4 → 3.5. Après %= 3 → 0.5. Suivez un raccourci à la fois jusqu’à ce que le motif soit automatique.
+= avec du texte
+= fonctionne aussi quand la valeur stockée est une chaîne — elle ajoute du texte. Utile pour construire un message pas à pas.
let msg = "Hi";
msg += " ";
msg += "Sam";
console.log(msg);
let line = "score=";
line += 12;
console.log(line);
msg devient "Hi Sam". line devient "score=12" car coller un nombre à une chaîne transforme le résultat en texte. Même idée que le piège du + en arithmétique — sachez si vous vouliez des nombres ou un message.
= stocke ; === compare
Un signe égal stocke. Trois demandent « même valeur et même type ? ». Les confondre est une erreur classique : écrire if (x = 5) stocke 5 au lieu de comparer.
let x = 5;
console.log(x);
console.log(x === 5);
console.log(x === "5");
x = 9;
console.log(x === 9);
Après let x = 5, le journal de x vaut 5. x === 5 est true. x === "5" est false (nombre vs chaîne). Plus tard, x = 9 stocke une nouvelle valeur ; alors x === 9 est true. La leçon profonde sur la comparaison vient ensuite — ici, seul le contraste stocker / poser une question compte.
Mettre à jour un compteur sur la page
Stockez un compte de départ, augmentez-le avec +=, et écrivez le résultat dans la page.
<!DOCTYPE html>
<html>
<head>
<title>Assignment — page counter</title>
</head>
<body>
<p id="out">…</p>
<script>
let clicks = 0;
clicks += 1;
clicks += 2;
let box = document.getElementById("out");
box.textContent = "clicks=" + clicks;
</script>
</body>
</html>
Départ à 0, plus 1, puis 2 → la page affiche clicks=3. Changez les raccourcis, rechargez, vérifiez le texte. De vrais boutons pourront appeler la même idée plus tard ; cette démo montre seulement stocker et mettre à jour.
À vous de jouer
- Stockez
let a = 3, journaliseza, puis affecteza = 7et journalisez à nouveau. - Partez de
let n = 10, exécutezn += 4, journalisezn. - À partir de ce
n, exécutezn *= 2et journalisez. - Construisez
let s = "Go"puiss += "!"et journalisez. - Journalisez
7 === 7et7 === "7"côte à côte. - Dans la démo HTML, changez seulement le second raccourci (
+= 2), rechargez, lisez la nouvelle valeur de clicks.
Erreurs fréquentes
- Écrire
=alors que vous vouliez===dans une condition - Essayer de réaffecter un nom
constaprès le premier stockage - Oublier le nom de variable à gauche (
+= 5seul n’est pas valide) - Croire que
+=ne marche qu’avec des nombres — les chaînes s’ajoutent aussi - Confondre affectation (stocker) et arithmétique pure (nouvelle valeur sans cible nommée)
Résumé
=stocke une valeur dans une variableletautorise des stockages ultérieurs ;constfige le premier+=-=*=/=%=mettent à jour et stockent en une étape+=peut ajouter du texte ou additionner des nombres=stocke ;===compare — ne les inversez pas- Ensuite : comparaison — poser des questions avec
===,!==,<,>et les autres
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut