ECMAScript 2015

Variables & Constantes

Avant

'use strict'

var language = 'JavaScript'

console.log(language)
// JavaScript

if (true) {

  var language = 'Go'

  console.log(language)
  // Go

}

console.log(language)
// Go

Après

'use strict'

let language = 'JavaScript'

console.log(language)
// JavaScript

if (true) {

  let language = 'Go'

  console.log(language)
  // Go

}

console.log(language)
// JavaScript

Avant

'use strict'

var language = 'JavaScript'

language = 'Go'

Après

'use strict'

const language = 'JavaScript'

language = 'Go'
// TypeError: invalid assignment to const `language'

Avant

'use strict'

for (var index = 0; index < 10; index++) {
  //...
}

console.log(index)
// 10

Après

'use strict'

for (let index = 0; index < 10; index++) {
  //...
}

console.log(index)
// ReferenceError: index is not defined

Avant

'use strict'

(function() {
  var $ = function() {
    // Le vrai jQuery ici...
  }
})()

(function() {
  var $ = function() {
    // Mon amélioration de jQuery moins nul ici...
  }
})()

Après

'use strict'

{
  const $ = function() {
    // Le vrai jQuery ici...
  }
}

{
  const $ = function() {
    // Mon amélioration de jQuery moins nul ici...
  }
}

Fonctions flêchées

Avant

'use strict'

function hello(name) {
  return 'Hello, ' + name
}

console.log(hello('you'))
// Hello, you

Après

'use strict'

const hello = (name) => {
  return 'Hello, ' + name
}

console.log(hello('you'))
// Hello, you

Après

'use strict'

const hello = name => {
  return 'Hello, ' + name
}

console.log(hello('you'))
// Hello, you

Après

'use strict'

const hello = name => 'Hello, ' + name

console.log(hello('you'))
// Hello, you

Avant

'use strict'

class Person {
  constructor(name) { this.name = name; }

  describeLater() {
    setTimeout(function() {
      console.log(`Hello, ${this.name}.`) // this.name === window.name
    }, 1000)
  }
}

const person = new Person('Amin')

person.describeLater() // Hello, undefined

Après

'use strict'

class Person {
  constructor(name) { this.name = name; }

