📦 Les variables

En JavaScript, il y a plusieurs types de "valeurs" :

  • Les primitives
  • Les objets

Les objets, on les verra dans les prochains modules plus avancés, concentrons-nous sur les primitives.

Il y a 7 primitives :

  • string (chaîne de caractère)
  • number (nombre)
  • bigint (très gros nombre)
  • boolean (vrai ou faux)
  • undefined (non défini)
  • null (nul)
  • symbol (symbole)

On verra chacune des primitives dans des exercices et cours dédiés... mais, pour pouvoir les utiliser, il faut des variables !

🖼️ Ouvrir le schéma Excalidraw

Mais il y a plusieurs types de boîtes !

La première, c'est la boîte let qu'on va appeler "type boîte modifiable". Celle-ci permet de mettre une valeur dedans et de la modifier.

🖼️ Ouvrir le schéma Excalidraw

Cette boîte peut "changer de contenu" et passer, par exemple, de "12" à "13" !

let age = 12;
console.log(age); // 12

age = 13;
console.log(age); // 13

😉 Ici, 12 est une valeur de type number et age une variable déclarée avec le mot-clé let.

Exercice

Fais en sorte que le test passe au vert :

let name = "";

// 🦁 Modifie la variable name avec "BeginJavaScript"

/* Ne pas modifier - */
describe("Name", () => {
test("Verify name is BeginJavaScript", () => {
expect(name).toBe("BeginJavaScript");
});
});

🔓 Solution

name = 'BeginJavaScript';

Tu peux tester l'erreur ici :

🧪 Ouvrir l'exercice sur StackBlitz

Les const

Un deuxième moyen de déclarer une variable est d'utiliser const.

Mais, quand tu fais ça, tu crées une boîte de type "non-modifiable".

Une fois une boîte créée avec const, il sera impossible de la modifier.

🖼️ Ouvrir le schéma Excalidraw

Cette fois, une fois une variable "primitive" définie, elle ne sera plus jamais modifiable !

const VS let

Quand utiliser const et quand utiliser let ?

La règle est assez simple :

Si tu ne modifies jamais une variable, utilise const. Sinon, utilise let

Dans le quiz suivant, je ne mettrai rien devant les variables que je déclare et tu dois définir quel type de variable je dois utiliser.

🎯 const ou let ?

age = 12;

console.log(age)

const, on ne modifie jamais age

someString = "Hello World";
someString = "Hello World";

let, on modifie someString. Même si la valeur est la même, il faut utiliser let

money = 12;
money = money + 1;

let, on modifie money ! Même si tu n'as pas encore vu les opérateurs mathématiques, tu peux voir que money est modifié.

userName = "Jean";

const, on ne modifie jamais userName

Conclusion

Tu as appris à utiliser les variables en JavaScript, tu as vu qu'il y a deux types de variables :

  • const : une variable qui ne peut pas être modifiée
  • let : une variable qui peut être modifiée

Au début de ce cours, je te présentais les "types primitifs" et c'est le sujet du prochain cours.

Quiz final

🧠 Quiz

Les variables sont comme des boîtes, parce que...

  • A. On peut les ouvrir
  • B. On peut mettre des choses dedans
  • C. On peut stocker des choses dedans

Réponse : C — On peut les ouvrir, on peut mettre des choses dedans, mais ce qui nous intéresse vraiment, c'est de pouvoir stocker des données. Comme tu le ferais si tu voulais stocker ta collection de cartes Pokémon dans une boîte pour plus tard.

✍️ Question

Donne-moi la liste des 7 primitives.

Réponse :

string, number, bigint, boolean, undefined, null, symbol

🧠 Quiz

Quelle est l'utilité d'une variable ?

  • A. On peut manipuler des données avec
  • B. On peut supprimer des données
  • C. On peut stocker des données

Réponse : A, C — Le but principal est de stocker et manipuler des données

🧠 Quiz

Quelle variable permet de stocker puis modifier des données ?

  • A. let
  • B. const

Réponse : A — C'est let

🧠 Quiz

Quelle variable permet de stocker puis manipuler des données ?

  • A. let
  • B. const

Réponse : A — C'est toujours let ! C'est un petit piège. Modifier et manipuler reviennent à la même chose.

🧠 Quiz

Quelle variable permet de stocker mais n'autorise pas à modifier des données ?

  • A. let
  • B. const

Réponse : B — Cette fois, c'est const 😂

✍️ Question

Quelle est l'erreur du code suivant :

const name = "BeginJS"
name = "BeginJavaScript"

Réponse :

Il est impossible de modifier une constante.

Et var dans tout ça ?

Effectivement, il est aussi possible de déclarer des variables avec var au lieu de let.

Mais var est maintenant ** obsolète** et ne devrait plus être utilisée.

👀 C'est quoi obsolète ?

En informatique, les choses bougent... et bougent vite ! Certaines choses sont considérées comme obsolète quand elles sont remplacées par une autre chose.

Tu rencontreras souvent la traduction anglaise, deprecated, pour parler des choses obsolètes.

Malheureusement, ils ne peuvent pas juste "supprimer" var car beaucoup de programmes utilisent toujours ce type de données, ils disent que c'est obsolète pour dire "c'est toujours disponible, mais vous ne devez plus l'utiliser".

var a les mêmes caractéristiques que let, mais il y a une différence importante :

  • var est globale alors que let est locale (on verra ça plus tard)
  • var peut-être déclarée plusieurs fois, alors que let ne peut être déclarée qu'une seule fois (ce qu'on a vu avant)
  • var peut-être utilisée avant d'être déclarée, alors que let ne peut pas (on le verra plus tard)