ES6 the basics

Rok Burgar

7.3.2017

What is ES6

ECMAScript(javascript) standard

ES6 is the next version

Lots of new goodies

How to use ES6

Client side:

• compile with Babel ~71%
• rely on new brower engines
  • Chrome, Firefox, Edge, IOS 10 ~95%

Server side:

• latest node --harmony 97%

Agenda

1. Variables
2. New function syntax
3. Parameter handling
4. Destructuring assignment
5. Template literals
6. Classes
7. Promises
8. New built in functions
9. Iteration
10. Modules
11. And more

1. Variables

let is the new var unless const

• more specific = less bugs
• no hoisting shenanigans

1. Variables

Example ES5

  var counter = 10;
  // some code here
  
  // lets use some never used variable
  for (var counter = 0; counter < 3; counter++) {
    console.log(counter);
  }
  
  // so lets use defined var at the top here
  console.log(counter); // counter = 3

  let counter = 10;
  // some code here
  
  // lets use some never used variable
  for (let counter = 0; counter < 3; counter++) {
    console.log(counter);
  }
  
  // so lets use defined var at the top here
  console.log(counter); // counter = 10

Example ES6

1. Variables

Hoisting

  counter = 10;
  console.log(counter); // 10
  
  var counter;

  var counter;  

  counter = 10;
  console.log(counter); // 10

=

Variable declarations are moved to the top of the function scope.

1. Variables

  (function() {
      // limit scope with self invoked anonymous function

      // lets use some never used variable
      for (var counter = 0; counter < 3; counter++) {
        console.log(counter);
      }
  } ());

Limit scope < ES6

  {
    function getCircumference(r) {
      return PI_HALF * r;
    }
  }
  
  // throws ReferenceError
  getCircumference(10);

1. Variables

Always use const if you don't need let

const PI_HALF = Math.PI / 2;

// some other code
// ...

PI_HALF = 5;

function getCircumference(r) {
    return PI_HALF * r;
}

console.log(getCircumference(2));

ES5 similar: Object.defineProperty

writable, configurable

Won't protect variables that are pointers, reference to objects if we change values in them (Array, Object)

2. Short function syntax

const list = [
  {
    id : 1,
    name : "Fluffy",
    species : "dog",
    sound : "wuuuuf"
  },
  {
    id : 2,
    name : "Max",
    species : "cat",
    sound : "mijaaaw"
  },
  {
    id : 3,
    name : "Viper",
    species : "dragon",
    sound : 'graaawl'
  },
  {
    id : 4,
    name : "Kitty",
    species : "cat"
    sound : "mijaaw"
  },
  {
    id : 5,
    name : "Shadow",
    species : "dragon"
    sound : "hssss"
  }
];

const animalId3 = list.filter((animal) => animal.id === 3)[0];

//const animalId3 = list.filter(animal => animal.id === 3)[0];
//const animalId3 = list.filter(animal => return animal.id === 3)[0];
/*
const animalId3 = list.filter(animal => {
  return animal.id === 3
})[0];
*/
//const animalId3 = list.filter((animal, index) => animal.id === 3)[0];

// ES5 style

const animalId3 = list.filter(function(animal) {
    return animal.id === 3; 
})[0];

ES6 style

ES5 style

2. Short function syntax

let animalId3 = null;
list.some((animal) => {
  var isAnimalId3 = animal.id === 3;
  if (isAnimalId3) {
    animalId3 = animal;
  }
  return isAnimalId3;
});

Happier functional programming

Also: tail recursion support!

const animalId3 = list.find((animal) => animal.id === 3);

ES6 find

< ES6

3. Parameter handling

Default parameters

(x = 5) => x

function(x) {
    // x = x || 5; wrong! 0 returns 5
    x = typeof x === 'undefined' ? 5: x;
    return x;
}

Rest of parameters

function numParamsExcludinyFirstTwo(x, y, ...others) {
    return others.length;
}

Spread parameters

const names1 = ['Rok', 'Jure']
const names2 = ['Janez', 'Borut', ...names1]  // .concat
const charsRok = [...'Spell it']
// ["S", "p", "e", "l", "l", " ", "i", "t"] // .split("")

4. Desctructuring assignment

Array matching

const names = ['Rok', 'Jure']
let [name1, name2] = names
console.log(name1, name2); // 'Rok', 'Jure'

