Scope in Javascript

Any variable that you use in javascript has different availability at a different part of your code depending on which keyword you have defined it with.

Javascript limits the availability of any variable with the help of scopes.

For understanding scoping you need to understand:

• Block Scoping
• Functional Scoping
• Lexical Scoping
• Scoping with ‘var’, ‘let’ and ‘const’

Block Scope

The area that you have after for/while loop’s conditions or if/switch statement’s condition, generally define between ‘{’ and ‘}’ is called a block-scope.

Function Scope

Similar to the block-scope, the area after the function’s argument is called functional scope.

Lexical Scope

If you have defined anything outside a block scope or functional scope, it can be used inside of that block scope as it inherits all the variable that has been defined outside that scope. But if you have included defined anything inside a scoped, it can not be accessed outside the scope. In a way, it remains private to that scope.

How scoping works for var, let, and const

Scoping for let and const: ‘let’ and ‘const’ are block-scoped and functional scoped. Which means anything defined outside of ‘{’ and ‘}’, can be used inside that scope. Although anything defined inside can not be used outside.

If you are using ‘let’, you can mutate the variable that you have used outside of the scope and the change will be affected.

Contrary to that, variables defined with ‘const’ are immutable if they are string or number. You can change the key, value pair of an object, or add, remove or change data of array, but you cannot directly mutate them, for example replacing an array with an empty array.

const toDo = [‘wake up’, ‘coffee’, ‘work’ ];

toDo = [] //you can not do this. It should throw an error.

Scoping for var: ‘var’ on other hand is only functional-scoped. This means if you define a variable inside the scope of the if statement or for loop, you can use that variable outside of that scope. Since a variable defined with ‘var’ is functional scoped, so variable defined inside a function can not be used outside of that function.

Additionally

Thoughts on which one is most used in between var, let, and const & which one you should use: ‘var’, ‘let’, and ‘const’, all three are useful keywords, but as per modern frameworks ‘let’ and ‘const’ are the most used.

People usually avoid using ‘var’ since it is the only functional-scoped and not block-scoped. So, using it in a for loop or if statement will leak its value outside of the block, potentially creating error. But, ‘var’ has its own use. When you are using a transpiler like Babel, your code is converted to ES5 so that it is understandable by all browsers, you will notice that your converted code won't have ‘let’ or ‘const’, but only ‘var’.

In between ‘let’ and ‘const’, the use of it depends on the framework or function that you are writing. If you are using Framework ReactJS where most variables are not mutated or the developers avoid mutating them, you will notice major use of ‘const’. But with frameworks like Angular and Vue where the mutation is not a problem, developers majorly use ‘let’.

— ** I will write one more post to expand more on this topic ** —