Variables et types en JavaScript

📌 Le cours : stocker et typer des valeurs

JavaScript est le langage du navigateur : c'est lui qui rend une page interactive (voir le DOM), mais il tourne aussi sur les serveurs (Node.js). Il est dynamiquement typé : une variable n'a pas de type, c'est la valeur qu'elle contient qui en a un, et ce type peut changer au fil du programme.

let, const et var

La règle d'or : const par défaut, let seulement quand la variable doit changer. const n'est pas « immuable » pour autant : pour un tableau ou un objet, il interdit de réaffecter la variable, mais pas de modifier le contenu (voir Tableaux).

if (true) {
  let dedans = 1;      // n'existe que dans ce bloc
  var fuite = 2;       // « fuit » hors du bloc
}
console.log(typeof dedans);
console.log(fuite);

undefined
2

Nommer ses variables

• En camelCase : nombreDeNotes, estMajeur ; en MAJUSCULES_AVEC_TIRETS pour de vraies constantes : TAUX_TVA.
• Le nom commence par une lettre, _ ou $, jamais par un chiffre ; il est sensible à la casse (Age n'est pas age).
• On évite les mots réservés (class, new, return…) et on choisit un nom qui dit ce que contient la variable.

Les types primitifs

Tout le reste (tableaux, objets, fonctions, dates) est un objet. typeof répond "object" pour un tableau : pour le reconnaître, utilise Array.isArray(x).

console.log(typeof 42, typeof "a", typeof true);
console.log(typeof undefined, typeof null, typeof [1, 2]);
console.log(Array.isArray([1, 2]));

number string boolean
undefined object object
true

Les nombres

Il n'y a qu'un seul type de nombre : un réel sur 64 bits, comme le double du C ou du Java. Les entiers n'en sont qu'un cas particulier ; ils sont exacts jusqu'à 2⁵³. / fait toujours une division décimale (pas de division entière : utilise Math.floor). ** est la puissance, % le reste.

console.log(7 / 2);
console.log(Math.floor(7 / 2), 7 % 2, 2 ** 10);
console.log((3.14159).toFixed(2));
console.log(1 / 0, Number.isInteger(5.0));

3.5
3 1 1024
3.14
Infinity true

0.1 + 0.2 donne 0.30000000000000004 : comme en Python ou en C, les réels sont stockés en binaire et ne représentent pas exactement 0,1 (voir le chapitre Entiers pour la représentation des nombres). Ne compare donc jamais deux réels avec === : calcule leur écart.

Conversions et coercition

JavaScript convertit automatiquement les types quand un opérateur l'exige. L'opérateur + concatène dès qu'un des côtés est un texte, alors que -, * et / convertissent en nombre. Pour éviter les surprises, convertis toi-même : Number("42") (strict : Number("42px") donne NaN), parseInt("42px") (lit le début : 42), parseFloat("3.5"), String(42).

== ou === ?

== convertit les types avant de comparer (et donne des résultats déroutants), === compare valeur et type. Utilise toujours === et !==.

console.log(1 == "1", 1 === "1");
console.log(0 == false, 0 === false);
console.log(null == undefined, null === undefined);

true false
true false
true false

Les chaînes modèles

Entre accents graves, une chaîne peut contenir des expressions entre ${ } (voir Chaînes) et s'étendre sur plusieurs lignes. C'est la façon moderne de construire un texte.

const nom = "Lina";
const note = 14.5;
console.log(`${nom} a ${note}/20 : ${note >= 10 ? "admise" : "refusee"}`);

Lina a 14.5/20 : admise

⚠️ Erreurs fréquentes

Comparer avec == au lieu de ===

"0" == 0, [] == false, null == undefined sont tous vrais : des règles de conversion cachées qu'on ne retient pas. === n'a qu'une règle.

Additionner un texte et un nombre

const total = prompt("Nombre ?") + 5;   // "3" + 5 donne "35"

const total = Number(prompt("Nombre ?")) + 5;   // 3 + 5 donne 8

Tout ce qui vient d'un champ de formulaire ou de prompt est un texte, même si l'utilisateur tape un nombre.

Réaffecter une const

const x = 1; x = 2; lève « TypeError: Assignment to constant variable ». À l'inverse, const tab = [1]; tab.push(2); est autorisé : la variable désigne toujours le même tableau.

Utiliser une variable qui n'existe pas

Une faute de frappe dans un nom donne « ReferenceError: x is not defined ». Une variable déclarée mais sans valeur vaut undefined, ce qui est différent. Dans les anciens scripts, oublier le mot-clé (x = 5;) créait même une variable globale par accident : active toujours le mode strict ("use strict";, activé d'office dans les modules).

Tester NaN avec ===

NaN (« Not a Number ») n'est égal à rien, pas même à lui-même : NaN === NaN est faux. Pour le détecter, utilise Number.isNaN(x).

Compter sur parseInt sans contrôle

parseInt("12abc") donne 12 sans protester, et parseInt("") donne NaN. Si la saisie doit être strictement un nombre, utilise Number(…) puis Number.isNaN (ou Number.isFinite).

📋 Aide-mémoire

• const par défaut, let si la valeur change, jamais var ; noms en camelCase, sensibles à la casse.
• Types primitifs : number, string, boolean, undefined, null, bigint ; le reste est un objet (Array.isArray pour un tableau).
• Un seul type de nombre (réel 64 bits) : / décimal, Math.floor, %, **, toFixed(2), erreurs d'arrondi (0.1 + 0.2).
• + concatène dès qu'un côté est un texte ; convertir : Number(…), parseInt(…), parseFloat(…), String(…).
• Toujours === et !== ; Number.isNaN(x) pour tester NaN.
• Chaînes modèles : `texte ${expression}` ; ce qui vient d'un formulaire ou de prompt est un texte.