es6-coding-conventions

ES2015, ES2017, eslint et coding conventions

2 years after

es6-coding-conventions

ES2015, ES2017, eslint et coding conventions

ES6, c'est quoi ?

C'est une nouvelle version de javascript qui va bientôt être utilisée sur tous les navigateurs

ES6, pourquoi ?

  • Ecrire moins de code
  • Une version de javascript plus moderne

Transpiler

ES6 Katas et exercices :

links :

Exercice :

EN GROS EN ES6 :

  • on utilise const et let à la place de var
  • on utilise les Big Arrow function
  • on utilise des class pour declarer des objets
  • on utilise des raccourcis
  • on utilise des methodes pour les objets (nouvelle façon de déclarer les methodes d'un objet)
  • on utilise des noms de propriété calculé
  • on utilise des promises
  • on utilise des destructured
  • on utilise des parametres par defaut
  • on utilise des spread operators
  • on utilise des generators

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/D%C3%A9finition_de_m%C3%A9thode

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise

Les scopes et les scoped-blocks

Un scope en javascript est defini par function() { ... }.

Toutes les variables utilisée à l'intérieur de la fonction utlisent ne sont accessible qu'à l'intérieur de la fonction

Un block en javascript est défini par { ... }. Par exemple :

  • if() { ... }
  • for() { ... }
  • ()=>{ ... }
  • function(){ ... }

    En es5, les block n'ont pas de scope. Alors qu'en es6, les blocks ont un scope. Par exemple :

exemple 1

 if(true) {
  var truc = 'bar'
 }

 console.log(truc):

 if(true) {
  let truc = 'bar'
 }

  console.log(truc):
exemple 2

 if(true) {
  var truc = 'bar'
 }

 console.log(truc):

 if(true) {
  const truc = 'bar'
 }

  console.log(truc):
exemple 3
 var truc = 'foo'

 if(true) {
  var truc = 'bar'
 }
 let truc = 'foo'

 if(true) {
  let truc = 'bar'
 }

Les classes

// Your code here

class PointList {
  constructor() {
    this.list = []
  }

  add(...p) {
    return this.list = [

      ...this.list,
      ...p
    ]
  }
}

class Point {
  constructor(x = 0, y = 0) {
    this.x = x
    this.y = y
  }

  plus(p) {
    return new Point(this.x + p.x, this.y + p.y)
  }
}

console.log(new Point(1, 2).plus(new Point()))

const points = new PointList()
points.add(new Point(1, 1), new Point(1, 3), new Point(1, 4))
console.log(points.list)
// → Point{x: 3, y: 3}

Un autre exemple :

class Speaker {
  constructor(name, verb) {
    this.name = name
    this.verb = verb || 'says'
  }
  speak(text) {
    console.log(this.name + ' ' + this.verb + ' "' + text + '"')
  }

}

class Shouter extends Speaker {
  constructor(name) {
    super(name, 'shouts')
  }

  speak(text) {
    super.speak(text.toUpperCase())
  }

}

new Shouter('Dr. Loudmouth').speak('hello there')

Related Repositories

yo-yo

yo-yo

A tiny library for building modular UI components using DOM diffing and ES6 tagg ...

angular-styleguide-es6

angular-styleguide-es6

Angular Style Guide ES2015/ES6: A starting point for Angular teams to provide co ...

eslint-config-naver

eslint-config-naver

Naver JavaScript Coding Conventions rules for eslint ...

class-free-javascript-style

class-free-javascript-style

JavaScript Style Guide ...

rules_closure

rules_closure

Ivory Tower JavaScript Build System ...