  describeLater() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}.`) // this.name === person.name
    }, 1000)
  }
}

const person = new Person('Amin')

person.describeLater() // Hello, undefined

Paramètres par défaut

Avant

'use strict'

function sum(first, second, third) {
  if (first === undefined) {
    first = 0
  }
  if (second === undefined) {
    second = 0
  }
  if (third === undefined) {
    third = 0
  }
  return first + second + third
}

console.log(sum())
// 0

Après

'use strict'

function sum(first = 0, second = 0, third = 0) {
  return first + second + third
}

console.log(sum())
// 0

Expansion de tableau

Avant

'use strict'

const languages = [
  'javascript',
  'go',
  'awk'
]

console.log(languages[0], languages[1], languages[2])
// javascript go awk

Après

'use strict'

const languages = [
  'javascript',
  'go',
  'awk'
]

console.log(...languages)
// javascript go awk

Avant

'use strict'

function sum() {
  let sum = 0
  for (const number of arguments) {
    sum += number
  }
  return sum
}

console.log(sum(1, 2))        // 3
console.log(sum(1, 2, 3))     // 6
console.log(sum(1, 2, 3, 4))  // 10
// ...

Après

'use strict'

function sum(...numbers) {
  let sum = 0
  for (const number of numbers) {
    sum += number
  }
  return sum
}

console.log(sum(1, 2))        // 3
console.log(sum(1, 2, 3))     // 6
console.log(sum(1, 2, 3, 4))  // 10
// ...

Avant

'use strict'

const q1 = ['January', 'February', 'March']
const q2 = ['April', 'May', 'June']
const q3 = ['July', 'August', 'September']
const all = q1.concat(q2).concat(q3)

console.log(all)

/*
[ 'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September' ]
*/

Après

'use strict'

const q1 = ['January', 'February', 'March']
const q2 = ['April', 'May', 'June']
const q3 = ['July', 'August', 'September']
const all = [...q1, ...q2, ...q3]

console.log(all)

/*
[ 'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September' ]
*/

Chaînes de caractères

Avant

'use strict'

const a = 1
const b = 2
const c = 3

console.log(a + ' + ' + b + ' + ' + c + ' = ' + (a + b + c))
// 1 + 2 + 3 = 6

Après

'use strict'

const a = 1
const b = 2
const c = 3

console.log(`${a} + ${b} + ${c} = ${a + b + c}`)
// 1 + 2 + 3 = 6

Avant

'use strict'

console.log(Array(4).join('cool'))
// coolcoolcool

Après

'use strict'

console.log('cool'.repeat(3))
// coolcoolcool

Avant

'use strict'

var string = 'Hello, everyone!'
var startsWithHello = string.indexOf('Hello') === 0

console.log(startsWithHello) // true

Après

'use strict'

const string = 'Hello, everyone!'
const startsWithHello = string.startsWith('Hello')

console.log(startsWithHello) // true

Avant

'use strict'

var string = 'It is wednesday, my dudes'
var search = 'dudes'
var endsWithDudes = string.indexOf(search) === (string.length - search.length)

console.log(endsWithDudes) // true

Après

'use strict'

const string = 'It is wednesday, my dudes'
const endsWithDudes = string.endsWith('dudes')

console.log(endsWithDudes) // true

Nombre à base N

Avant

'use strict'

const binary = parseInt('1111', 2)
const hexadecimal = parseInt('deadbeef', 16)
const octal = parseInt('0765', 8)

console.log(binary)       // 15
console.log(hexadecimal)  // 3735928559
console.log(octal)        // 501

Après

'use strict'

const binary = 0b1111
const hexadecimal = 0xdeadbeef
const octal = 0o0765

console.log(binary)       // 15
console.log(hexadecimal)  // 3735928559
console.log(octal)        // 501

Raccourci d'objet

Avant

'use strict'

const lastname = 'NAIRI'
const firstname = 'Amin'
const age = 25

const person = {
  lastname: lastname,
  firstname: firstname,
  age: age
}

console.log(person)
// { lastname: 'NAIRI', firstname: 'Amin', age: 25 }

Après

'use strict'

const lastname = 'NAIRI'
const firstname = 'Amin'
const age = 25

const person = {
  lastname,
  firstname,
  age
}

console.log(person)
// { lastname: 'NAIRI', firstname: 'Amin', age: 25 }

Méthodes d'objet raccourci

Avant

'use strict'

const motorcycle = {
  brand: 'Triumph',
  model: 'Street Triple S 660 A2',
  toString: function() {
    return `${this.brand} - ${this.model}`
  }
}

console.log(`My motorcycle is a ${motorcycle}`)
// My motorcycle is a Triumph - Street Triple S 660 A2

Après

'use strict'

const motorcycle = {
  brand: 'Triumph',
  model: 'Street Triple S 660 A2',
  toString() {
    return `${this.brand} - ${this.model}`
  }
}

console.log(`My motorcycle is a ${motorcycle}`)
// My motorcycle is a Triumph - Street Triple S 660 A2

Déconstruction de tableau

Avant

'use strict'

const brands = [
  'Apple',
  'Microsoft',
  'Google'
]

const first   = brands[0]
const second  = brands[1]
const third   = brands[2]

console.log(first, second, third)
// Apple Microsoft Google

Après

'use strict'

const brands = [
  'Apple',
  'Microsoft',
  'Google'
]

const [ first, second, third ] = brands

console.log(first, second, third)
// Apple Microsoft Google

Avant

'use strict'

function swap(target, a, b) {
  const temp = target[a]
  target[a] = target[b]
  target[b] = temp
}

const numbers = [ 1, 2 ]
console.log(...numbers)
// 1 2

swap(numbers, 0, 1)
console.log(...numbers)
// 2 1

Après

'use strict'

function swap(target, a, b) {
  [ target[a], target[b] ] = [ target[b], target[a] ]
}

const numbers = [ 1, 2 ]
console.log(...numbers)
// 1 2

swap(numbers, 0, 1)
console.log(...numbers)
// 2 1

Avant

'use strict'

const person = [
  'NAIRI',
  'Amin'
]

function describe(person) {
  const lastname = person[0]
  const firstname = person[1]
  return `${lastname} --- ${firstname}`
}

describe(person)
// 'NAIRI --- Amin'

Après

'use strict'

const person = [
  'NAIRI',
  'Amin'
]

function describe([ lastname, firstname ]) {
  return `${lastname} --- ${firstname}`
}

describe(person)
// 'NAIRI --- Amin'

Avant

'use strict'

const numbers = [ 0, 1, 2, 3, 4, 5 ]

const first = numbers[0]
const second = numbers[1]
const third = numbers[2]
const others = [ numbers[3], numbers[4], numbers[5] ]

console.log(first)  // 0
console.log(second) // 1
console.log(third)  // 2
console.log(others) // [ 3, 4, 5 ]

Après

'use strict'

const numbers = [ 0, 1, 2, 3, 4, 5 ]

const [ first, second, third, ...others ] = numbers

console.log(first)  // 0
console.log(second) // 1
console.log(third)  // 2
console.log(others) // [ 3, 4, 5 ]

Déconstruction d'objet

Avant

'use strict'

const innerWidth  = window.innerWidth
const innerHeight = window.innerHeight

console.log(innerWidth)   // 800
console.log(innerHeight)  // 600

Après

'use strict'

const { innerWidth, innerHeight } = window

console.log(innerWidth)   // 800
console.log(innerHeight)  // 600

Avant

'use strict'

const vm = {
  vcpus: 16,
  vram: 32,
  os: 'NetBSD'
}

function describe(vm) {
  const vcpus = vm.vcpus
  const vram = vm.vram
  const os = vm.os
  return `New virtual machine detected: ${os} (${vram} Go vRAM, ${vcpus} vCPUs)`
}

console.log(describe(vm))
// New virtual machine detected: NetBSD (32 Go vRAM, 16 vCPUs)

Après

'use strict'

const vm = {
  vcpus: 16,
  vram: 32,
  os: 'NetBSD'
}

function describe({ vcpus, vram, os }) {
  return `New virtual machine detected: ${os} (${vram} Go vRAM, ${vcpus} vCPUs)`
}

console.log(describe(vm))
// New virtual machine detected: NetBSD (32 Go vRAM, 16 vCPUs)

Avant

'use strict'

const motorcycle = {
  brand: 'Triumph',
  model: 'Street Triple RS',
  cylinders: 	765,
  compressionRate: 	'12,65:1',
  gears:	6
}

const brand = motorcycle.brand
const model = motorcycle.model
const others = {
  cylinders: motorcycle.cylinders,
  compressionRate: motorcycle.compressionRate,
  gears: motorcycle.gears
}

console.log(brand) // Triumph
console.log(model) // Street Triple RS
console.log(others) // { cylinders: 765, compressionRate: '12,65:1', gears: 6 }

Après

'use strict'

const motorcycle = {
  brand: 'Triumph',
  model: 'Street Triple RS',
  cylinders: 	765,
  compressionRate: 	'12,65:1',
  gears:	6
}

const { brand, model, ...others } = motorcycle

console.log(brand) // Triumph
console.log(model) // Street Triple RS
console.log(others) // { cylinders: 765, compressionRate: '12,65:1', gears: 6 }

Avant

'use strict'

const motorcycle = {
  brand: 'Triumph',
  model: 'Street Triple RS',
  price: 11900
}

const marque = motorcycle.brand
const modèle = motorcycle.model
const prix = motorcycle.price

console.log(`La ${marque} ${modèle} est à ${prix} €.`)
// La Triumph Street Triple RS est à 11900 €.

Après

'use strict'

const motorcycle = {
  brand: 'Triumph',
  model: 'Street Triple RS',
  price: 	11900
}

const { brand: marque, model, modèle, price: prix } = motorcycle

console.log(`La ${marque} ${modèle} est à ${prix} €.`)
// La Triumph Street Triple RS est à 11900 €.

Boucles

Avant

'use strict'

const oses = [
  'windows',
  'osx',
  'linux'
]

for (var index = 0; index < oses.length; index++) {
  console.log(`${oses[index]} is supported on our plateform`)
}
// windows is supported on our plateform
// osx is supported on our plateform
// linux is supported on our plateform

Après

'use strict'

const oses = [
  'windows',
  'osx',
  'linux'
]

for (os of oses) {
  console.log(`${os} is supported on our plateform`)
}
// windows is supported on our plateform
// osx is supported on our plateform
// linux is supported on our plateform

Avant

'use strict'

var bits = {
  next: (function() {
    var bit = 1
    return function() {
      var current = bit
      bit *= 2
      return current
    }
  })()
}

for (var bit = bits.next(); bit < 10; bit = bits.next()) {
  console.log(bit) // 1 2 4 8
}

Après

'use strict'

const bits = {
  *[Symbol.iterator]() {
    let bit = 1
    while (true) {
      yield bit
      bit *= 2
    }
  }
}

for (const bit of bits) {
  if (bit > 10) break
  console.log(bit) // 1 2 4 8
}

Générateurs

Avant

'use strict'

function range(start, stop) {
  numbers = []

  for (var number = start; number < stop; number++) {
    numbers.push(number)
  }

  return numbers
}

var numbers = range(0, 5)
var length = numbers.length

for (var index = 0; index < length; index++) {
  console.log(numbers[index]) // 0 1 2 3 4
}

Après

'use strict'

function *range(start, stop) {
  for (let number = start; number < stop; number++) {
    yield number
  }
}

for (const number of range(0, 5)) {
  console.log(number) // 0 1 2 3 4
}

Avant

'use strict'

function users(callback, limit) {
  for (var index = 1; index <= limit; index++) {
    var request = new XMLHttpRequest()
    request.open('GET', 'https://jsonplaceholder.typicode.com/users/' + index)
    request.send()
    request.onload = function() {
      var user = JSON.parse(this.responseText)
      callback(user)     
    }
  }
}

users(function(user) {
  console.log(user)
}, 10)

Après

'use strict'

async function *users() {
  let index = 1

  for (;;) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${index++}`)
    if (!response.ok) break
    const user = await response.json()
    yield user
  }
}

