What’s new in ECMAScript 6.0

const PI = 3.14159;
// Can't re-assign
PI = 3;
console.log(PI); // 3.14159
// Can't re-initialize
const PI = 4;
// Can't re-declare
var PI = 4;

var name = "Eyal";
var age = 43;
var user = {
'name': name,
'age': age
};
var name = "Eyal";
var age = 43;
var user = { name, age };

var [start, end] = ["earth", "moon"] // initialize
console.log(start + " => " + end); // earth => moon
[start, end] = [end, start] // swapping
console.log(start + " => " + end); // moon => earth
function equinox() { return [20, "March", 2013, 11, 02]; }
var [date, month, , ,] = equinox();
console.log( date +" "+ month); // 20 March

function history( lang = "C", year = 1972 ) {
return lang + " was created around the year " + year;
}

// defining rest parameters with 3 dot syntax
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log( item );
});
}
// 1 fixed + 3 variable parameters
var planets = [];
push(planets, "Mercury", "Venus", "Earth");

// Spread operator "...weblink"
function createURL (comment, path, protocol, subdomain, domain, tld)
{
// ...
}
var weblink = ["ht/w/abc.html", "http", "info", "cern", "ch"],
comment = "World's first Website";
createURL( comment, ...weblink );
Spread
operator

var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click",
event => this.doSomething(event.type), false);
},
console.log("Handling "+type+" for " + this.id);
}
};

class Answer(){
constructor(value){ this._val = value; }
get(){ return this._val; }
}

class Person {
constructor(name, age){
public name = name;
public age = age;
}
sayName(){
alert(this.name);
}
getOlder(years){
this.age += years;
}
}
this.name = name;
this.age = age;
}
Person.prototype.sayName =
function(){
alert(this.name);
};
Person.prototype.getOlder =
function(years){
this.age += years;
};

class Person {
public name = name;
private age = age;
}
sayName(){
alert(this.name);
}
getOlder(years){
private(this).age+= years;
}
}

class Person {
private innerTitle = "";
// getter and setter for title property.
get title() { return innerTitle; }
set title(value){ innerTitle = value; }
}
}

class Answer{
}
class FirmAnswer extends Answer {
constructor(value){ super(value); }
get(){ return super() + "!!"; }
}

class Answer{
}
class FirmAnswer extends Answer {
constructor(value){ super(value); }
get(){ return super() + "!!"; }
}
// ES 5.0
function FirmAnswer(name, age){
Answer.call(this, name, age);
}
FirmAnswer.prototype = new Answer();

class Answer{
}
class FirmAnswer prototype Answer {
constructor(value){
super(value);
}
get(){
return super() + "!!";
}
}

var engines = new Set(); // create new Set
engines.add("Webkit");
engines.add("Hippo");
engines.add("Hippo"); // note that Hippo is added twice
console.log(engines.has("Hippo")); // true
console.log(engines.has("Indigo")); // false
engines.delete("Hippo"); // delete item
console.log(engines.has("Hippo")); // false

var es6 = new Map(); // create new Map
es6.set(262, "standard"); // key is number
es6.set(undefined, "nah"); // key is undefined
var hello = function () { console.log("hello"); };
es6.set(hello, "Hello ES6!"); // key is function
console.log( es6.has("edition")); // true

var key = {},
map = new WeakMap();
map.set(key, "Hello!");
// Dereference the key so the value is also removed
key = null;

Array = [ value for each ( variable in values ) condition ];

//original array
var numbers = [0,1,2,3,4,5,6,7,8,9,10];
//just copy all items into a new array
var duplicate = [i for each (i in numbers)];
//get just the even numbers
var evens = [i for each (i in numbers) if (i % 2 == 0)];
//multiply every value by 2
var doubled = [i*2 for each (i in numbers)];
//multiply every odd number by 3
var tripledOdds =
[ i*3 for each (i in numbers) if ( i % 2 > 0 ) ];

var Size = new StructType(
{
width: uint32,
height: uint32
});
uint8 , uint16 , uint32
int8 , int16 , int32
float32, float64

var Size = new StructType({width:uint32, height:uint32 });
var SizeArray = new ArrayType(Size, 2);
Array
Type
Array
Size

let arr = [ "blue", "green" ];
arr.notAnIndex = 123;
Array.prototype.protoProp = 456;
for (k in arr) console.log(k);
Print:
> 0
> 1
> notAnIndex
> protoProp

var colors = new Set(['rojo', 'amarillo', 'azul']);
colors.language = 'es'; // add an expando property
for (let name in colors)
alert(name); // "language" (the property name)
for (let word of colors)
alert(word); // "rojo", "amarillo", "azul" (the data)

