Introduction to ECMAScript 6

@labidiaymen

//aymen.co

A brief history

  • ECMASCRIPT 1 1987
  • ECMASCRIPT 2 1998
  • ECMASCRIPT 3 1999
  • ECMASCRIPT 4 Abandoned
  • ECMASCRIPT 5  2009
  • ECMASCRIPT 6  Work in progress

Goals for ES6

  • Complex apps
  • Libraires
  • Code Generators

Local variables

Block scoping with (let, const)



    function a() {
        let b = "foo"
    }
    // b is not defined

Default Arguments

The functions now allow pass default arguments.



    function greetings(recipient = "synbioz") {
          let message = `Hello ${recipient}!`
          console.log(message)
    }
                    

Destructuration

Destructuring of arrays and objects using syntax that mirrors array and object initialisers.


    let [a, b, c] = [1, 2, 3, 4]
    // a == 1
    // b == 2
    // c == 3
    
    let [a, b, ...c] = [1, 2, 3, 4]
    // a == 1
    // b == 2
    // c == [3, 4]

    // swap
    [a, b] = [b, a]

Strings on multiple lines

Destructuring of arrays and objects using syntax that mirrors array and object initialisers.


    var str = `Hi i'm
    
               multiple lines
                   
               string
               `;

For…of

 loop of the values

    
    let arr = [ 3, 5, 7 ];
    
    for (let i in arr) {
       console.log(i); // logs "0", "1", "2"
    }
    
    for (let i of arr) {
       console.log(i); // logs "3", "5", "7"
    }

Weak maps

The weak maps are similar to a hash where the keys are objects.

	
        var wm = new WeakMap();

	(function () {
		let o = {};
		wm.set(o, "bar");
	})();

Data structure

The ability to define data structures using binary data.

	
        var wm = new WeakMap();

	(function () {
		let o = {};
		wm.set(o, "bar");
	})();

Classes

 Class keyword, declarations

    
    class Point extends Base {
    	constructor(x,y) {
    		super();
    		this[px] = x, this[py] = y;
    		this.r = function() {
                             return Math.sqrt(x * x + y * y); 
                         }
    	}
    	get x() { return this[px]; }
    	get y() { return this[py]; }
    }

Modules

A module system that will refactor the code and import the items defined in various locations.


    module math {
    	export function sum(x, y) {
    		return x + y;
    	}
    	export var pi = 3.141593;
    }
    
    import {sum, pi} from math;
    
    console.log(sum(pi, 42));

Thanks

@labidiaymen