---
title: ES6 call me number six
tags: frontend, javascript, typescrypt
robots: noindex, nofollow
author: Julien Noyer
---
# Call me number Six
*Principales évolution du langage Javascript depuis la version ES6*
> © [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only
---
## Configuration de l’environement
Les langages, comme le JavaScript, évoluent souvent plus vite que les navigateurs qui sont censés les lires. C’est pourquoi il faut configurer votre environnement de développement pour écrire du code ES6 et pouvoir l’exploiter sur le Web. Différentes solutions existent, il s’agit de compilateur de codes qui sont capables de transcrire le code pour qu’il soit interprété correctement, nous utiliserons dans nos exemples la solution proposée par le framework Babel.
### Configuration du dossier de travail
Dans un premier temps, vous devez créer un dossier contenant deux sous-dossiers, “typings” et un “js”, ainsi qu’un fichier “package.json”.
```
MyES6proj
- js
- typings
- package.json
```
### Installation de babel cli
Ouvrez une fenêtre de terminal, rendez vous dans le dossier que vous venez de créer et tapez la commande suivante :
```
npm install --save-dev babel-cli babel-preset-env
```
> `--save` : référencie le module dans le fichier package.json
> `-dev` : indique qu’il s’agit d’un modul de développement
Toutes les option de bable sont disponibles sur babeljs.io.
### Configuration du compilateur
Une fois Babel CLI installé, vous ajouter un script dans votre fichier package.json pour configurer Babel CLI.
```json=
“scripts”: {
“build”: “babel --no-babelrc typings -w -d js
--presets=env”
},
```
> `-w` : compliation du/des fichier/s à la vollée
### Compilation des fichiers
Tous les fichiers ES6 du dossier “typings” seront compilés en ES5 dans le dossier “js” en tapant la commande suivante dans votre terminal :
```
npm run build
```
## Le templating ES6 : la backquote
Tous les développeurs s’étant souvent retrouvé à modifier le contenu du DOM, c'est retrouvé devant la complexité de la concaténation en JavaScript : l’enchaînement de plus et de backslash à outrance demande une gymnastique complexe.
ES6 intègre le principe des apostrophes inversées - ou backquote - qui permet d’écrire des strings sur plusieurs lignes et d’y appeler des variables sans devoir couper la chaîne.
```javascript=
/*
En ES6 pour définir une variable classique
il ne faut plus utiliser var mais let
*/
let name = `Abdel`
let age = 17
/*
Avec les backquote il est possible d’écrire
sur plusieurs ligne sans couper la chaine
*/
document.querySelector(`header`).innerHTML = `
<h1>Bonjour ${name}, pret à utiliser les backquotes ?</h1>
<p>Votre année de naissance est ${2017 - age}.</p>
`
```
---
## Les variables non modifiables
Nous venons de voir dans l’exemple précédent que le mot clés var a été remplacé par let, bien que les deux peuvent vivre ensemble dans le même fichier il est recommander d’utiliser "let" pour les variables classiques. ES6 intègre également la notion de variables non-modifiable et qui manquait à JavaScript : les constantes.
Définir une constante permet de bloquer la valeur d’une variable pour qu’elle ne puisse pas être modifiée, c’est principalement une aide au développement, car une fois la constante définie, une erreur sera indiquée lors de la compilation.
```javascript=
/*
Lorsqu’une constante est défini
il n’est pas possible d’en modifier la valeur
*/
const birthyear = 1997
birthyear = 1998
console.log(`Vous avez ${2017 - birthyear} ans`)
```
### Error de compilation
Le compilateur bloc son exécution et indique l’endroit où se trouve l’erreur :
```shell=
SyntaxError: src/app.js: “birthyear” is read-only
const birthyear = 1997
birthyear = 1998
```
---
## Les fonctions fléchées
Grâce à ES6, il est à présent possible d’écrire une fonction simple sur une seule ligne avec les fonctions fléchées, il suffit de créer une variable et d’écrire la fonction selon la syntaxe suivante : (attr) => result.
```javascript=
/*
Si une fonction n’a qu’un seul retour
il est possible de l’écrire sur une ligne
*/
const twice = (attr) => return attr * 2
twice(7) === 14
```
### Les paramêtres optionnels
Une des grandes possibilités qu’ajoute ES6 au langage est la possibilité de définir des paramètres optionnels directement lors de la création de la fonction.
```javascript=
/*
En ajoutant une valeur à l’attribut de la fonction
il devient optionnel
*/
const twice = (attr = 7) => {
return attr * 2
}
twice() === 14
twice(5) === 10
```
---
## Rest Parameter et Spread Operator
Ces deux nouveaux principes consistent à agréger plusieurs valeurs en un seul paramètre pour faciliter le traitement de ces valeurs. Cette technique consiste à préfixer un paramètre avec trois points et selon qu’il soit ajouter à une fonction ou une variable, les valeurs seront intégrées dans un tableau itérable ou concaténées avec la valeur de la variable qui les appels.
### Function : Rest Parameter
Dans le cadre d’une fonction lorsque les trois points sont ajoutés avant un paramêtre, la function comprendra qu’elle doit ajouter tous les paramêtres dans un tableau.
```javascript=
/*
En ajoutant une valeur à l’attribut
de la fonction il devient optionnel
*/
const restFunction = (x, y, ...rest) => return (x + y) + rest.length
restFunction(3, 2, true, 14, `Sophia`, ) === 8
```
### Variable : spread operator
Dans le cadre d’un tableau, les trois points sont utilisés pour simplifier le principe de concaténation.
```javascript=
/*
Les valeur sont ajoutées dans le tableau
*/
let spread = [true, 14]
let myArray = [`Sophia`, ...spread]
console.log(myArray) // [`Sophia`, true, 14]
```
# Ressources
> Index des liens vers les sujets traités dans ce document :
- **ES6** : https://bit.ly/3Ak7aVb
- **Babel is a JavaScript compiler** : https://bit.ly/
- **NPM Build amazing things** : https://bit.ly/3mrmGcV
- **Littéraux de gabarits** : https://mzl.la/3FgG7NR
- **Constante Javascript** : https://mzl.la/3mlEFRU
- **Fonctions fléchées** : https://mzl.la/2Yi6jqn
- **Rest Parameter** : https://mzl.la/3BcKibo
- **Spread Operator** : https://mzl.la/3uDREC1
Sign in with Wallet
Connect another wallet