async function main() {
  for await (const user of users()) {
    console.log(user)
  }
}

main()

Avant

Transformer une classe en tableau automatiquement

Après

'use strict'

class Garage {
  constructor(vehicles) {
    this.vehicles = vehicles
  }

  * [Symbol.iterator]() {
    for (const vehicle of this.vehicles) {
      yield vehicle
    }
  }
}

const myGarage = new Garage([
  'Triumph Street Triple S 660 A2',
  'Mazda 2',
  'Nissan X-Trail'
])

const myVehicles = [...myGarage]

console.log(myVehicles)
// [ 'Triumph Street Triple S 660 A2', 'Mazda 2', 'Nissan X-Trail' ]

Set

Avant

'use strict'

var languages = [ 'JavaScript', 'Go', 'C', 'C', 'C++', 'C' ]
var length = languages.length
var uniques = []

for (var index = 0; index < length; index++) {
  var currentLanguage = languages[index]

  if (uniques.indexOf(currentLanguage) === -1) {
    uniques.push(currentLanguage)
  }
}

console.log(uniques) // [ 'JavaScript', 'Go', 'C', 'C++' ]

Après

'use strict'

var languages = [ 'JavaScript', 'Go', 'C', 'C', 'C++', 'C' ]
var uniques = [...new Set(languages)]


