What is scope of a variable ?
Scope determines where the variable is available within the program and its lifetime
In the above code snippet, I have defined two functions. displayGreeting function has a variable declared, message. We have assigned a value to message variable and then logs it to the console. displayAnotherGreeting is the second function we have defined. It does not declare a variable and instead it tries to access the variable defined in first function and tries to log it to the console. We finally invoke both the functions. You can see Hello World is logged into the console from the first function, but the second function throws an error. The reason for this is, our second function does not have access to the variable message as it is not available during the execution of second function. So we can understand scope of the variable message is limited only to displayGreeting function in this context.
In javaScript, you may have come across different methods of declaring variables. We use var, let or const to declare variables. I do not use var keyword anymore to declare variables and I will explain in this article why you should not use var to declare variables.
Before ES6 or ECMAScript 2015, the only way you would declare a variable is using var keyword
Why is not it a good practice to declare variables using var ?
We have defined a function called calculateTax in the above code snippet. You can see on the first line of the function, we have defined a variable with var (i.e var price = 100). Let’s forget other calculations in the above code snippet. I want you to pay attention to if block. You can see I have defined a variable with the same name inside if condition. var price = 200;. Now we have two variables with the same name, but in two different scopes. When I log the product price inside if block scope, it will be 200. This is the expected outcome, but if we move out of if block and logs product price it will still be 200, but in outer scope the product price should be 100. The reason for this is a variable defined with var keyword has a function scope and it is not limited to a particular block. Therefore if you define a variable with the same name in a block it will override the values assigned in outer scope. This behaviour can lead to bugs and you need to make sure that you do not define the same variable inside a function with var keyword.
Use let or const to the rescue
Es6 has introduced two additional keywords to overcome this issue. You may have come across let or const keywords quite often if you work with javaScript. Let’s not describe the differences between let and const in this post, but in a nutshell variables defined with const keyword cannot be reassigned whereas let keyword allows reassignment to the same variable.
I have rewritten the same code using let keyword. But the same behaviour is applicable to const as well.
When the variable, price is defined using let keyword it has a block scope. A block is denoted by a { }. In the above example even though we redefine price inside if condition, its scope is limited to the particular if condition. Once we exit if condition, we no longer have access to price defined inside if block. Our block scope is now scope of the function calculateTax() { }. This is the reason why you see Price of product 100, when you exit if condition.
Conclusion
Let and const keywords are supported by almost of all the browsers in the world. Therefore you can avoid defining variables using var keyword and use let and const in your programs. Block level scope is always preferred compared to function scope.