Chapitre 1 : Variables et Scope

const et let vs var

En JavaScript moderne, on n'utilise plus var. On utilise :

• const : pour les valeurs qui ne changent pas (la majorité des cas)
• let : pour les valeurs qui doivent être réassignées

// CORRECT - JavaScript moderne
const API_URL = "https://example.com/api";
const user = { name: "Jean" };

let counter = 0;
counter = counter + 1; // OK, let permet la réassignation

// INCORRECT - éviter var
var oldStyle = "ne pas utiliser";

Attention : const ne signifie pas immuable

const empêche la réassignation, pas la mutation :

const user = { name: "Jean" };

// INTERDIT - réassignation
user = { name: "Paul" }; // TypeError!

// AUTORISÉ - mutation de l'objet
user.name = "Paul"; // OK
user.age = 30;      // OK

const items = [1, 2, 3];
items.push(4);      // OK - le tableau est modifié
items = [5, 6];     // TypeError! - réassignation interdite

Comparaison avec PHP

// PHP
const API_URL = "...";     // Constante (valeur primitive uniquement)
$user = ["name" => "Jean"]; // Variable

// JavaScript
const API_URL = "...";          // Constante
const user = { name: "Jean" };  // Aussi const! (objet)

Déstructuration

La déstructuration permet d'extraire des valeurs d'objets ou de tableaux en une seule ligne.

Déstructuration d'objets

const user = {
    name: "Jean",
    age: 30,
    city: "Paris"
};

// SANS déstructuration
const name = user.name;
const age = user.age;

// AVEC déstructuration
const { name, age } = user;
// name = "Jean", age = 30

// Renommer une variable
const { name: userName } = user;
// userName = "Jean"

// Valeur par défaut
const { country = "France" } = user;
// country = "France" (user.country n'existe pas)

Déstructuration de tableaux

const colors = ["rouge", "vert", "bleu"];

// SANS déstructuration
const first = colors[0];
const second = colors[1];

// AVEC déstructuration
const [first, second] = colors;
// first = "rouge", second = "vert"

// Ignorer des éléments
const [, , third] = colors;
// third = "bleu"

Usage fréquent en React

// useState retourne un tableau [valeur, fonction]
const [count, setCount] = useState(0);

// Props d'un composant
const MyComponent = ({ title, onClick }) => {
    // title et onClick extraits des props
};

Comparaison avec PHP

// PHP 7.1+
['name' => $name, 'age' => $age] = $user;
[$first, $second] = $colors;

Spread Operator (...)

L'opérateur spread (...) permet d'étendre un tableau ou un objet.

Spread sur les tableaux

const fruits = ["pomme", "poire"];
const vegetables = ["carotte", "poireau"];

// Fusionner des tableaux
const food = [...fruits, ...vegetables];
// ["pomme", "poire", "carotte", "poireau"]

// Copier un tableau (copie superficielle)
const fruitsCopy = [...fruits];

// Ajouter des éléments
const moreFruits = [...fruits, "orange", "banane"];

Spread sur les objets

const user = { name: "Jean", age: 30 };

// Copier un objet
const userCopy = { ...user };

// Fusionner/étendre un objet
const userWithCity = { ...user, city: "Paris" };
// { name: "Jean", age: 30, city: "Paris" }

// Écraser une propriété
const updatedUser = { ...user, age: 31 };
// { name: "Jean", age: 31 }

Usage critique en React

En React, on ne modifie jamais l'état directement. On crée une nouvelle copie :

// INCORRECT - mutation directe
user.age = 31;
setUser(user); // React ne détecte pas le changement!

// CORRECT - nouvelle copie avec spread
setUser({ ...user, age: 31 });

Comparaison avec PHP

// PHP - fusion de tableaux
$food = array_merge($fruits, $vegetables);
$food = [...$fruits, ...$vegetables]; // PHP 7.4+

// PHP - fusion d'objets/arrays associatifs
$userWithCity = array_merge($user, ['city' => 'Paris']);
$userWithCity = [...$user, 'city' => 'Paris']; // PHP 8.1+

Rest Parameters (...)

Le même opérateur ... sert aussi à collecter des arguments :

// Collecter tous les arguments restants
function sum(first, ...others) {
    console.log(first);  // 1
    console.log(others); // [2, 3, 4, 5]
}

sum(1, 2, 3, 4, 5);

// Collecter toutes les props restantes
const Button = ({ label, ...otherProps }) => {
    return <button {...otherProps}>{label}</button>;
};

Template Literals (backticks)

Les template literals permettent l'interpolation et les chaînes multi-lignes :

const name = "Jean";
const age = 30;

// Interpolation
const message = `Bonjour ${name}, tu as ${age} ans`;

// Expressions dans l'interpolation
const info = `Dans 10 ans, tu auras ${age + 10} ans`;

// Multi-lignes
const html = `
    <div>
        <h1>${name}</h1>
        <p>Age: ${age}</p>
    </div>
`;

Comparaison avec PHP

// PHP
$message = "Bonjour $name, tu as $age ans";
$message = "Bonjour {$name}, tu as {$age} ans";

// JavaScript - attention aux backticks!
const message = `Bonjour ${name}, tu as ${age} ans`;

Exercices

Exercice 1 : Déstructuration

Extraire name et email de cet objet :

const response = {
    data: {
        user: {
            name: "Jean",
            email: "jean@example.com",
            role: "admin"
        }
    }
};

// Votre code ici

Solution :

const { data: { user: { name, email } } } = response;
// ou en deux étapes :
const { user } = response.data;
const { name, email } = user;

Exercice 2 : Spread

Créer une copie de user avec city ajouté et age mis à jour :

const user = { name: "Jean", age: 30 };

// Résultat attendu : { name: "Jean", age: 31, city: "Paris" }

Solution :

const updatedUser = { ...user, age: 31, city: "Paris" };

Points clés à retenir

1. Utilisez const par défaut, let uniquement si réassignation nécessaire
2. const n'empêche pas la mutation des objets/tableaux
3. Déstructuration : const { a, b } = obj ou const [x, y] = arr
4. Spread : { ...obj } pour copier, { ...obj, newProp } pour étendre
5. Ne jamais muter l'état en React - toujours créer une copie

← Retour au module | Chapitre suivant : Fonctions ->