console.log(uniques) // [ 'JavaScript', 'Go', 'C', 'C++' ]

Méthodes de tableau

Avant

'use strict'

var users = [
  { id: 1, email: 'aminnairi@myges.fr' },
  { id: 2, email: 'quentinhermiteau@myges.fr' },
  { id: 3, email: 'jordydumand@myges.fr' }
]

var user = users.filter(function(user) {
  return user.id === 2
})[0]

console.log(user) // { id: 2, email: 'quentinhermiteau@myges.fr' }

Après

'use strict'

const users = [
  { id: 1, email: 'aminnairi@myges.fr' },
  { id: 2, email: 'quentinhermiteau@myges.fr' },
  { id: 3, email: 'jordydumand@myges.fr' }
]

const user = users.find(({ id }) => id === 2)

console.log(user) // { id: 2, email: 'quentinhermiteau@myges.fr' }

Avant

Trouver l'index d'un élément

Après

'use strict'

const users = [
  { id: 1, email: 'aminnairi@myges.fr' },
  { id: 2, email: 'quentinhermiteau@myges.fr' },
  { id: 3, email: 'jordydumand@myges.fr' }
]

const index = users.find(({ email }) => email.includes('quentin'))

users.splice(index, 1)

console.log(users)
// [
//   { id: 1, email: 'aminnairi@myges.fr' },
//   { id: 3, email: 'jordydumand@myges.fr' }
// ]

ECMAScript 2015

By Amin Nairi