---
title: "Chapitre 1 : Variables et Scope"
weight: 310
---
# 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
```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";
```
### Attention : const ne signifie pas immuable
`const` empêche la **réassignation**, pas la **mutation** :
```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
```
### Comparaison avec PHP
```php
// PHP
const API_URL = "..."; // Constante (valeur primitive uniquement)
$user = ["name" => "Jean"]; // Variable
```
```javascript
// 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
```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)
```
### Déstructuration de tableaux
```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"
```
### Usage fréquent en React
```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
};
```
### Comparaison avec PHP
```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
```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"];
```
### Spread sur les objets
```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 }
```
### Usage critique en React
En React, on ne modifie jamais l'état directement. On crée une **nouvelle copie** :
```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 });
```
### Comparaison avec PHP
```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 :
```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 ;
};
```
## Template Literals (backticks)
Les template literals permettent l'interpolation et les chaînes multi-lignes :
```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 = `
`;
```
### Comparaison avec PHP
```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 :
```javascript
const response = {
data: {
user: {
name: "Jean",
email: "jean@example.com",
role: "admin"
}
}
};
// Votre code ici
```
**Solution :**
```javascript
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 :
```javascript
const user = { name: "Jean", age: 30 };
// Résultat attendu : { name: "Jean", age: 31, city: "Paris" }
```
**Solution :**
```javascript
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](/training/module1-javascript-es6) | [Chapitre suivant : Fonctions ->](/training/module1-javascript-es6/fonctions)