Learning useful new things in ES6 (1)

There are so many great new things in ES6. It’s really hard to remember. Let’s try to remember them by typing examples in your console! Have you opened your console? Ready?

1. let and const

(1) let vs var

  1. ‘let’ only exists in a block and binding to the block

{
let a = 1;
var b = 1;
}
a // ReferenceError: a is not defined
b // 1

2. There is no hoisting for let

console.log(foo); // undefined
var foo = 1;
console.log(bar); //referenceError
let bar = 1;

3. There is temporal dead zone for 'let' TDZ, that's in the block, before you declare it, you can't use it.

var tmp = 1;
if (true) {
  //TDZ start  
tmp = 'abc' // ReferenceError
typeof tmp //ReferenceError
  //TDZ end
let tmp;
tmp = 'abc'
}

4. You can’t use ‘let’ twice for the same variant.

{
let a = 10;
let a= 1;
}
// SyntaxError: Identifier 'a' has already been declared
function func(arg) {
let arg; // error
}

function func2(arg) {
{
let arg; // ok
}
}
function func3(arg){
let n = 5;
{
let n = 10;
}
console.log(n); //5
}

5. no more IIFE if we use ‘let’ in the block

// IIFE with var before
(function () {
var tmp = ...;
...
}());

// let with block
{
let tmp = ...;
...
}

(2) const

  1. You can’t change it

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

2. You must give it a value when you declare it

const foo;
// SyntaxError: Missing initializer in const declaration

3. ‘const’ has all same feature ‘let’ has. (block, no hoisting, TDZ, no twice …)

Learning notes from http://es6.ruanyifeng.com/, which is chinese but super helpful.

2. Deconstructing

(1) basic idea

  1. matching left and right side, if fails, set left to undefined.
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

2. default value: if matching fails or get undefined, return default value

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

3. array has order, but object match the key value

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

(2) usage

  1. Exchange value
let x = 1;
let y = 2;

[x, y] = [y, x];

2. return multiple values

// return an array
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();

// return a object
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();

3. passing multiple variables

// if variables has order, use array
function f([x, y, z]) { ... }
f([1, 2, 3]);

// if not use object
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4. get JSON data

let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

5. set default params to function

function ( url, {async = true, cache = true}) {
...
}

6. Iterate Map

for (let [key, value] of map) {
console.log(key + " is " + value);
}

7. loading specific module

const { SourceMapConsumer, SourceNode } = require("source-map");