Bonjour, 

J'aimerai bien lister parmi les membres via des liens CodePen ou des infos écrites quand quelle cas vous avez utilisé les caractéristique de ES6 suivantes. 

Si parmi vous il y a des utilisateur avancé qui peuvent me donné des cas d'utilisation c'est sympa. 

Les caractéristiques de ES6 sont : 

• Support des constants

• Block Scope

• Arrow Function ( fonction fleché )

• Extended Parameter Handling 

• Template Literals 

• Extended Literals

• Enhanced Object Properties

• Destructuring Assignment

• Modules

• Classes

• Iterators

• Generator

• Collections

• New built-in méthodes for various classes 

• Promises

-
Edité par Tortue_Ninja 1 octobre 2021 à 11:51:18

Salut,

Mon usage personnel :

• Support des constants : J'utilises les constantes const dans 90% de mes déclarations, que ce soit pour une valeur quelconque, une fonction, une classe ou n'importe qu'elle autre objet. Dans peut-être 7% des autres cas, j'ai besoin d'une déclaration let et ces cas correspondent généralement à des déclaration dans des boucles. Dans disons 2.9% des cas, j'utilise globalThis (qui correspond à un proxy de window sur un navigateur, ou un proxy de global sur node). Enfin, dans de très très rare cas, j'ai besoin d'une déclaration var, le plus souvent pour des boucles ayant une action asynchrone et dont j'ai besoin de conserver la valeur de la variable au moment réel de l'exécution de la partie asynchrone.
  Exemple :
  

  const = '90% du temps : Quand la valeur ne changera jamais dans la scope actuelle (ça inclus TOUT les objets)';
  let = 'Dans peut-être 7% des cas. En général pour des variables numérique qui vont subir une incrémentation.';
  globalThis.test = 'Quand j'ai besoin d'une porté globale.';
  var = 'Quasiment jamais.';

• Block Scope : Toute le temps.

  // Exemple :
  const i = 0;
  !() => {
     const i = 1;
     console.log(i);
  }();
  console.log(i);
  
  // Renvoi :
  // 1
  // 0

• Arrow Function ( fonction fleché ) : Disons une fois sur deux, quand je n'ai pas d'impératif de contexte à respecter (ce qui exclu une bonne part des fonctions utiliser comme gestionnaire d'événement.) Ta un exemple juste au dessus où la fonction fléché sert à créer une nouvelle scope.
  
  
• Extended Parameter Handling : Régulièrement, le spread est plutôt utile dans les fonctions. Voir l'exemple juste en dessous pour les littéraux de gabarits.
  
  
• Template Literals : Dans tout mes projets. Particulièrement utile de déclarer un template html par exemple qui permet de convertir une string en un ensemble de DOMElement avec leurs enfants (html`<div>Test</div>` par exemple).

  const parser = new DOMParser();
  const html = (str, ...args) => [...parser.parseFromString(str.slice(1).reduce((a, c, i) => a += args[i] + c, str[0]);, 'text/html').body.childNodes];
  const test = 'test';
  console.log(html`<div>${test}</div>`);

• Extended Literals : Ça m'arrive. En vérité, c'est plutôt cool, mais j'y pense pas souvent.

  (a, b, c) => {
     return {a: a, b: b, c: c};
  };
  
  // équivalent à :
  
  (a, b, c) => {
     return {a, b, c};
  };

• Enhanced Object Properties : je suis pas sûr que ce soit ce à quoi je pense. En tout cas, si c'est de ça qu'il est question, je n'y pense jamais :

  const test = 'test1';
  const obj = {
      [test]: 'TEST1',
      test2: 'TEST2'
  };
  console.log(obj);
  
  // Renvoi :
  // {test1: 'TEST1', test2: 'TEST2'}

• Destructuring Assignment : C'est toujours de l'opérateur spread mais en dehors des arguments des fonctions ? Donc oui.
  
  
• Modules : Oui tout le temps pour bien organiser le code. https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules
  
  
• Classes : Oui souvent pour plus facilement lisible et compréhensible que les classes version es5. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
  
  
• Iterators : Je regroupe avec "Generator".
  
  
• Generator : C'est rarement utile de créer ses propres itérateur et générateur. En général tu tire partie de ceux déjà existant comme par exemple les array (en tout genre) pour les itérateurs. Pour les générateurs, j'ai souvenir d'en avoir déjà vu un dans le code natif de chrome (parce qu'il été nécessaire d'utiliser la fonction next()), mais je ne me souvient plus pour quel cas. En vrai, c'est rarement utile. Si tu veux en savoir plus : https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators
  
  
• Collections : Je vois pas trop de quoi il est question si ce n'est des array ou des object...
  
  
• New built-in méthodes for various classes : Idem, on a déjà parler des classes es6 précédemment... Les méthodes en question doivent être des truc comme constructor ou toString.
  
  
• Promises : Ben pour beaucoup de chose, c'est méga utile si tu à besoin de travailler en asynchrone. Un exemple simple c'est l'api fetch : Asynchrone et renvoi des promesses qu'on peut attendre avec await ou then : https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch