ECMAScript 6 introduces a new keyword, let. This is a very brief overview of how it differs from the var keyword.

1. let

2. let$vs$var
let:"block&scope
var:"func%on'scope

3. Scope&1
var language = 'javascript';
if (true) {
var team = 'AppCenter';
let company = 'concur';
}
console.log(language);
console.log(team);
console.log(company);

4. Scope&1&(Answer)
var language = 'javascript';
if (true) {
var team = 'AppCenter';
let company = 'concur';
}
console.log(language); // 'javascript'
console.log(team); // 'AppCenter'
console.log(company); // ReferenceError: company is not defined

5. Loop$1
for (var i=1; i<=5; i++) {
let j = i;
setTimeout(function() {
console.log(i, j);
},500);
}

6. Loop$1$(Answer)
for (var i=1; i<=5; i++) {
let j = i;
setTimeout(function() {
console.log(i, j);
},500);
}
// 6, 1
// 6, 2
// 6, 3
// 6, 4
// 6, 5

7. Loop$w/Let
for (let i=1; i<=5; i++) {
setTimeout(function() {
console.log(i);
},500);
}

8. Loop$w/Let$(Answer)
for (let i=1; i<=5; i++) {
setTimeout(function() {
console.log(i);
},500);
}
//"1
//"2
//"3
//"4
//"5

9. Mul$ple'Declara$on
let version = 'ES 5';
var library = 'Angluar'
if (true) {
let version = 'ES 6';
var library = 'React';
console.log(version);
}
console.log(version);
console.log(library);

10. Mul$ple'Declara$on'(Answer)
let version = 'ES 5';
var library = 'Angluar'
if (true) {
let version = 'ES 6';
var library = 'React';
console.log(version); // 'ES 6'
}
console.log(version); // 'ES 5'
console.log(library); // 'React'

11. To#the#Top!
if (true) {
console.log(bar);
console.log(foo);
var bar;
let foo;
}

12. To#the#Top!#(Answer)
if (true) {
console.log(bar); // undefined
console.log(foo); // ReferenceError: foo is not defined
var bar;
let foo;
}
let!is!not!hoisted.!The!area!between!the!beginning!of!the!block!
and!the!variable!declara6on!is!called!the!"temporal*dead*zone"

13. Support
• Chrome(41+
• node.js(12+((with(66harmony)
• node --harmony --use-strict
• io.js
• Babel((Transpiler)
• IE11
h"p://kangax.github.io/compat3table/es6/

14. Why?
• Principle)of)least)privilege
• avoid'collisions
• fewer'hacks'(no'IIFEs)
• no'hois7ng

15. Going&Forward
• Grab&a&transpiler&and&start&using&let&today!
• h5ps://babeljs.io/
or
• Pay%a&en)on%to%the%scope%your%variables%have%and%any%hacks%
you're%using%to%create%a%smaller%scope