ES6.md

ES2015

Let’s get started with Node. Node has many of the features that we will be covering today, so if you want to get up and running with ES6, Node is the way to go.

- Step 1: Download Node
    - Go to https://nodesjs.org
    - Download for Windows or Mac
- Step 2: Download NVM
    - Go to https://github.com/creationix/nvm
    - Download for Windows or Mac

You now have Node and NVM on your machine.

1. To run Node from the terminal run the command 'node'.
2. To exit Node run the command '.exit'.
3. To install the latest version of Node run the command 'nvm install stable'.
4. To use the latest stable version run 'nvm use stable'.
5. To install the LTS version run the command 'nvm install 4.4.3'.
6. To use the LTS version run the command 'nvm use 4.4.3'.

Features

const & let variable indicators

let is the new var. It allows you to reassign it’s value.

let a = 'foo';
a = 'bar';

const does not allow you to reassign its value. It does allow you to change its properties. const is not an immutable object.

const a = ['Foo', 'Bar'];
a = []; // Error
a[0] = 'Bar';
a[1] = 'Foo';

Template Strings

Allows you to use variables within strings with the ${} syntax.

// ES5
var a = 200, b = 100, c = 150;
document.body.bgColor = 'rgb(' + a + ', ' + b + ', ' + c + ')';

// ES6
const a = 200, b = 100, c = 150;
document.body.bgColor = `rgb(${a}, ${b}, ${c})`;

Allows you to write on multiple lines.

const string = 
`JavaScript is cool.
I like to learn JavaScript.
You should learn it, too.`;

Map and Set

Map allows you to create an object of differing key/value pairs. Mind…Blown!

const map = new Map([
 1: 'My first value',
'2': 'My second value',
{value: '3'} : {string: 'My third value'},
function() {} : function() { return 'My fourth value }
]);

When is this useful:

• Need keys that aren’t strings
• Key/value pairs often added and removed
• Collections need to be iterated on

map.forEach((value, key) => { 
    console.log(`${key} = ${value}`) 
});

for (let key of map.keys()) {
  console.log(key);
}

Set allows you to set unique values of any type.

const set = new Set();
set.add(1).add(1).add(2);
set.forEach(item => console.log(item)); //= 1 2

When is this useful:

• For unique values
• Need to update values
• To be iterated on

Libraries & Helper Functions

Number helper is new:

// ES5 
function isNumber(value) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

// ES6
Number.isInteger('1'); //= false
Number.isFinite('10'); //= false

function isNumber (value) {
  return typeof value === 'number' && !Number.isNaN(value);
}

isNumber('23'); //= false

You can write numbers in binary with 0b:

console.log(0b001);

Nice new shiny array functions

Array.from(document.querySelectorAll('#foo')); //= [];
Array.of(1, 2, 3, 4, 5); //= [1,2,3,4,5]

Arrow functions

Shorter syntax! Yay!

// ES5
var array = [1,2,3,4,5];
array.map(function(number) {
    console.log(number);
});

// ES6
const array = [1,2,3,4,5];
array.map(number => console.log(number));

For objects though be sure to wrap them in parens!

const object = () => ({foo: 'bar'});

Binds this to scope

import React, { Component } from 'react';

class App extends Component () {
  render() {
    return (
      <div 
        onClick={() => this.handleClick}>
          Hello, World!
      </div>
    )
  }
    
  handleClick(e) {
    const element = e.target;
    element.textContent = '';
  }
}

Destructuring

Following a new module pattern you can ‘destructure’ your imports

// React
import React, { Component } from 'React';

class App extends Component {
    render() {
        return <div>Hello World!</div>;
    }
}

export default App;

// RxJS
import { Observable } from 'Rx';
const input = Observable.fromEvent(document.body, 'mousemove'); 

Also works for arrays! How fun!?

const [x, y, z] = [1, 2, 3];
console.log(x); //= 1
console.log(y); //= 2
console.log(z); //= 3

Default

Defaults params are now supported!

const returnTen = (a = 5, b = 5) => a + b;
returnTen(); //= 10

Rest

If you don’t know the number of arguments you can you relax and use rest instead of arguments

// ES5
function sum() {
    var numbers = Array.prototype.slice.call(arguments);
    return numbers.reduce(function(acc, curr) {
        return acc + cure;
    }, 0);
}

// ES6
function sum(…numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

sum(1, 2, 3, 4, 5, 6); //= 15

Spread

Like butter on toast!

const object = {
    name: 'Adam',
    relationshipStatus: 'single'
}

const newObject = {
    relationshipStatus: 'taken',
    …object
}

function getAClue(a, b, c, d) {
    return a + b + c + d;
}

const clue1 = ['I ', 'don\'t '];
const clue2 = ['like ', 'you'];
getAClue(…clue, …clue2); //= I don't like you

Babel

Complies ES6 into ES5. That’s it!

Resources

• Babel
• MDN - Mozilla Developer Network
• Google