ES6

• Notes:
  ES6, released in 2015, added many powerful new features to the language. In these sections, you'll learn these new features, including let and const, arrow functions, classes, promises, and modules.

• Exploring the differences Between the var and let Keywords
  One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error.

• Ex:
  

var camper = "Alan";
var camper = "Johnny";
console.log(camper);

Here the console will display the string Johnny.
As you can see in the code above, the camper variable is originally declared as Alan and then overridden to be Johnny. In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite.

• A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword. If you were to replace var with let in the variable declarations of the code above, the result would be an error.
• Ex:

let camper = "Alan";
let camper = "Johnny
console.log(camper);

SyntaxError: unknown: Identifier 'camper' has already been declared: This error can be seen in the console of your browser. So unlike var, when using let, a variable with the same name can only be declared once.

• Compare Scopes of the var and let Keywords When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function. The let keyword behaves similarly, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression. For example:

var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray); will display [0, 1, 2]
console.log(i); will display 3

With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similar to the following:

var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray); will display [0, 1, 2]
console.log(i); will display 3

This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable.

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}

console.log(printNumTwo()); will display 3

As you can see, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. The let keyword does not follow this behavior:

let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo()); will display 2
console.log(i); error i is not defined

i is not defined because it was not declared in the global scope. It is only declared within the for loop statement.