Variables et types de données — JavaScript

Qu'est-ce que c'est et pourquoi ?

Imagine que ton ordinateur est un immense bureau. Il y a des manuels, des cahiers, des stylos et, bien sûr, ton smartphone. Pour trouver rapidement ce dont tu as besoin, tu mets chaque chose à sa place. En programmation, c'est pareil : quand un programme fonctionne, il a besoin de stocker des nombres, des mots et d'autres données. Pour cela, il existe des variables.

Une variable est comme une boîte avec une étiquette. Sur l'étiquette, tu écris un nom (par exemple, "monAge"), et à l'intérieur tu mets une valeur (par exemple, 12). Quand tu as besoin de cette valeur, tu dis simplement : "Donne-moi ce qui se trouve dans la boîte nommée monAge".

Un type de données est une règle qui définit ce que l'on peut mettre dans la boîte. Dans une boîte, on ne peut mettre que des nombres, dans une autre que du texte, dans une troisième que des affirmations vraies ou fausses (oui/non). Si tu essaies de mettre du texte dans une boîte pour nombres, l'ordinateur sera confus. Il est donc important de connaître les différents types et comment les utiliser correctement.

En JavaScript (JS), les types de données fonctionnent presque comme en Python, mais il y a des différences importantes. Par exemple, en Python tu écris age = 12, et Python devine tout seul que 12 est un nombre. En JavaScript, c'est pareil, mais il y a des nuances : JS est parfois trop "devineur" et peut faire ce à quoi tu ne t'attends pas. C'est pourquoi nous allons apprendre à indiquer explicitement ce que nous voulons.

Pourquoi est-ce nécessaire ? Imagine que tu écris un programme de calculatrice. Si tu mélanges les types et que tu additionnes le nombre 5 avec le texte "5", tu n'obtiendras pas 10, mais "55" (cinq cinq à la suite). L'ordinateur fera ce que tu as dit, et non ce que tu pensais. Donc, la connaissance des types de données est un super-pouvoir qui t'aide à éviter des erreurs stupides.

Exemples de code avec explications

Passons tout de suite à la pratique. Ouvre n'importe quel éditeur de code (par exemple, celui intégré au navigateur en appuyant sur F12 et en allant dans l'onglet Console) ou utilise un éditeur en ligne comme CodePen ou JSFiddle. Écris le code et regarde ce qui se passe.

Exemple 1 : Créer des variables avec des nombres

// Créons une variable nommée "myAge" et mettons-y le nombre 12
let myAge = 12;

// Créons une variable "pi" et mettons-y le nombre décimal 3.14
let pi = 3.14;

// Créons une variable "negativeNumber" et mettons-y le nombre négatif -5
let negativeNumber = -5;

// Affichons les valeurs à l'écran
console.log("Mon âge :", myAge);   // Affichera : Mon âge : 12
console.log("Le nombre Pi :", pi);         // Affichera : Le nombre Pi : 3.14
console.log("Nombre négatif :", negativeNumber); // Affichera : Nombre négatif : -5

// Essayons maintenant d'additionner deux nombres
let sum = myAge + pi;  // 12 + 3.14 = 15.14
console.log("Somme de l'âge et de Pi :", sum); // Affichera : Somme de l'âge et de Pi : 15.14

// Remarque : en JavaScript, la partie décimale est séparée par un point, et non par une virgule !
// Si tu écris 3,14 — ce sera une erreur, car la virgule a une autre signification.

Explication : Nous avons utilisé le mot-clé let. Il dit à JavaScript : "Crée une nouvelle boîte". Ensuite, nous avons écrit le nom de la variable (myAge), le signe égal (=) et la valeur (12). Le signe égal ne signifie pas "égal" au sens mathématique. Il signifie "mets dans la boîte". En Python, tu écrirais la même chose : my_age = 12. La différence est qu'en JavaScript, on utilise le camelCase (premier mot en minuscule, chaque suivant en majuscule), tandis qu'en Python, on utilise le snake_case (mots séparés par des tirets bas).

Exemple 2 : Chaînes de caractères (String)

// Une chaîne est n'importe quel texte. Il faut le mettre entre guillemets.
let myName = "Anna";      // Guillemets doubles
let myCity = 'Moscou';    // Guillemets simples — ça marche aussi !
let myHobby = `dessin`; // Guillemets inversés — méthode moderne

// Affichons les chaînes
console.log("Je m'appelle :", myName);          // Affichera : Je m'appelle : Anna
console.log("J'habite dans la ville de :", myCity);     // Affichera : J'habite dans la ville de : Moscou
console.log("Mon hobby :", myHobby);          // Affichera : Mon hobby : dessin

// Les chaînes peuvent être concaténées (collées ensemble)
let greeting = "Bonjour, " + myName + " ! Tu habites à " + myCity + ".";
console.log(greeting); // Affichera : Bonjour, Anna ! Tu habites à Moscou.

// On peut aussi insérer des variables directement dans une chaîne avec les guillemets inversés
let greetingModern = `Bonjour, ${myName} ! Tu habites à ${myCity}.`;
console.log(greetingModern); // Affichera la même chose : Bonjour, Anna ! Tu habites à Moscou.

// Remarque : ${...} est une syntaxe spéciale qui fonctionne uniquement avec les guillemets inversés.
// C'est très pratique, plus besoin de mettre des petits plus partout !

Explication : En Python, les chaînes peuvent aussi être créées avec des guillemets simples ou doubles. Mais en JavaScript, il existe un type supplémentaire : les guillemets inversés (`` ` ``). Ils permettent d'insérer des variables directement dans le texte avec ${}. Cela s'appelle les chaînes template (template strings). En Python, on utilise les f-strings : f"Bonjour, {my_name}!". Le principe est le même, seule la syntaxe diffère.

Exemple 3 : Type booléen (Boolean) — vrai ou faux

// Le type booléen ne peut avoir que deux valeurs : true (vrai) ou false (faux)
let isStudent = true;      // Je suis étudiant — c'est vrai
let hasPets = false;       // Je n'ai pas d'animaux domestiques — c'est faux

console.log("Suis-je étudiant ?", isStudent);  // Affichera : Suis-je étudiant ? true
console.log("Ai-je des animaux ?", hasPets); // Affichera : Ai-je des animaux ? false

// Les valeurs booléennes sont souvent obtenues à la suite de comparaisons
let myAge = 12;
let drivingAge = 18;

let canDrive = myAge >= drivingAge;  // 12 >= 18 ? C'est faux !
console.log("Puis-je conduire une voiture ?", canDrive); // Affichera : Puis-je conduire une voiture ? false

// Autres exemples de comparaisons :
let number1 = 10;
let number2 = 20;

console.log("10 est-il plus grand que 20 ?", number1 > num