ECMA Script 6

Shota Papiashvili

08/04/2015

Walla!News

Agenda

• ECMA?
• Variables and Scopes
• Arrays
• Functions
• OOP
• Export / Import
• Templates
• Loops
• Generators
• Syntactic sugar
• When?

Some of the slides are from: ECMAScript 6: what’s next for JavaScript? (August 2014) by Axel Rauschmayer

https://github.com/lukehoban/es6features

ECMA?

Ecma International is an international, private (membership-based) non-profit standards organization for information and communication systems.

They create the standarts to verious of thinks like CD-Rom, C#, Javascript, 3D File format and more...

Variables and Scopes

function swap(x, y){
   if (x !== y){
      var temp = x;
      x = y;
      y = temp;
   }
   
   console.log( temp );
   return [x, y];
};

function swap(x, y){
   if (x !== y){
      let temp = x;
      x = y;
      y = temp;
   }
   
   console.log( temp ); // ERROR
   return [x, y];
};

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope

Variables and Scopes

var funcs = [];

for (var l = 3; l; l--) {
   funcs[l] = function() {
      return l;
   }
}

for (var i = 1; i < funcs.length; i++)
   console.log(funcs[i]());

Variables and Scopes

const PI = 3.14159265359;

Arrays 

let [x, y] = [ 'a', 'b' ]; // x='a', y='b'

Multiple declarations

Functions

function adder(x, y = 5){ 
    return x+y;
}

function adder(x, y){
    y = y || 5; 
    return x+y;
}

Default values

OOP

function human(name, age){
    this.name    = name;
    this.age     = age;
}

human.prototype.sayMyName = function(){
    console.log(this.name);
}

human.prototype.sayMyAge = function(){
    console.log(this.name);
}

var s = new human('shota', 25);

class human {
    constructor(name, age){
        this.name    = name;
        this.age     = age;
    }

    sayMyName() {
        console.log(this.name);
    }

    sayMyAge() {
        console.log(this.age);
    }
}

var s = new human('shota', 25);

We now can define classes like in any other OOP language

OOP

class human {
    constructor(name, age){
        this.name    = name;
        this.age     = age;
    }

    sayMyName() {
        console.log(this.name);
    }

    sayMyAge() {
        console.log(this.age);
    }
}

var s = new human('shota', 25);

class prograqmmer extends human {
    constructor(name, age, lang) {
        super(x, y);
        this.lang = lang;
    }
    sayMyLang() {
        console.log(this.lang);
    }
}

We now can extend the class and override methods.

we also can call to the super to use the father's function

Export / Import

// func.js
export function foo(x){
    return x * x;
}
export const PI = 3.1415;
let z = 3; // not exported

// main1.js
import {foo} from 'func';
console.log(foo(2));
console.log(PI); // ERROR

// main2.js
import * from 'func';
console.log(foo(2));
console.log(PI);

// func.js
export default function (...) { ... };

// main3.js
import func from 'func';

With export and import we can inject our javascript code (like requireJS)

Templates

let name = 'Shota';
let helloStr = `My name is ${name}`;

ES6 uses ` to define template strings, ' and " still define normal strings

let name = 'Shota';
let helloStr = `My name is ${name}
i also can be multi
line text`;

Loops

let arr = ['hello', 'world'];

for (let elem of arr) {
    console.log(elem);
}

let arr = ['hello', 'world'];

for (let [i, elem] of arr.entries()) {
    console.log(i, elem);
}

Works for iterables

for-of

Generators

function* func() {
    yield 0;
    yield 1;
}

let obj = func();
console.log(obj .next()); // { value: 0, done: false }
console.log(obj .next()); // { value: 1, done: false }
console.log(obj .next()); // ( value: undefined, done: true }

Generators

Maps and Sets

let map = new Map();
let obj = {};

map.set(obj, 123);
console.log(map.get(obj)); // 123
console.log(map.has(obj)); // true
map.delete(obj);
console.log(map.has(obj)); // false

Maps

Data structure mapping from arbitrary values to arbitrary values 

Syntactic sugar

'abc'.repeat(3);            // 'abcabcabc'
'abc'.startsWith('ab');     // true
'abc'.endsWith('bc');       // true
'foobar'.contains('oo');    // true

Strings

When?

• End of 2014: specification is finished.
• March 2015: publication process starts.
• June 2015: formal publication.

For the meanwhile: babeljs.io