What are variables and their scoping in Javascript?
A variable is similar to a named box in the memory, where the programmer can store a value and later access it to read or manipulate it.
Javascript offers different methods to create variables. These methods are differentiated by the keywords that are used to declare the variable. These keywords are:
letvarconst
The primary difference in variables declared by each of these keywords is the scope of the variable. The scope of the variable determines the blocks of code in which the variable will be accessible.
A block is a piece of code written within the curly braces, i.e. {}
Each of the above-stated keywords is explained in detail below.
The let keyword
The variables declared using the let keyword are block-scoped, i.e., these variables are only accessible within all the child blocks and the block in which they are declared
Once a variable is declared using the let keyword, it can be read or updated but not declared again.
Example
The following snippet of code shows the declaration variables using the let keyword and their scopes.
The variable x is declared in the main scope, and it is accessible within the child block of the if statement.
On the other hand, the variable y is declared inside the block of the if statement. Hence its scope is limited. It is not accessible outside the block of the if statement. That is why the compiler produces an error when we try to print the value of y outside the if statement block.
let x = 5;if(x == 5) {let y = 10;console.log("Value of X inside the IF block: ", x);console.log("Value of Y inside the IF block: ", y);}console.log("Value of X outside the IF block: ", x);console.log("Value of Y outside the IF block: ", y);
The var keyword
The variables declared using the var keyword are function-scoped. These variables are accessible within the function in which declared, even if they are declared in the child block of another statement like if, for or while etc. These variables are also accessible
Once a variable is declared using the var keyword, it can be read, updated and re-declared using the same variable name.
Example
The following snippet of code shows the usage of variables declared by the var keyword.
The variable x is declared in the body of the function named func using the var keyword. Hence, it will be accessible in the entire body of the function.
The variable y is declared, and then re-declared, inside the scope of the if statement, yet it is accessible outside the block of the if statement. This is because y has been declared using the var keyword which makes it accessible throughout the function even if it is declared in the child block of the function.
function func(){var x = 5;if (x == 5){var y = 15;var y = 10;console.log("Value of X inside the IF block: ", x);console.log("Value of Y inside the IF block: ", y);}console.log("Value of X outside the IF block: ", x);console.log("Value of Y outside the IF block: ", y);}func();
The const keyword
The const keyword is used to declare constants. These are the type of variables whose values can not be changed.
The variables declared using the const keyword are block-scoped i.e. these variables are only accessible within the block in which they are declared and all the child blocks.
Unlike var and let, the variables declared with the const keyword must be initialised while declaration.
Once a variable is declared using the const keyword, it can be read but not updated or re-declared.
Example
The following snippet of code shows the usage of variables declared using the const keyword.
The variable x is declared using the const keyword, hence it is accessible within its child blocks but not changeable. Therefore, if we uncomment line 5, the compiler will produce an error.
The constant y is declared inside the if statement block, hence it is not accessible outside that block. Therefore, the compiler generates an error when we try to read its value outside the if block.
const x = 5;if(x == 5){// x = 10;const y = 10;console.log("Value of X inside the IF block: ", x);console.log("Value of Y inside the IF block: ", y);}console.log("Value of X outside the IF block: ", x);console.log("Value of Y outside the IF block: ", y);
Summary
The following table summarizes the difference between the let, var and const keywords:
Keyword | Scope | Can be changed | Re-declaration | Initialization with declaration |
let | block-scoped | yes | not allowed | not required |
var | function-scoped | yes | allowed | not required |
const | block-scoped | no | not allowed | required |
Free Resources
