ES6 Plus

A brief overview of ES6 and the future of JavaScript

The Next Generation

What is ES6?

The next version of JavaScript includes:
- new features and many enhancements that make coding easier and maintainable.

But srsly, why?

Stagnation on the web is a social ill. - Brendan Eich

Okay, but why should I care?

It's not often that as a programmer you get an entirely new set of tools

What's new in ES6?

This deck is not going to try and show you everything

But we will try to show you the awesome parts:

Declaring and Scoping
Arrow Functions
Generators
Destructuring Assignment
Template Strings
Map
Set
Symbols

Declaring & Scoping

let - A New Hope Scope

//var is function scope

if ( true ) {
    var x = 3;
}
console.log(x); //3

//let is block scope
if ( true ) {
    let x =3;
}
console.log(x); //ReferenceError

//Let gives you a fresh iteration per loop

let vals =[];

for ( let x = 0; x < 4; x++ ) {
    vals.push(() => x);
}

console.log(vals.map(x => x())); // [0, 1, 2, 3]

// with var you get [4,4,4,4]

const

// const makes variables immutable
const obj = { foo : 3 }
obj = 4; //TypeError

// but it doesn't stop from changing the object values
obj.foo = 12; //fine

// you can use Oject.freeze() to do this
Object.freeze(obj);
obj.par = 10;

Arrow Functions

function bar(x) {
    console.log(x);
    return x + 1;
}

//is equivalent to:
let bar = x =>  {
    console.log(x);
    x + 1;
}

//2 parameters
let bar = ( x, y ) => x + y;

//no parameters
let bar = () => 7;

Not Just Shorter Syntax, but this

We no longer need to use the var self = this hack
Inside arrow functions, the this binding is not dynamic

// the ES5 Way

function Person() {
  // Some choose `that` instead of `self`.
  // Choose one and be consistent.
  var self = this;
  self.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `self` variable of which
    // the value is the expected object.
    self.age++;
  }, 1000);
}

var p = new Person();

// The ES6 way
function Person(){
  this.age = 0;

  setInterval(() => {
    // |this| properly refers to the person object
    this.age++;
  }, 1000);
}

var p = new Person();

Generators

functions that can be paused and resumed

//Two things distinguish genFunc from a normal function declaration:

// It starts with the “keyword” function*.
// It is paused in the middle via yield.

function* genFunc() {
        console.log('First');
        yield; // (A)
        console.log('Second'); // (B)
    }

// Calling genFunc does not execute it. 
// Instead, it returns a so-called generator 
// object that lets us control genFunc’s execution:

let genObj = genFunc();
// genFunc() is initially suspended at the beginning of its body. 
// The method genObj.next() continues the 
// execution of genFunc, until the next yield:

genObj.next() //First
{ value: undefined, done: false }

genObj.next() //Second
{ value: undefined, done: true }

Destructuring Assignment

an expression that makes it possible to extract data from arrays or objects into distinct variables.

var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

({a, b} = {a:1, b:2})
console.log(a); // 1
console.log(b); // 2

String Templates

// This is syntactic sugar for string concatenation
// Anything in a ${} is evaluated
// backticks are used to enclose a string
// New lines are retained

let name = 'Ray'
`Hi ${name}, 
Did you know that 5 * 3 = ${5*3}?`

/*
"Hi Ray,
Did you know that 5 * 3 = 15?"

Map

// Let’s create a map:

let map = new Map();
let val2 = 'val2';
let val3 = {
     key: 'value'
};
let key2 = {key: 2}

map.set(0, 'val1');
map.set('1', val2);
map.set(key2, val3);

console.log(map);
// Map {0 => 'val1', '1' => 'val2', Object {key: 2} => Object {key: 'value'}}

Maps are a store for key / value pairs. Key and value could be a primitives or object references.

Set

// Let’s create a Set:

let set = new Set();

set.add(1);
set.add('1');
set.add({ key: 'value' });

console.log(set); 
// Set {1, '1', Object {key: 'value'}}

It’s a collection for unique values. The values could be also a primitives or object references.

// Set doesn’t allow to add duplicates.

let set = new Set([1, 1, 1, 2, 5, 5, 6, 9]);

console.log(set.size); // 5!

Symbols

//Symbols can be used as property keys:

    const MY_KEY = Symbol();
    let obj = {};
    
    obj[MY_KEY] = 123;
    console.log(obj[MY_KEY]); // 123

Symbols are a new, special kind of object that can be used as a unique property name in objects.

// They are tokens that serve as unique IDs.

Symbol("foo") === Symbol("foo"); // false

The Future is Now

Be adventurous - use a transpiler
Stay current & relevant

ES6

By Joe Karlsson

ES6

An introduction to ES6

1,966

Joe Karlsson

progress. tech. cats. coffee. art. food. photog. mpls.