// var tmp = name1; name1 = name2; name2 = tmp
[name2, name1] = [name1, name2] 
console.log(name1, name2); // 'Jure', 'Rok'

Object matching

const person = { name : 'Rok', id : 5};
// shorthand
const { name, id } = person;

// map to variables
const { name : firstName, id : personId } = person;
console.log(firstName, personId);

In functions

function stringify([name, id]) {
    return id + ' ' + name';
}

5. Template literals

< ES6

const msg = "I am learning \n" +
            "wait for it \n" +
            "ES6";

ES6

// watch out for XSS
who = '<script>alert(0);</script>';
msg = `${who} am learning
wait for it...
ES6`;
document.write(msg);

Ge full expression with String.raw

6. Classes

Why? Pretty. I wanna be like other programming languages.

Different (yet another) class declaration.

class Shape {  
  constructor (x, y) {
    this.x = x;
    this.y = y;
  }
  move (x, y) {
    this.x = x;
    this.y = y;
  }
  toString () {
    return 'x: ' + this.x + ', y: ' + this.y;
  }
}

var shape = new Shape(10, 10);
console.log(shape.toString());

6. Classes

Inheritance, super, getter

class Rectangle extends Shape {
  constructor (x, y, width, height) {
    super(x, y)
    
    this.width = width;
    this.height = height;
  }
  get area () {
    return this.width * this.height;
  }
  toString () {
    return super.toString() + 
           ', width: ' + this.width +
           ', height: ' + this.height;
  }
}

var rectangle = new Rectangle(10, 10, 5, 5);
console.log(rectangle.toString())
console.log(rectangle.area)

7. Promises

I promise this is fun.

Why? Simpler handling of async code

function getDataFromServer(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve({
            species : "Dog",
            sound : "wooof"
        }), 200);
    });
}

getDataFromServer(5)
.then((animal) => console.log(animal))
.catch((err) => console.log(err))

7. Promises

Even more fun

function getDataFromServer(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve({
            species : "Dog",
            sound : "wooof"
        }), 200);
    });
}

Promise.all([
    getDataFromServer(5),
    getDataFromServer(10)
])
.then(animal => console.log(animal) )
.catch(error => console.log(error) )

Now with features like:

• .all
• .race
• chaining

8. Other usefull functions

// ARRAY
// similar to some but returns an element
Array.find
Array.findIndex
Array.keys
Array.values
Array.from

const numbers = [1, 2, 3];
numbers.includes(2); // true
// previously
numbers.indexOf(2) !== -1

// STRING
String.repeat(int)
String.startsWith(string, index)
String.endsWith(string, index)
String.includes(string, index)

// NUMBER
Number.isNaN(number)
// previously
function isNaN(number) { return number !== number; }

Number.isFinite(number)
Number.isSafeInteger(number)

console.log(0.2 + 0.1 === 0.3) // false
console.log(Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON)

Math.trunc(float) // remove floating part

9. Iterators

var animals = ['lion', 'cat', 'dog'];
var eAnimals = arr[Symbol.iterator]();

for (let animal of eAnimals) {
  console.log(animal);
}

// step by step
console.log(eAnimals.next().value); // lion
console.log(eAnimals.next().value); // cat
console.log(eAnimals.next().value); // dog

let fibonacci = {
    [Symbol.iterator]() {
        let pre = 0, cur = 1
        return {
           next () {
               [ pre, cur ] = [ cur, pre + cur ]
               return { done: false, value: cur }
           }
        }
    }
}

for (let n of fibonacci) {
    if (n > 1000)
        break
    console.log(n)
}

Custom

iteration

From array

10. Modules

//  lib/math.js
export function multiply (x, y) { return x * y }
export const pi = Math.PI

//  app.js
import * as math from "lib/math"
console.log(math.multiply(math.pi, 2 * 10))

//  anotherApp.js
import { multiply, pi } from "lib/math"
console.log(multiply(pi, 2 * 10))

// dynamic loader
// system is default loader
System.import('lib/math').then(function(math) {
    console.log(math.multiply(math.pi, 2 * 10))
});

11. And more

• Better internationalization support
  • number format
  • currency
  • date, time
  • encoding
• generators
• other functions
• proxy object
• creating sublass of basic objects
• ...