JavaScript ES6+ fondamentaux

Section 13.4.2 : JavaScript ES6+ fondamentaux

🎯 Objectif pédagogique

Maîtriser les fondamentaux de JavaScript moderne (ES6+) : variables, fonctions fléchées, template literals, destructuring, modules, et les méthodes d'array qui sont le cœur du JS quotidien.

JavaScript : le langage du web

JavaScript est le seul langage natif des navigateurs web. Il s'exécute côté client (navigateur) et, depuis Node.js, côté serveur. C'est le langage le plus utilisé au monde selon le Stack Overflow Developer Survey depuis 11 années consécutives.

Variables : let, const, var

// const : valeur qui ne change pas (PRÉFÉRÉ)
const API_URL = 'https://api.example.com';
const MAX_ITEMS = 100;

// let : valeur qui peut changer
let compteur = 0;
compteur += 1;

// var : ancien mot-clé (ÉVITER)
// Portée fonction au lieu de bloc, source de bugs

Types de données

// Primitifs
const nom = 'Alice';          // String
const age = 28;                // Number
const majeur = true;           // Boolean
const rien = null;             // Null
const indefini = undefined;    // Undefined

// Objets
const personne = { nom: 'Alice', age: 28 };
const fruits = ['pomme', 'banane', 'cerise'];

// typeof
typeof nom       // 'string'
typeof age       // 'number'
typeof majeur    // 'boolean'
typeof personne  // 'object'
typeof fruits    // 'object' (les arrays sont des objets)

Template literals

const prenom = 'Alice';
const age = 28;

// Ancien style (concaténation)
const msg1 = 'Bonjour, ' + prenom + ' ! Tu as ' + age + ' ans.';

// Template literal (ES6) — PRÉFÉRÉ
const msg2 = `Bonjour, ${prenom} ! Tu as ${age} ans.`;

// Multi-ligne possible
const html = `
  <div class="card">
    <h2>${prenom}</h2>
    <p>Âge : ${age}</p>
  </div>
`;

Arrow functions

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

// Arrow function (ES6)
const addition = (a, b) => a + b;

// Avec un seul paramètre, pas besoin de parenthèses
const double = n => n * 2;

// Avec corps multi-ligne, return explicite requis
const saluer = (nom) => {
  const message = `Bonjour, ${nom} !`;
  return message;
};

Destructuring

// Destructuring d objet
const personne = { nom: 'Alice', age: 28, ville: 'Paris' };
const { nom, age, ville } = personne;
console.log(nom);  // 'Alice'

// Avec renommage
const { nom: prenom, age: annees } = personne;

// Destructuring d array
const couleurs = ['rouge', 'vert', 'bleu'];
const [premiere, deuxieme, troisieme] = couleurs;

// Spread operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };  // { a: 1, b: 2, c: 3 }

Méthodes d'array (le cœur de JS)

const nombres = [1, 2, 3, 4, 5];

// map : transformer chaque élément
nombres.map(n => n * 2);         // [2, 4, 6, 8, 10]

// filter : garder les éléments qui passent un test
nombres.filter(n => n > 3);      // [4, 5]

// reduce : réduire à une seule valeur
nombres.reduce((acc, n) => acc + n, 0);  // 15

// find : premier élément qui passe le test
nombres.find(n => n > 3);        // 4

// some / every
nombres.some(n => n > 4);        // true
nombres.every(n => n > 0);       // true

// forEach : exécuter sans retour
nombres.forEach(n => console.log(n));

// Chaînage
const resultat = nombres
  .filter(n => n > 2)
  .map(n => n * 10)
  .reduce((acc, n) => acc + n, 0);  // 120