Un guide de référence rapide sur la syntaxe JavaScript moderne

Souvent, des exemples de code utilisent les dernières fonctionnalités JavaScript disponibles. Parfois, ces fonctionnalités peuvent être difficiles à distinguer des fonctionnalités d'un framework. Cela arrive fréquemment avec React par exemple, qui encourage une approche très moderne de JavaScript.

Souvent, des exemples de code utilisent les dernières fonctionnalités JavaScript disponibles.

Parfois, ces fonctionnalités peuvent être difficiles à distinguer des fonctionnalités d'un framework. Cela arrive fréquemment avec React par exemple, qui encourage une approche très «moderne» de JavaScript.

Cet article vise à expliquer toutes les petites choses qui pourraient vous trébucher, surtout si vous venez d'un arrière-plan JavaScript pré-ES6, ou aussi si vous partez de zéro.

Le but est de vous faire au moins reconnaître quelles constructions sont du JavaScript normal et lesquelles font partie d'un framework. Je ne vais pas expliquer en profondeur comment ces choses fonctionnent, mais je vais plutôt vous donner quelques conseils si vous voulez en savoir plus.

Fonctions fléchées

Les fonctions fléchées ont cette syntaxe:

const myFunction = () => {
  //...
}

Un peu différent des fonctions régulières:

const myFunction = function() {
  //...
}

Le () peut héberger des paramètres, tout comme dans les fonctions normales. Parfois, les crochets sont entièrement supprimés lorsqu'il n'y a qu'une seule instruction dans la fonction, et c'est une valeur de retour implicite (aucun mot-clé de retour nécessaire):

const myFunction = i => 3 * i

En savoir plus sur les fonctions fléchées

L'opérateur de diffusion

Si tu vois

const c = [...a]

Cette instruction copie un tableau.

Vous pouvez également ajouter des éléments à un tableau, en utilisant

const c = [...a, 2, 'test']

Le...est appelé opérateur de propagation. Vous pouvez également l'utiliser sur des objets:

const newObj = { ...oldObj } //shallow clone an object

En savoir plus sur l'opérateur de propagation

Missions de déstructuration

Vous pouvez extraire justequelquespropriétés d'un objet utilisant cette syntaxe:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54 //made up
}

const { firstName: name, age } = person

Vous aurez maintenant deux valeurs constnameetage.

La syntaxe fonctionne également sur les tableaux:

const a = [1,2,3,4,5]
[first, second, , , fifth] = a

Littéraux de modèle

Si vous voyez des chaînes entourées de backticks, c'est un littéral de modèle:

const str = `test`

À l'intérieur, vous pouvez mettre des variables et exécuter du javascript, en utilisant${...}extraits:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

Et aussi, vous pouvez étendre une chaîne sur plusieurs lignes:

const string3 = `Hey
this

string
is awesome!`

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: