Intro to ES6

es6.md

Introduction to ES6

Try ES6 online:

• JS Bin
• JSFiddle
• REPL on Babel

Getting ES6 to work in your browser

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script type="text/babel" src="index.js"></script>

What is a transpiler?

A transpiler will take source code written in ES6 and compile it to ES5. Typically, a source map is also provided.

Why do we need a transpiler?

ECMAScript 2015 (aka ES6) is not fully supported in browsers (yet).

Which features are available in NodeJS?

See documentation for NodeJS

Features in ES6

1. let and const in ES6

Let's take a look an an example using var:

var name = 'Jesstern'

function hello (value) {
	if (value) {
  	var name = 'Irvin'
    return name
  }
  return name 
}

console.log( hello(true) )
console.log( hello(false) )

Now let's look at an example using let:

let name = 'Jesstern'

function hello (value) {
	if (value) {
  	let name = 'Irvin'
    return name
  }
  return name 
}

console.log( hello(true) )
console.log( hello(false) )

Notice that in the Babel REPL the inner-scoped name is rewritten as _name. Now change let to var and see what happens.

Things to note:

• var is function-scoped, whilelet and const are block-scoped
• Prefer const. You can use it for all variables whose values never change.
• Otherwise, use let – for variables whose values do change.
• Avoid var

2. Template literals

The old way:

var food = 'cookies'
var drink = 'milk'
console.log('I like to drink ' + drink + ' and eat ' + food)

The new way:

const food = 'cookies'
const drink = 'milk'
console.log(`I like to drink ${drink} and eat ${food}`)

How about multi-line strings? Yup, that's in ES6, too.

3. Arrow functions are awesome

How we used to do it in ES5:

var fruits = ['apples', 'bananas', 'cherries']
fruits.forEach(function (fruit) {
  console.log('I like to eat ' + fruit + '.')
})

The ES6 way:

const fruits = ['apples', 'bananas', 'cherries']
fruits.forEach((fruit) => {
  console.log(`I like to eat ${fruit}.`)
})

Which can be rewritten as:

const fruits = ['apples', 'bananas', 'cherries']
fruits.forEach(fruit => console.log(`I like to eat ${fruit}.`))

Using the new for...of loop, you can rewrite it as:

const fruits = ['apples', 'bananas', 'cherries']
for (const fruit of fruits) {
  console.log(`I like to eat ${fruit}.`)
}

See here for more examples of for...of in Babel REPL.

4. Spread operator

In fact, if you wanted to simply print out all the elements in an array, you can use the spread operator:

const fruits = ['apples', 'bananas', 'cherries']
console.log(...fruits)

You can also combine two arrays easily with the spread operator:

const names = ['Abel', 'Brian', 'Charlie']
const moreNames = ['Davis', 'Elon', 'Frank']
names.push(...moreNames)

5. Modules in ES6

How we used to do it (using IIFEs):

var myModule = (function () {
  var count = 0
  function myFunc () {
    return count++
  }
})()

myModule is a global variable and can be called in a separate file.

myModule.myFunc()

The ES6 way:

let count = 0
export function myFunc () {
  return count++
}

In a separate file, you can import the module as follows:

import {myFunc} from 'my_module.js'
myFunc()

6. Classes in ES6

The ES5 way:

function Person (name) {
  this.name = name
}
Person.prototype.sayName = function () {
  return 'Person\'s name is ' + this.name
}

var person = new Person('Jack')

The ES6 way:

class Person {
  constructor (name) {
    this.name = name
  }
  sayName () {
    return `Person's name is ${this.name}`
  }
}

Resources for learning more about ES6

• Exploring ES6