ES6 Traits-Block binding and Functions
Binding
Javascript binding is different from the concept of binding in other object-oriented languages. Javascript binding does not depend on the time or place of its declaration, it depends on how it is declared. Using different keywords while declaring the variable like var, let or const affects the hoisting of that variable.
var declaration and hoisting
When a variable is declared using javascript, the variable acts like it is declared at the top of that function not inside. So that it can be accessed from all the parts of that function. but its value will be undefined outside of its declaration scope because only variable or function declaration can be hoisted, initialization can’t be hoisted.
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,
Block-Level Declarations
Block-level declaration does not allow a variable to go on top of a function or block. It limits the availability of the functions inside its declared block. Block is generated by using function or code block ({ }). We can declare block-level variables by using let or const, which was introduced by ES6 to give more flexibility to javascript language.
‘let’ declarations
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.
‘No’ declaration
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.
‘const’ declarations
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
The function of javascript was completely different and much more complex before ES5 came to the scene. And ES6 added more features so that it can be less error-prone and more effective.
Functions with Default Parameter Values
Javascript allows us to pass as many parameters as we like regardless of the number of the parameters it was defines with. It also allows us to set a default value as parameters. And those default parameters will only be used if they are not passed at the time of function call or their passed value is undefined.
