@@ -75,9 +75,9 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
Même si nous n'avons pas encore vu comment manipuler la page html grâce à l'API DOM (prochains chapitres), vous trouverez ci-dessous le code qui va permettre d'injecter notre balise `<a>` dans la page. A la fin de votre code, ajoutez donc l'instruction suivante :
@@ -68,5 +68,10 @@ L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni
2.**Une fois le fichier `build/main.js` créé, modifiez le fichier `index.html` pour charger ce fichier à la place du `src/main.js`.** Rechargez la page pour vérifier que tout fonctionne toujours correctement !
3.**Pour simplifier le travail et éviter d'avoir à compiler manuellement à chaque modification**, vous pourrez utiliser dans les futurs TP, la commande suivante qui va tourner en tâche de fond et recompiler à chaque sauvegarde du fichier js/main.js :
@@ -49,19 +49,19 @@ Une des fonctionnalités ES6+ les plus pratiquées s'appelle le "destructuring".
Le destructuring permet de déclarer des variables dont les valeurs vont être remplies automatiquement par des propriétés d'objets. Prenons par exemple l'objet `character` ci-dessous :
Si l'on veut récupérer son nom et son prénom, sans le destructuring, on ferait ceci :
```js
constfirstname=character.firstname,
lastname=character.lastname;
constfirstName=character.firstName,
lastName=character.lastName;
```
**C'est assez verbeux** : on répète `character` deux fois, `firstname` deux fois et `lastname` deux fois également.
**C'est assez verbeux** : on répète `character` deux fois, `firstName` deux fois et `lastName` deux fois également.
Et bien avec le destructuring on va pouvoir faire exactement la même chose mais en plus rapide :
```js
const{firstname,lastname}=character;
const{firstName,lastName}=character;
```
Notez les deux accolades autour du nom des constantes : c'est la syntaxe pour faire du desctructuring d'objets.
...
...
@@ -77,18 +77,18 @@ Le destructuring est souvent utilisé dans la déclaration de fonctions qui reç
```js
functionkill(character){
console.log(`${character.firstname}${character.lastname} is dead :'(`);
console.log(`${character.firstName}${character.lastName} is dead :'(`);
}
```
Le destructuring permet de simplifier l'écriture de la fonction :
```js
functionkill({firstname,lastname}){
console.log(`${firstname}${lastname} is dead :'(`);
functionkill({firstName,lastName}){
console.log(`${firstName}${lastName} is dead :'(`);
}
```
Dans cette nouvelle version, le code est beaucoup moins verbeux, et surtout la fonction est maintenant quasiment **auto-documentée** : rien qu'en lisant la signature de la fonction, on sait que le paramètre qu'on doit lui passer est un objet (grâce aux accolades) et aussi qu'il doit avoir deux propriétés, firstname et lastname. Pratique !
Dans cette nouvelle version, le code est beaucoup moins verbeux, et surtout la fonction est maintenant quasiment **auto-documentée** : rien qu'en lisant la signature de la fonction, on sait que le paramètre qu'on doit lui passer est un objet (grâce aux accolades) et aussi qu'il doit avoir deux propriétés, firstName et lastName. Pratique !
### G.3.3. Mise en application
La consigne pour ce dernier exercice est simple : **appliquez le destructuring partout où c'est possible dans votre code !**