Les bases de JavaScript

Donner un nom à une valeur

Un programme JavaScript est une suite d'instructions, exécutées de haut en bas. Dans une page web, on les écrit entre les balises <script> ; on peut aussi les taper une à une dans la console du navigateur (outils de développement, souvent la touche F12), ou les lancer hors du navigateur avec Node.js.

<script>
  console.log("Bonjour !");
</script>

Bonjour !

Pour retenir une valeur, on la range dans une variable : un nom qui désigne une valeur en mémoire. On déclare une variable avec let si sa valeur va changer, avec const si elle ne doit plus être réassignée.¹

Tu croiseras aussi var, l'ancienne façon de déclarer, d'avant 2015. Elle n'a pas de portée de bloc (on verra ce que c'est dans la notion 6) : dans du code neuf, on utilise let et const. Le standard du langage s'appelle ECMAScript, et let et const sont arrivés avec sa version de 2015.¹

Fais défiler : une instruction s'éclate en morceaux.

Toutes les valeurs ne se ressemblent pas

Chaque valeur a un type. La norme en définit huit : sept types primitifs et les objets.¹ On n'écrit jamais le type d'une variable : JavaScript le déduit de la valeur, et une même variable let peut recevoir un nombre, puis un texte.

L'opérateur typeof donne le type d'une valeur, sous forme de texte : typeof 42 vaut "number", typeof "42" vaut "string". Deux réponses surprennent :²

• typeof null vaut "object" : un héritage de la toute première version du langage ; une correction a été proposée pour la norme, puis rejetée. null est pourtant une valeur primitive ;
• typeof [4, 5] vaut aussi "object" : un tableau est un objet. Pour le reconnaître, on écrit Array.isArray(t).

Calculer, coller, comparer

Les nombres se calculent avec +, -, *, /, ** (puissance) et % (reste de la division : 7 % 2 vaut 1, pratique pour savoir si un nombre est pair). Mais + a deux métiers : il additionne les nombres et il colle les chaînes. Dès qu'un des deux côtés est une chaîne, l'autre est converti en chaîne.³

"5" + 2       // "52"
"5" - 2       // 3
1 + 2 + "3"   // "33"
`${"Léa"} a ${5.5}`  // "Léa a 5.5"

Ligne 1 : 2 devient "2", puis les deux chaînes sont collées. Ligne 2 : le - n'existe que pour les nombres, "5" devient 5. Ligne 3 : on calcule de gauche à droite, 1 + 2 = 3, puis 3 + "3" colle. Ligne 4 : un gabarit, entre accents graves, insère des valeurs dans un texte avec ${…}.

Ces conversions faites en douce s'appellent la coercition. Pour éviter les surprises, on convertit soi-même : Number("42") donne 42, String(42) donne "42". Une conversion impossible donne NaN (Not a Number) : Number("4,5") vaut NaN, parce que la virgule n'est pas un séparateur décimal en JavaScript.

Comparer : == ou === ?

Les comparaisons <, >, <=, >= renvoient un booléen. Pour l'égalité, JavaScript en a deux : === (égalité stricte) compare sans rien convertir, et des types différents donnent toujours false ; == (égalité faible) convertit d'abord les valeurs vers un même type. MDN le dit sans détour : l'égalité stricte est presque toujours celle qu'il faut utiliser.⁴ Leurs contraires sont !== et !=.

Vrai, faux, et tout le reste

Dans un if, n'importe quelle valeur est convertie en booléen. Huit valeurs primitives deviennent false, on les dit falsy : false, 0, -0, 0n, "" (la chaîne vide), null, undefined et NaN. Toutes les autres sont truthy, y compris "0", " " et le tableau vide [].⁶ Les opérateurs logiques combinent les conditions : && (et), || (ou), ! (non).

Faire un choix

if exécute un bloc seulement si sa condition est vraie ; else if teste une autre condition, et else attrape tous les autres cas. Les conditions sont testées de haut en bas, et seule la première vraie est exécutée.

const note = 4.5;

