Chapitre 1 : Variables et Scope

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

snippet.javascript

// 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";

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

snippet.javascript

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

snippet.php

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

snippet.javascript

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

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

snippet.javascript

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)

snippet.javascript

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"

snippet.javascript

// 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
};

snippet.php

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

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

snippet.javascript

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"];

snippet.javascript

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 }

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

snippet.javascript

// INCORRECT - mutation directe
user.age = 31;
setUser(user); // React ne détecte pas le changement!
 
// CORRECT - nouvelle copie avec spread
setUser({ ...user, age: 31 });

snippet.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+

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

snippet.javascript

// 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>;
};

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

snippet.javascript

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>
`;

snippet.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`;

Extraire name et email de cet objet :

snippet.javascript

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

Solution :

snippet.javascript

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

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

snippet.javascript

const user = { name: "Jean", age: 30 };
 
// Résultat attendu : { name: "Jean", age: 31, city: "Paris" }

Solution :

snippet.javascript

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

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 →