# 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 <button {...otherProps}>{label}</button>;
};
```


## 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 = `
    <div>
        <h1>${name}</h1>
        <p>Age: ${age}</p>
    </div>
`;
```

### 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


[[:15_training:module1-javascript-es6:start|← Retour au module]] | [[:15_training:module1-javascript-es6:fonctions|Chapitre suivant : Fonctions →]]