if (note >= 4) {
  console.log("Suffisant");
} else {
  console.log("Insuffisant");
}

// ternaire : condition ? oui : non
const verdict = note >= 4
  ? "réussi"
  : "à retravailler";

Suffisant

Répéter sans recopier

Une boucle répète un bloc tant qu'une condition est vraie. La boucle for regroupe trois choses entre ses parenthèses : l'initialisation (let i = 0, faite une fois), la condition (i < notes.length, testée avant chaque tour) et le pas (i++, qui ajoute 1 à la fin de chaque tour).

Deux autres boucles reviennent souvent. while répète tant que sa condition est vraie, sans compteur intégré ; for…of parcourt directement les valeurs d'un tableau, sans indice :

let n = 0;
while (n <= 10) {   // 0, 2, 4… 10
  console.log(n);
  n += 2;  // sinon : boucle infinie
}

let total = 0;
for (const note of [4.5, 5, 3.5, 6]) {
  total += note;    // 19 à la fin
}

Écrire une fois, utiliser partout

Une fonction est un bloc de code nommé. Elle reçoit des paramètres (ci-dessous, notes), fait son travail et renvoie un résultat avec return. On la déclare une fois, on l'appelle autant qu'on veut, avec des arguments à chaque fois différents.

function moyenne(notes) {
  let somme = 0;
  for (const n of notes) somme += n;
  return somme / notes.length;
}

moyenne([4.5, 5, 3.5, 6]);   // 4.75
moyenne([6, 5]);             // 5.5

// fonction fléchée : plus courte
const arrondiDemi = note =>
  Math.round(note * 2) / 2;
arrondiDemi(4.75);           // 5

Où vit une variable ?

Une variable n'est pas visible partout : sa portée dépend de l'endroit où elle est déclarée. let et const vivent dans le bloc entre accolades où elles sont nées ; var vit dans toute la fonction.¹ Fais défiler.

Ranger plusieurs valeurs ensemble

Un tableau est une liste ordonnée. Ses cases sont numérotées à partir de 0 : dans const notes = [4.5, 5, 3.5], notes[0] vaut 4.5, notes.length vaut 3, et la dernière case est notes[notes.length - 1]. Lire une case qui n'existe pas donne undefined, sans erreur.

const notes = [4.5, 5, 3.5, 6];
notes.push(5.5);       // 5 notes
notes.includes(6);     // true
notes.map(n => n * 2);
// [9, 10, 7, 12, 11] : nouveau tableau
notes.filter(n => n < 4);   // [3.5]

const eleve = {
  prenom: "Léa",
  canton: "VD",
  notes: [5, 4.5]
};
eleve.prenom;          // "Léa"
eleve["canton"];       // "VD"
eleve.age = 16;        // ajoutée

Un objet regroupe des valeurs nommées, ses propriétés : une clé, deux points, une valeur. On lit une propriété avec un point (eleve.prenom) ou des crochets (eleve["canton"]). Un tableau d'objets décrit toute une classe : c'est exactement la forme des données JSON qu'envoient les serveurs.

Pourquoi ? Une variable ne contient pas le tableau lui-même, mais une référence vers lui. Fais défiler.

Les pièges classiques

Exercices corrigés

Cherche d'abord, sur papier ou dans la console, puis ouvre le corrigé. Chaque solution a été exécutée.

function estPair(n) {
  return n % 2 === 0;
}
estPair(7);    // false
estPair(-4);   // true

function max(t) {
  let plusGrand = t[0];
  for (const x of t) {
    if (x > plusGrand) plusGrand = x;
  }
  return plusGrand;
}
max([4, 5.5, 3, 6, 2]);   // 6

const notes = [4.5, 3.5, 5, 2.5, 4];

let compte = 0;
for (const n of notes) {
  if (n < 4) compte++;
}
// compte vaut 2

notes.filter(n => n < 4).length;   // 2

function arrondiDemi(note) {
  return Math.round(note * 2) / 2;
}
arrondiDemi(4.74);   // 4.5
arrondiDemi(4.75);   // 5

La fiche en huit lignes

Teste-toi