A speed run through some ES6 topics in JavaScript.

Var Declarations and Hoisting

The var is a globally-scoped variable with default value of undefined. Whenever a variable is declared before executing the code , variable mounted at the top of the code. So, the variable doesn't throw a reference-error. In JavaScript only hoists declaration not initialization. For that, if a variable initialize before declare it throws undefined. For example:

console.log(name)
// throw undefined as declaration can be hoisted not initialization
var name; //declared
name = "Alex" //initialized

If the upper example doesn’t support hoisting it throws a referenceError . For Example

console.log(name)// expected a ref error
name = "Alex"

Same methods also applied to let and const as well.

// Example with let:
naem = "Alex"; // initialization.
let name; // Throws ReferenceError: Cannot access 'name' before initialization

// Example with const:
name = "Alex"; // initialization.
const name; // Throws SyntaxError: Missing initialization in const declaration

Block Level Declaration

The new ES6 allows block-level variable after introducing let and const . Block scopes is also known as Lexical-Scopes. Block-level scopes can be created not only inside of a function but also any kind of code block, like for loop or if-else

‘let’ Declaration

let variable gives the true feelings of block-elements.

const block = () => {
 for(let i = 0; i<8; i++){
  let name = "Alex"
  console.log(naem)
   //'Alex' as it is initialize in block space
 }
console.log(name)
// throw an error
}

The name variable declared with let out-side of the for loop it throws an error. Because let is a block-scoped variable and it can be initialize only in the blocked space.

Same things also go with the const variable. For example:

const block = () => {
 for(let i = 0; i<8; i++){
  const name = "Alex"
console.log(naem)
   //'Alex' as it is initialize in block space
 }
console.log(name)
// throw an error
}

Block Binding in Loops

Block bindings allows for cleaner and more scalable code. Moreover it is the default behavior of many other programming-languages. It’s also a great addition to JS.

Many developers don't realize that for-loop declarations were one of the areas that required block-level variable declarations the most. For example:

for (var i= 0; i<5; i++){
//codes
}
console.log(i)// works fine here 

From this example we can see that the var variable works fine outside of the block element. If it is going the code will become messy and var i may be interrupt by other loop.

So, in loop block bindings is too useful. Let's take a look a block-binding example:

for (const i= 0; i<5; i++){
//codes
}
console.log(i)// throws error

This code also works with const variable. So when it comes looping block-binding is very useful.

Global Block Bindings

Another big difference between let/const and var is global-scope behavior. After declaration var creates a new global variable, which is accessible from any where of the code. For that, there always a heavy-chance to overwrite the existing var variable.

var name1 = "Alex"
console.log(name1) //"Alex"
var name2 = "Florida"
console.log(name2) //"Florida"

Emerging Best Practices for Block Bindings

When ES6 was in development , many developers thought that let will work same as var does, and so the direct replacement makes logical sense. In this case const for variables that needed modification protection.

Whatever after migrated many developers to ES6: a general role is made and it is : use const when you know that the value will never change or default, and use let when you know the the value of variables will change or need to be changed.

Functions with Default Parameter Values

In ES6, default parameter value of a function were introduced to the JavaScript language. It allows the developers to set a default value of a parameter . By adding default parameters a error can be avoid easily in case of function can't find any parameter to pass.

// without default param
function add(x, y){
console.log(x+y) // returns error saying NaN
}
add(5)
// with default param
function add(x, y = 5){
console.log(x+y) // 10
}
add(5)

The Spread Operator

will add soon

Arrow Function

Arrow function is an alternative to a traditional function but with some limitations like it can’t use everywhere , it doesn't have arguments, not suitable for call, bind or apply methods. But it is fun to use and it is best suited for non-method functions. Lets compare between regular function and arrow function:

// Traditional Function
function (a, b){
  return a + b + 10;
}

// Arrow Function
(a, b) => a + b + 10;

// Traditional Function (no arguments)
let a = 1;
let b = 2;
function (){
  return a + b + 10;
}

// Arrow Function (no arguments)
let a = 1;
let b = 2;
() => a + b + 10;