ES6: The Future of JavaScript

Brian Koser

Names

Crash Course

Assignment Destructuring

var numberArray = [1, 2, 3]

var a = numberArray[0]
var b = numberArray[1]
var c = numberArray[2]

console.log( a ) // 1
console.log( b ) // 2
console.log( c ) // 3

Assignment Destructuring

var [a, b, c] = [1, 2, 3]

console.log( a ) // 1
console.log( b ) // 2
console.log( c ) // 3

Assignment Destructuring

var bear = { name: 'Charlie', age: 5 }

var name = bear.name
var age  = bear.age

console.log( name ) // 'Charlie'
console.log( age )  // 5

Assignment Destructuring

var bear = { name: 'Charlie', age: 5 }

var { name, age } = bear

console.log( name ) // 'Charlie'
console.log( age )  // 5

Assignment Destructuring

var bear = { food: {likes:'berries'} }

var { food: {likes} } = bear

console.log( likes ) // 'berries'

Assignment Destructuring

function getCoordinates () {
  return { x: 10, y: 22 }
}

var {x, y} = getCoordinates()

Template Literals

var name = 'Melissa'

var letter =
  'Dear ' + name + ',\n' +
  'You\'ve won ' + (2 + 2) + 
  ' candy bars!'
  
console.log( letter )
// Dear Melissa,
// You've won 4 candy bars!

Template Literals

var name = 'Melissa'

var letter = `Dear ${name},
You've won ${2 + 2} candy bars!`
  
console.log( letter )
// Dear Melissa,
// You've won 4 candy bars!

Default Parameters

function name(first, last = 'Smith') {
  return `${first} ${last}`
}

console.log( name('John', 'Jones') )
  // 'John Jones'
console.log( name('Bob') )
  // 'Bob Smith'

Rest Parameters

function robotName(color, ...nums) {
  var total = 0

  nums.forEach( function(item) {
    total += item
  })

  return color + total
}

var robot = robotName('Green', 5, 5, 7)
console.log(robot) // 'Green17'

Spread Operator

function storeBear(name, age, weight) {
    // store in bear database
}

var bearInfo = ['Basil', 2, 275]
storeBear(
  bearInfo[0], 
  bearInfo[1], 
  bearInfo[2]
)

Spread Operator

function storeBear(name, age, weight) {
    // store in bear database
}

var bearInfo = ['Basil', 2, 275]
storeBear(...bearInfo)

Spread Operator

var letters = ['a', 'b', 'c']
var numbers = [1, 2, 3]
var all = ['?', ...letters, ...numbers]

console.log( all )
  // [ '?', 'a', 'b', 'c', 1, 2, 3 ]

Arrow Functions

var doubles = 
  [1, 2, 3].map(
    function (num) { return num * 2 }
  )

console.log( doubles ) // [2, 4, 6]

Arrow Functions

var doubles = 
  [1, 2, 3].map(num => num * 2)

console.log( doubles ) // [2, 4, 6]

Object Literals

var obj = {
  __proto__: theProtoObj,

  handler, 
    // shorthand for "handler:handler"

  toString() {
    return 'b ' + super.toString()
  },

  [ 'prop_' + getPropName() ]: 5
}

Classes

function Bear () {
  this.hungry = true
}

Bear.prototype.eat = function () {
  this.hungry = false  
}

Bear.foods = function () {
  return ['berries', 'honey']
}

Classes

class Bear {
  constructor () {
    this.hungry = true
  }
  
  eat () {
    this.hungry = false
  }

  static foods () {
    return ['berries', 'honey']
  }
}

Classes

function Panda () {
}

Panda.prototype = new Bear()

var baseEat = Panda.prototype.eat;
Panda.prototype.eat = function() {
    baseEat.call(this);
    // extra panda eating code
}

Classes

class Panda extends Bear {
  eat () {
    super.eat()
    // extra panda eating code
  }
}

Let

{
    var bird = 'duck'
    let fish = 'trout'
}

console.log( bird ) 
  // 'duck'
console.log( fish ) 
  // ReferenceError: fish is not defined

Const

const c = 'red'

// Errors
const a    // must have an initializer
c = 'blue' // c is read-only

Const

const obj = { numbers: [1,2,3] }

obj.numbers = []

console.log(obj.numbers) // []

Maps

var map = new Map()
map.set( 'food',     23 )
map.set( new Date(), 17 )

for (let [key, value] of map) {
  console.log( `${key}: ${value}` )
}
// food: 23
// Wed Dec 16 2015 11:37:19 GMT-0600 
//   (Central Standard Time): 17

Maps

var map = new Map()
map.set( 'food',     23 )
map.set( new Date(), 17 )

map.size // 2
map.has( 'food' ) // true
map.get( 'food' ) // 23
map.delete( 'food' )
map.clear()

Sets

var mySet = new Set()
mySet.add(1)
mySet.add(2)
mySet.add(3)
mySet.add(3)

console.log(...mySet) // 1 2 3

Strings

'javascript'.startsWith('java') // true

'javascript'.endsWith('t') // true

'javascript'.includes('!') // false

'mirror '.repeat(2) // 'mirror mirror '

And The Rest

• Symbols

• Iterators

• Generators

• Promises

• WeakMaps

• WeakSets

• Proxies

• Reflection

• Number

• Math

• Array

• Object

• Module

The Future is Now

• TypeScript

• Babel

• node

• Evergreen browsers

?

Nicolás Bevacqua

 Creative Commons Attribution-NonCommercial 2.5 License

ES6 In Depth