- ES6 (ou 2015): gros changement
- Depuis, ES7, ES8, etc. Perfectionnements
Il faut se souvenir des contextes des trois principaux délimiteurs:
- Parenthèses ()
- Curly brackets {}
- Crochets []
- Dans la définition d'une fonction, elles servent à définir les paramètres. Ex:
function abc(p1, p2, p3) { ... }. - Pour un appel de fonction. Suivant une expression, les parenthèses servent à donner les valeurs des paramètres. Exemples:
abc(1, 2, 3);
test.x();
- Dans les expressions, elles servent à déterminer l'ordre des opérateurs.
- Dans les structures spéciales, telles que
forouifoutry...catch, elles permettent d'identifier les conditions ou certaines structures.
- Littéral d'objet.
x = { a: 1, b: 3 } - Bloc de code, boucles
for,ifet autres. - Corps de fonction.
function abc() { ... }.
- Littéral de tableaux.
x = [1, 2, 3] - Accesseur d'éléments de tableaux et d'objets.
montableau[0],monObjet["item-1"].
Var, c'est du passé. Pour savoir pourquoi, il faut lire sur le «variable hoisting». Plein de bogues. Au lieu de var, on a introduit le mot-clé
let, ou encore mieux const.
let nombre = 5;
console.log(nombre);
let nombre = 6;
console.log(nombre);
const x = "xyz";
const x = "abc"; // une erreur est générée.Attention. const peut porter à confusion. La syntaxe interdit la double affectation, mais rien n'empêche la mutation d'objets et de tableaux.
const objet = {
a: 3,
b: 4,
};
objet.a = 5; // ceci est toléré!Ensuite, ce qu'il faut comprendre, c'est que les déclarations restent sur leurs blocs respectifs.
let x = 5;
console.log(x); // 5
{
let x = 6
console.log(x); // 6
}
console.log(x); // 5
if (true) {
let x = 7;
console.log(x); // 7
}Les objets et les tableaux sont deux types grandement utilisés en programmation (pas juste en JS).
Vous connaissez déjà les objets. Par exemple:
const objet = {
a: 3,
b: 4,
};Un objet est aussi un dictionnaire, car il contient un ensemble de clés (uniques) qui pointent vers une valeur. Ainsi, les objets permettent de décrire un grand nombre de situations de la vie réelle.
Par exemples:
- Un enregistrement en base de donnée:
const utilisateur = {
id: 3378,
nom: 'Jules',
prénom: 'Fournier',
dateDeNaissance: '1995-08-23',
};- Un ensemble d'options:
const burger = {
avecFromage: true,
avecTomate: false,
avecCornichons: true,
pain: 'blé entier',
};- Un mapping d'un ensemble vers un autre:
const distancesÀPartirDeMontréal = {
Québec: 255,
Toronto: 542,
Vancouver: 4910,
};Vous avez aussi appris que les clés sont toujours des chaînes de caractère (même s'ils ne contiennent pas le délimiteur) et que n'importe quelle valeur peut être utilisée.
Ainsi, il est possible de faire ceci:
const utilisateur = {
id: 3378,
nom: 'Jules',
prénom: 'Fournier',
dateDeNaissance: '1995-08-23',
nomComplet: function () {
return this.prénom + ' ' + this.nom;
},
};Ce que nous venons de faire, c'est de définir une méthode sur notre objet. Le mot-clé this permet d'accéder n'importe quelle propriété de l'instance.
Cependant, depuis ES6, on peut faire plus simple:
const utilisateur = {
id: 3378,
nom: 'Jules',
prénom: 'Fournier',
dateDeNaissance: '1995-08-23',
nomComplet() {
return this.prénom + ' ' + this.nom;
},
};C'est plus court, mais 100% la même chose qu'avant, donc purement du sucre syntaxique.
Pour accéder aux éléments d'un objet, il existe deux syntaxes:
- la syntaxe directe:
console.log(utilisateur.nom)- la syntaxe indirecte:
console.log(utilisateur["nom"])Les deux méthodes ci-dessus sont équivalentes. La deuxième syntaxe a l'avantage de permettre n'importe quelle expression.
const x = "nom"
console.log(utilisateur[nom])
const y = "n";
const z = function () {
return "m";
}
console.log(utilisateur[y + 'o' + z()]);Autre choses à se souvenir:
- Les propriétés des objets n'ont pas d'ordre
Les tableaux (ou listes) sont aussi grandement utilisées. Généralement, on utilise les tableaux (ou listes) pour représenter un ensemble ordoné de choses, dont l'ordre est important (mais pas toujours).
Les deux méthodes ci-dessus sont équivalentes. La deuxième syntaxe a l'avantage de permettre n'importe quelle expression.
const mesMetsPréférés = ['Lasagne', 'Pâté chinois', 'Chow Mein'];
const nombresPremiers = [1, 2, 3, 5, 7];
const choixDeNumérosDeLoto = [45, 12, 30, 1, 26, 4];Pour accéder un des éléments, on utilise son indice.
console.log(mesMetsPréférés[0])
const x = 1;
console.log(nombresPremiers[x])Ce qui est agréable avec les tableaux et les objets, c'est qu'on peut les utiliser les uns imbriqués dans les autres. Il n'y a aucune limite, sauf votre imagination. Ainsi, grâce à ces types (plus ceux de bases), on peut décrire n'importe quelle structure.
Par exemple:
const utilisateur = {
id: 3378,
nom: 'Jules',
prénom: 'Fournier',
dateDeNaissance: '1995-08-23',
accès: ['admin', 'utilisateur'],
parents: [
{
prénom: 'Julie',
nom: 'Normand',
},
{
prénom: 'Jules',
nom: 'Beaulieu',
},
],
};Cette structure nous rappelle le format JSON.
L'une des fonctionnalités les plus intéressantes d'ES6 reste les fonctions fléchées (arrow function). ce sont des fonctions anonymes.
// Avant
var myFunc = function (x) {
return x + 1;
};
// Maintenant
let myFunc = (x) => x + 1On utilise souvent les fonctions fléchées comme prédicats.
const nombres = [1, 2, 3, 4, 5]
const x = nombres.map(x => x * 2)
console.log(x); // [2, 4, 6, 8, 10]
const y = nombres.filter(x => x % 2 === 0)
console.log(y); // [2, 4]Imaginez que vous avez le code suivant:
let nom = 'Julie';
let age = 42;
let personne = {
nom: nom,
age: age,
};Ce code est 100% équivalent à:
let nom = 'Julie';
let age = 42;
let personne = {
nom,
age,
};En fait, dans cette version, l'interpréteur cherche une variable qui a le même nom que la propriété. Évidemment, si la variable n'existe pas, cela produit une erreur.
Les trois petits points sont introduits de manière à manipuler les tableaux et objets (entre autres).
Pour les tableaux, l'opérateur veut dire: inclure tous les éléments du tableau.
Exemple:
let tab = [1, 2, 3];
let tab1 = [...tab, 4]; // [1, 2, 3, 4]
let tab2 = [0, ...tab]; // [0, 1, 2, 3]Pour les objets, l'opérateur veut dire: inclure toutes les propriétés de l'objet. Cela sert à fusionner des objets.
let objA = { a: 1, b: 2 };
let objB = { c: 3, b: 4 };
console.log({ ...objA, ...objB });
// affichera {a: 1, b: 4, c: 3}On peut utiliser le {} (pour les objets) et les crochets [] (pour les tableaux) afin de spécifier seulement ce qu'on veut. C'est ce qu'on appelle la déstructuration.
let tab = [1, 2, 3];
let [premier] = tab; // premier === 1
let objA = { a: 1, b: 2 };
let { a } = objA; // la variable a contient la valeur 1La déstructuration peut s'utiliser dans les paramètres de fonction, ce qui est très pratique!
function abc({ a, b, c}) {
return a + b * c;
}
abc({ a: 1, b: 2, c: 3}) // retourne 7