import items from "@iter";
let obj = { first: "Jane", last: "Doe" };
for ( let [k,v] of items(obj) ) {
console.log( k + " = " + v );
}
Output:
first = Jane
last = Doe

Function* simpleGenerator(){
yield "Hello";
yield "World";
for (var i = 0; i < 2; i++)
yield i;
}
var g = simpleGenerator();
print(g.next()); // "Hello"
print(g.next()); // "World"
print(g.next()); // 0
print(g.next()); // 1

function Range(low, high){
this.low = low;
this.high = high;
}
Range.prototype.__iterator__ = function(){
for (var i = this.low; i <= this.high; i++)
yield i;
};
var range = new Range(3, 5);
for (var i in range)
print(i); // 3, 4, 5 in sequence

module E4D {
//export this stuff
export let myobj = {};
export function hello(){
alert("hello"); };
//keep this stuff hidden
function goodbye(){
//...
}
}
//import just myobject
import myobj from E4D;
console.log(myobj);
//import everything
import * from E4D;
console.log(myobj);
console.log(hello);
//explicitly named imports
import {myobj, hello} from E4D;
console.log(myobj);
console.log(hello);
// use module directly
console.log(MyModule.hello);

module MyModule from "mymodule.js";
import myobject from MyModule;
blocking

var p = Proxy.create( {} ,{
get: function (target, name){
return 'Hello, '+ name;}
});
document.write( p.World ); // print 'Hello, World'

Operation Intercepted as
proxy[name] handler.get(proxy, name)
proxy[name] = val handler.set(proxy, name, val)
name in proxy handler.has(name)
delete proxy[name] handler.delete(name)
for (var name in proxy) {...} handler.iterate()
Object.keys(proxy) handler.keys()

getOwnPropertyDescriptor:
function(name) -> PropertyDescriptor | undefined
getPropertyDescriptor:
function(name) -> PropertyDescriptor | undefined
getOwnPropertyNames: function() -> [ string ]
getPropertyNames: function() -> [ string ]
defineProperty: function(name, propertyDescriptor) -> any
delete: function(name) -> boolean
fix: function() -> { string: PropertyDescriptor } | undefined

// Object.getOwnPropertyDescriptor(proxy, name)
// Object.getPropertyDescriptor(proxy, name) (not in ES5)
// Object.getOwnPropertyNames(proxy)
// Object.getPropertyNames(proxy) (not in ES5)
// Object.defineProperty(proxy,name,pd)
// delete proxy.name
// Object.{freeze|seal|preventExtensions}(proxy)

has: function(name) -> boolean
hasOwn: function(name) -> boolean
get: function(receiver, name) -> any
set: function(receiver, name, val) -> boolean
enumerate: function() -> [string]
keys: function() -> [string]

Proxy.createFunction( handler, callTrap, constructTrap );
// proxy() -> callTrap
// new proxy() -> constructTrap | callTrap
var fp = Proxy.createFunction({}, callTrap);
var o = { name: fp };
o.name(x); // reified as callTrap.apply(o,[x])

var name = "Eyal",
Expression
msg = `Hello, ${name}!`;
console.log(msg); // "Hello, Eyal!"

// calculation expression sample
var total = 30,
msg = `The total is ${total} (${total*1.05} with tax)`;
console.log(msg); // "The total is 30 (31.5 with tax)"

// HTML escaping sample
url = "http://e4d.com/";
message = query = "Hello & Goodbye";
color = "red";
safehtml`<a href="${url}?q=${query}" onclick= alert(${message})
style="color: ${color}"> ${message} </a>`
<a href="http://e4d.com/?q=Hello%20%26%20Goodbye"
onclick=alert('Hello x26 Goodbye') style="color: red">Hello &
Goodbye</a>
url = "javascript:alert(1337)";
color = "expression(alert(1337))";
<a href="#innocuous?q=Hello%20%26%20Goodbye"
onclick=alert('Hello x26 Goodbye') style="color: innocuous">Hello &
Goodbye</a>

http://www.2ality.com/
Kit Cambridge
A Few New Things Coming To JavaScript
HARMONY OF DREAMS COME TRUE
Harmony specification_drafts

eyalvardi.wordpress.com

What’s new in ECMAScript 6.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to What’s new in ECMAScript 6.0

Similar to What’s new in ECMAScript 6.0 (20)

More from Eyal Vardi

More from Eyal Vardi (20)

Recently uploaded

Recently uploaded (20)

What’s new in ECMAScript 6.0