Les nouveautés Javascript

nouveautés-js.md

Cours 1.1 - Révision Javascript et apports des nouvelles version ECMASCRIPT

Résumé.

• ES6 (ou 2015): gros changement
• Depuis, ES7, ES8, etc. Perfectionnements

Les contextes syntaxiques

Il faut se souvenir des contextes des trois principaux délimiteurs:

• Parenthèses ()
• Curly brackets {}
• Crochets []

Parenthèses

• 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 for ou if ou try...catch, elles permettent d'identifier les conditions ou certaines structures.

{}

• Littéral d'objet. x = { a: 1, b: 3 }
• Bloc de code, boucles for, if et 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"].

ES2015. Première chose. On oublie var.

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
}

Objets

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

tableaux

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.

Les fonctions fléchées

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 + 1

On 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]

Version courte des propriétés (propreties short hand)

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.

L'opérateur spread ...

Les trois petits points sont introduits de manière à manipuler les tableaux et objets (entre autres).

Tableaux

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]

Objets

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}

La déstructuration

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 1

La 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