DEV Community

Cover image for Block Bindings in Javascript(Es6)
Iftekharul Islam
Iftekharul Islam

Posted on

Block Bindings in Javascript(Es6)

Block Bindings

Declaration of variable in javascript is different than other languages like mostly c-based languages. You have to declare a variable to use it first, but it doesn't need to declare it before in the case of javascript. ECMAScript 6 makes it easier to control the use of the variable.

Block
You have understood the theory of block in javascript.
Blocks are created when you declare a function, inside the function there created a block. Or { } inside this parenthesis there also created a block.

var Declaration

When you use var in javascript, it declares this variable globally. And you can access this variable outside of the block also.

const function = (condition) => {

    if (condition) {
        var value = "true";

        // other code

        return value;
    } else {

        // value exists here with a value of undefined

        return null;
    }

        // value exists here with a value of undefined
}
Enter fullscreen mode Exit fullscreen mode

It means the variable value still can be accessible from else part or the outside of the block.
Oh, javascript doesn't need to declare the value before using it. But in case if you declare the value before declaring the function the case is similar.

Using let instead of var

The use of let is exactly the same use as var. The work is similar but the scope of let is limited to the block you use, you can't access the variable which is declare using let from outside of the block.

const function = (condition) => {

    if (condition) {
        let value = "true";

        // other code

        return value;
    } else {

        // value doesn't exist here

        return null;
    }

        // value doesn't exist here
}
Enter fullscreen mode Exit fullscreen mode

Re declaration problem

If you declare a variable using var and let in the same block with the same name, it will cause an error, but you can use a variable with a similar name in a different block with let.

var value = 45;

// Syntax error
let value = 70;
Enter fullscreen mode Exit fullscreen mode

On the other hand, it will not cause any error though it's declared using a similar name but in a different block,

var value = 30;

// Does not cause an error
if (condition) {

    let value = 40;

    // more code
}
Enter fullscreen mode Exit fullscreen mode

const declaration

We can also declare variables in ECMAScript 6 with the const declaration syntax. Variables declared using const are considered constants, so their values cannot be changed once set. For this reason, every const variable must be given a value on the declaration, as shown in this example:

// Valid use of constant
const use = 30;

// Syntax error: missing value
const reuse;
Enter fullscreen mode Exit fullscreen mode

const variables are also bonded in blocks like let.

Practise of block-bindings
Before ECMAScript 6 comes with the concept of block bindings and the use of var, let, const it was really a problem for the developer to deal with a global variable like var. But when this update comes, all the developers accepted it cordially and it gained popularity. Developers use const by default and only use let when you know a variable's value needs to change.

The current best practice for block bindings is developers will use const by default and only use let when they know a variable's value needs to change. This ensures a basic level of immutability in code that can help prevent certain types of errors.

you can read more from here : click me

Top comments (0)