Why ES6?

ECMA SCRIPT

ECMAScript is a  scripting-language specification standardized by Ecma International. It was based on JavaScript, which now tracks ECMAScript. Coders commonly use ECMAScript for client-side scripting on the World Wide Web, and it is increasingly being used for writing server applications and services using Node.js.

 

Implementation of ES:
JavaScript, SpiderMonkey, V8, ActionScript, JScript, QtScript, InScript

 

Compability table:

http://kangax.github.io/compat-table/es6/

 

Let

The let statement declares a block scope local variable, optionally initializing it to a value. 

 

Hoisting doesn't work with let

function foo() {
    if(true) {
        let x = 'yahoo';
        var y = 'yes yes yes'
    }

    console.log(y); // yes yes yes
    console.log(x); // reference error   
}

foo();


x = 11;
var x; // with let it doesnt work
console.log(x);


(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

CONST

Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can't be redeclared.
const obj = {
    a: 'aaaa'
}

obj.a = 'bbbb'; // ok

const PI = 3.14;
PI = 16; // TypeError: Assignment to constant variable.

const AGES = [1,2,3];
AGES.push(4); // ok, you can call method

Arrow

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

var fn = () => console.log('hello arrow');
fn();

var fn2 = () => 'hello'; // return 'hello'
console.log(fn2());

var square = a => a * a;
console.log(square(4)); // 16

setTimeout( () => console.log('tick'), 1000);

DEFAULT PARAMS

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.
function foo(param1, param2 = 10) {
    console.log(param1 + param2);
}

foo(1); // 11
foo(1, 2); // 3


function sum(param1, param2 = param1) {
    console.log(param1 + param2);
}

REST PARAMETERS

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.
function fn(...params) {
    params.forEach(param => console.log(param));
}

fn(1, 'hoho', {}, 15);

function fn2(param, param2, ...params) {
    params.forEach(param => console.log(param));
}

function sum(pow, ...params) {
    let result = 0;
    params.forEach(arg => {
        result += 
            Math.pow(new Number(arg), new Number(pow))
    });
    return result;
}


console.log(sum(2, 2, 3));

Spread OPERATOR

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables  (for destructuring assignment) are expected.
let numbers = [1, 2, 3, 4, 5];

console.log( Math.max(numbers)); // NaN
console.log( Math.max(...numbers)); // 5
console.log(...numbers); // 1 2 3 4 5

let numbers = [2, 3];
console.log(sum(2, ...numbers));

For-in vs FOr-oF

The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set, String, TypedArray, arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
var data = {
    fn: function () {

    },
    field: ''
}

for (var f in data) {
    console.log(f);
}


(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

TEMPLATE STRINGS

Template strings are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
let obj = {
    fn() {
        return 'regards';
    }
}
let someNumber = 2;
let name = 'Kamil';
let someMultilineString = `
    Hello ${name},
    this is message for your. Number square is ${someNumber * someNumber}

    ${obj.fn()}
`

console.log(someMultilineString);

Destructuring assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.
let numbers = [1, 2];
let [a, b, c] = numbers;
let [d, ...e] = numbers;
let [f, h, g = 'default'] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined
console.log(d); // 1
console.log(e); // table [2]
console.log(g); // default

 //swap numbers
let s1 = 5;
let s2 = 10;

[s2,s1] = [s1,s2];
console.log(s2);

let obj = {
    name: 'Heniek',
    age: 27
};

let {age, name} = obj;
console.log(name)

Classes

Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not
The bodies of class declarations and class expressions are executed in strict mode.
class Dog extends Animal {
    constructor(kind, dlugoscOgona = 10) {
        super(kind);
        this.dlugoscOgona = dlugoscOgona;
    }
    set dlugoscOgona(value) {
        this.dlugoscOgona = value;
        console.log('Nowa dlugosc ogona!?');

    }
    sayName() {
        super.sayName();
        console.log("Howl! Mam ogon:" + 
            this.dlugoscOgona);
    }
}
let dog = new Dog('dog');
class AccountUtil {
    static formatAccount(acc) {
        return "PL" + acc;
    }
    makeFoo() {
        console.log('foo');
        return this;
    }
    makeBar() {
        console.log('bar');
    }
}
var Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

let r = new Rectangle(1,2);

SUMMARY

All information comes from:

https://developer.mozilla.org/

THE END

ES6 introduction

By Kamil Lolo

ES6 introduction

  • 581