ES6 Traits-Block binding and Functions
var declaration and hoisting
In the given example, the name variable is hoisted on the top of the function getPerson( ). That’s why it is available outside of its declared scope. But its value(‘John’) will only be available inside that scope.
It works like below,
Variable declaration using let works as var, but it creates a block-level variable. So that, the variable can only be available inside its function or code block.
If we take the previous example and replace the var with let keyword then name variable will only be available inside the if statement. Outside the if statement name does not exist. Returning it from the else statement will result in ReferenceError.
If a variable is already declared using the var keyword, declaring it again with let keyword inside the same block scope, won’t replace the value of the old count. Rather it will throw an error. But if we redeclare that variable inside a different or nested scope then it will rewrite the value of that old value inside that scope. But outside that block scope, the old value will remain unchanged.
In this example, color is re-declared inside if statement so inside if statement its value will be red. As it overshadows the value orange. But outside if statement the value of color will be orange.
Declaring a variable with const also creates a block-level scope but its value is not changeable after the value is once set. It means we have to declare and initialize the function at the same time or it will lead to an error.
But once a const variable is declared and assigned its value can not be changed. It will throw a TypeError.In the example below, variable fruit is assigned with value ‘Apple’ and attempting to change its value later have thrown TypeError.
But if that variable holds a value of type object, then its value may be modified. But we can not change the value of that variable. In the example the value of the fruit variable can not be changed but as it is an object its property value could be changed/modified.
Block Binding in Loops
One of the most necessary cases where we need block-level variables is loops. Because in loops we have to take a random value to run the loop and it will be only necessary inside the loop. Take the example below, inside for loop the index variable is declared with var keyword so it is available outside that scope as well.
But we are not intended to do so. Because a program can have several loops and index variable may be declared several times. That’s why we should always use block scope variables for these cases.
Global Block Bindings
When a new variable is declared using var in the global scope, it creates a new property of the global object, or if the global object already has a property of the same name it will override that existing object. It creates confusion for most of the cases.
But if we declare variables using let or const in global scope, it creates a binding of the global object. This new variable won’t generate any new property of global function or won’t rewrite any existing property.
Emerging Best Practices for Block Bindings
When ES6 was first developed, it was thought we can replace all the var with let and use constantly when we need variable medication protection. But variable value should not be changed quite often after its initialization. This may generate bugs. That’s why a new practice gained popularity, that is to use const always while declaring a function and use let only when we will be sure that the variable value has to be changed.
Functions with Default Parameter Values