Learning-ES6

let and const

let - how it is different from var

• Defines variables scoped at the block level
• Global let variables are not properties on the global object. They live in the scope of an invisible block that notionally encloses all JS code.
• Loops of the form for (let x...) create a fresh binding for x in each iteration.
• Redeclaring a variable with let is a SyntaxError.
• Trying to use a let variable before its declaration is reached results in an error

if (true) {
  let foo = "bar";
}
foo; // will give an error because it is out of scope

Fiddle

let in more details

The const declaration

• can't declare it without giving it a value

const pi = 3.14159265359;
pi = 420; // SyntaxError

Fiddle

Arrow function a.k.a Fat Arrow Function =>

let add = function(x, y) { return x + y; };

let add = (x, y) => x + y;

Arrow function in more details

Transpilers

Babel npm install babel -g

babel source.js --out-file output.js

Adding source maps

babel source.js --out-file output.js --source-maps

Transpiling a directory

babel libfolder --out-dir buildfolder

Concatenate folder or mulitple files

babel libfolder --out-file concat.js

Used withing grunt, gulp, or webpack

References

ES6 In Depth

ES6 Features

Tools

Compilers

• Babel
• Traceur
• TypeScript

Play with ES6

Traceur Transcoding Demo

ES6 Fiddle