ES6 Coolness

Outcomes from HTML5DevConf

Relationship between Javascript and Ecmascript

Hoisting

var myVar = "Foo";

(function(){

  console.log( myVar );  // Logs 'Foo'

})();

var myVar = "Foo";

(function(){

  console.log( myVar );  // Logs 'undefined'

  var myVar = "Bar";

})();

Variable declarations are hoisted, but not variable initializations

Good practice:

function foo() {

  var x, y;

  // ...

  x = "Shop";
  y = "ify";

  return x + y;

}

An example

var es = [];

for (var i = 0; i < 10; i++) {

  es[i] = function () {
    console.log("Upcoming edition of ECMAScript is ES" + i);
  };

}

es[6](); // Upcoming edition of ECMAScript is ES10

♬ Let it be

var es = [];

for (var i = 0; i < 10; i++) {

  let c = i;
  es[i] = function () {
    console.log("Upcoming edition of ECMAScript is ES" + c);
  };

}

es[6](); // Upcoming edition of ECMAScript is ES6

In action

var a = 5;
var b = 10;

if (a === 5) {
  let a = 4; // The scope is inside the if-block
  var b = 1; // The scope is inside the function

  console.log(a);  // 4
  console.log(b);  // 1
} 

console.log(a); // 5
console.log(b); // 1

Other cool new ES6 stuff

• Const - block-level read-only variables
• Class - classical inheritance
• Default function parameters - Finally
• Collections and Sets - What they sound like
• Modules - Kind of a big deal

That is all.