JavaScript : Les bases

Maintenant qu'on sait ce qu'est JavaScript, passons à la pratique. Voici la boîte à outils de base : de quoi lire et écrire du JavaScript au quotidien.

# Déclarer des variables

En JavaScript moderne, on déclare une variable avec const ou let. La règle est simple : const par défaut, let seulement si la valeur doit changer.

const nom = "Baptiste";   // ne changera jamais
nom = "Autre";            // erreur : une const ne se réassigne pas

let compteur = 0;         // peut être réassignée
compteur = compteur + 1;  // OK

const nom = "Baptiste";   // ne changera jamais

nom = "Autre";            // erreur : une const ne se réassigne pas

let compteur = 0;         // peut être réassignée

compteur = compteur + 1;  // OK

# Les types de valeurs

JavaScript a quelques types de base. Comme il est dynamiquement typé, c'est la valeur qui porte le type, pas la variable.

L'opérateur typeof permet de connaître le type d'une valeur :

typeof "Bonjour";  // "string"
typeof 42;         // "number"
typeof true;       // "boolean"

typeof "Bonjour";  // "string"

typeof 42;         // "number"

typeof true;       // "boolean"

# Les fonctions

Une fonction regroupe un bout de code réutilisable. Deux syntaxes cohabitent.

La déclaration classique :

function addition(a, b) {
  return a + b;
}

function addition(a, b) {

  return a + b;

}

Et la fonction fléchée (arrow function), plus courte, omniprésente en React :

const addition = (a, b) => a + b;

const addition = (a, b) => a + b;

On peut aussi donner des valeurs par défaut aux paramètres :

function saluer(nom = "inconnu") {
  return `Bonjour ${nom}`;
}

saluer();            // "Bonjour inconnu"
saluer("Baptiste");  // "Bonjour Baptiste"

function saluer(nom = "inconnu") {

  return `Bonjour ${nom}`;

}

saluer();            // "Bonjour inconnu"

saluer("Baptiste");  // "Bonjour Baptiste"

Les accents graves (`) créent un template literal : une chaîne dans laquelle on injecte des variables avec ${...}.

# Comparaisons et conditions

Pour comparer deux valeurs, utilise toujours === (égalité stricte) plutôt que ==.

5 === 5;      // true
5 === "5";    // false  (types différents)
5 == "5";     // true   (== convertit les types : source de bugs)

5 === 5;      // true

5 === "5";    // false  (types différents)

5 == "5";     // true   (== convertit les types : source de bugs)

La règle : === compare la valeur et le type, sans conversion cachée. C'est ce qu'on veut dans 99 % des cas.

Une condition classique :

if (age >= 18) {
  console.log("Majeur");
} else {
  console.log("Mineur");
}

if (age >= 18) {

  console.log("Majeur");

} else {

  console.log("Mineur");

}

Et sa version courte, le ternaire, pratique pour une valeur :

const statut = age >= 18 ? "Majeur" : "Mineur";

const statut = age >= 18 ? "Majeur" : "Mineur";

# Les boucles

Pour répéter une action, plusieurs boucles existent. Les deux plus utiles au quotidien :

// Boucle classique
for (let i = 0; i < 3; i++) {
  console.log(i);   // 0, 1, 2
}

// Parcourir les éléments d'un tableau
const fruits = ["pomme", "poire", "kiwi"];
for (const fruit of fruits) {
  console.log(fruit);
}

// Boucle classique

for (let i = 0; i < 3; i++) {

  console.log(i);   // 0, 1, 2

}

// Parcourir les éléments d'un tableau

const fruits = ["pomme", "poire", "kiwi"];

for (const fruit of fruits) {

  console.log(fruit);

}

En pratique, sur les tableaux, on préfère souvent les méthodes comme forEach, map ou filter, plus lisibles. On les verra en détail dans la note sur les tableaux et objets.

# À retenir

• Déclare avec const par défaut, let si la valeur change, jamais var.
• JavaScript est dynamiquement typé : typeof te donne le type d'une valeur.
• Les fonctions fléchées (() => ...) sont partout, surtout en React.
• Compare toujours avec ===, jamais ==.
• Les template literals (`Bonjour ${nom}`) rendent les chaînes bien plus lisibles.

Prochaine étape : manipuler des collections de données avec les tableaux et les objets.