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. Some other usefull functions
9. Iterators, generator function
10. Modules
11. And more

1. Variables

let is the new var unless const

• more specific = less bugs
• no hoisting shenanigans

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.

  (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 variable scope < ES6

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

var animalId3 = null;
list.some(function(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

var who = 'John';
var msg = who + 
          " is learning \n" +
          "wait for it \n" +
          "ES6";

console.log(msg);

ES6

const who = 'John';
const msg = `${who} is learning
wait for it...
ES6`;
console.log(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());

7. Promises

I promise this is fun.

Why? Simpler handling of async code, function composition instead of callbacks

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))

8. Some 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

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))
});

Some resources

• ES6 JS support
• http://es6-features.org/
• Babel
• https://github.com/lukehoban/es6features
• Youtube series(also check other playlists)
• Official specs for fun reading

Do it yourself. Try to rewrite as much as possible to ES6

1. Simple promise example

2. Add objects to the first example

3. Complicate with moar async stuff

My take on the task

You can try this examples in any modern brower online,

or copy it too your local file and run with node ---harmony