Stop using var for declaring variables !!!

Rishabh Singh ⚡ - Mar 5 '21 - - Dev Community

Stop using var for declaring variables

If you are new to JS or been with it for quite some time then for the most part you probably be using var to declare your variables which is fine but it's not the most efficient & preferred way of declaring variables.

But why? And what should I use instead of var?

Let's find out!

Function Scope vs Block Scope

Block Scope

Most of the programming languages nowadays support a concept known as Block Scope, which means if a variable is declared within a block of let's say a for loop then that variable will not be accessible, outside that for loop.

If the variable of the same name is created outside the for loop then it will be treated as a different variable in the programming language which supports block scope.

Let's understand this through some pseudo-code:

function() {
    //This variable belongs to function scope
    name = "I am a string!"
    for {
        print(name)
    }
}
Enter fullscreen mode Exit fullscreen mode

Here we have a function with a for loop inside and a variable named name.

We are trying to read the variable in the for loop which is a child of the function.

When we run this command, we get this output:

I am a string!
Enter fullscreen mode Exit fullscreen mode

This indicates that we can successfully read variables present in the Function Scope.

Function scope is limited to the function itself. We cannot access the name variable from outside the function.

Let's try this one more time, but this time we will try to access the variable in the function from for loop.

function() {
    for {
        //This variable belongs to block scope
        name = "I am a string!"
    }
    print(name)
}
Enter fullscreen mode Exit fullscreen mode

When we run this code, we get an error that the variable is not declared i.e. variable doesn't exist.

This indicates that we cannot access variable present in the child block but the child block can access the variables present in the parent block.

This is known as block scope where the access of the variables is limited to that specific block only. Variables present in the function block can be easily accessed by the child blocks but the opposite is not true.

Let's talk about JavaScript now!

The block scope we just saw is applied in popular programming languages like Java & C++. Developers prefer using block scope as it helps them to make their code more efficient & less prone to errors.

Fortunately, with the release of ES6, JavaScript now supports Block Scope as well.

We can create block scope in JavaScript with the help of let & const keywords while declaring variables.

What are let & const?

let & const are JS keywords like var which can be used to create variables.

This is how we declare variables using var:

var name = "I am a var variable."
Enter fullscreen mode Exit fullscreen mode

However, variables created using var will be accessible throughout the function ie they will live in the function scope.

But as we just mentioned we want our variables to only be accessible within the block, it is created in.

To achieve this, we eliminate the use of var for declaring a variable and use let & const instead for variable declaration.

let name = "Bobby"
const birthday = "16 June"
Enter fullscreen mode Exit fullscreen mode

What's the difference between let & const?

  • let - Variables created using the let keyword can be easily modified and overwritten. You can use this keyword the same way you will use var
  • const - Variable created using const cannot be changed or modified. You can use this keyword for declaring a variable that is expected to remain constant throughout the execution so that it cannot be changed or modified by any means.

Final Takeaway!

Stop using var and start using let & const for variable declarations.

Support

Thank you so much for reading! I hope you found this blog post useful.

If you like my work please consider Buying me a Coffee so that I can bring more projects, more articles for you.

https://dev-to-uploads.s3.amazonaws.com/i/5irx7eny4412etlwnc64.png

Also if you have any questions or doubts feel free to contact me on Twitter, LinkedIn & GitHub. Or you can also post a comment/discussion & I will try my best to help you :D

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player