New syntax of ES6

Here are a few notes on https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md. You’ll get much more information reading the source than this probably. This is mostly a personal summary.

Let

let allows to describe scope based variables

Scoped function

function declaration are limited in scope to the block where they are defined

Spread operator

spread operator expand an array as individual values :

f(…[1,2,3]); expand to f(1,2,3)

Default arguments

function f(x=1,y=2) { return x+y; }
f(undefined,3); returns 4

Destructuring

With array :

var [x,y,z] = [1,2,3,4]
var [y,x] = [x,y]
var [,y,z] = [1,2,3,4]
var [x,…y] = [1,2,3,4]

With objects :

var {x,y,z} = {x:1,y:2,z:3}
var {x:a,y:b,z:c} = {x:1,y:2,z:3}
var {x:o.a,y:o.b,z:o.c} = {x:1,y:2,z:3}
var {x:a[0],y:a[1],z:a[2]} = {x:1,y:2,z:3}
var {x=10,y=11,z=12} = {x:1}

Nested :

var [a,{x,y}] = [1,{x:1,y:2}]

Destructuring as function arguments

function f({x,y}) {}
f({x:1,y:2})

Concise methods

var o = {
x() {},
y() {}
}

Take care that this can’t work (not because of obvious recursion problem ) but just because x is not defined inside function scope :

var o = {
x() { x(); }
}

Getter and Setter

var o = {
get id() { return __id; },
set id(id) { __id = id; }
}
console.log(o.id);

Computed properties name

var o = {
[prefix+”_var”] : 1,
[prefix+”_func”() {}
}

Object.setPrototypeOf

Object.setPrototypeOf(obj,proto)

Template literal

`my name is ${name}`
`my name is ${f(name)}`

Arrow functions

Arrow functions are great for short inline function but as the function grows it less and less readable.

var f1 = () => 1
var f2 = x => x
var f2 = (x,y) => { return x+y; }

This is kept as pointing to the original object like a bind(this) would, so they are quite practical as callbacks.

var o = {
listen: function() {
btn.addEventListener(() => { this.hello() })
},
hello:function() {
console.log(“hello”);
}
}

But be careful if you chain arrow function notation as this will be the upper original object.

For…of loop

for(var v of [“a”,”b”,”c”]) { console.log(v); } // will print “a”,”b”,”c”

for…of also works with iterators, strings, destructured objects

Regex

Regex match start can be manually positioned on string with lastIndex, so you don’t have to split a string in piece to test a regex against a long text. It works with the sticky flag y

Flags can be queried on a regex

var r = /test/gi
console.log(r.flags); // will print “gi”.

The order of the flags is always “gimuy”

Octal is explicit in strict mode

0o52 = 42

Unicode

Unicode now works in regex, in strings, in variables. String.codePointAt is the equivalent of String.charCodeAt on unicode characters. Position in string will be correctly handled.

Symbols

Symbols are meant to be used for constants. They are like the :label syntax of Ruby if you know that.

var CONSTANT = Symbol(“APP.CONSTANT”)

The text inside Symbol is just for the description of the symbol. It’s possible to recall a constant from another place in code with :

var CONSTANT = Symbol.for(“APP.CONSTANT”)