Variables in JavaScript & Differences(var, let & const)
A variable is a container that stores data values in any of the programming languages. In javascript, a variable should be created by using either one of var, let, or const keywords. But for javascript variables, can hold many data types such as String, Number, Array, and Object, etc.
In other words, javascript variables are not directly combined with any particular data type and any of the variables can be assigned and re-assigned apart from the variable type const. Will be describing the reason for it later in this article. Let’s start our day of variables by understanding the basics of variables in javascript.
1. Variable Declaration
“Declaring” a variable in javascript is creating a new variable using one of the variable types. Below example shows declaring two variables with var & let keywords.
A variable with the name a, b has been declared with the variable types of var & let. No values have been assigned to a or b. If we console a & b, the output will be undefined.
2. Variable Initialization
The name of variable initialization is storing a value to a variable. Initialization can be occurred at the declaration time or after the declaration. Initialization can happen like below.
Values have been assigned (initialized) to a & b at the declaration time. Variables c & d have been declared separately and the initialization part is done after finishing the declaration.
It’s our time to discuss each of the three variable types that have provided in javascript.
3. var
Variables declared using the ‘var’ keyword, are created before no other code is executed. This process is called hoisting. To prove that we’ll be executing the below code and see the output of it.
You’ll be pretty sure that there will be a ReferenceError as a is in the next line after the console statement. But magic(hoisting) comes here and let’s see the output.
We’ll be discussing hoisting on another article as here we’re focusing on variable types. Let’s identify the hidden story of the ‘var’ keyword. Below are the features of ‘var’. In simple terms, hoisting is moving all declarations to the top of the current scope (top of the current script or the current function).
i. Declaring a ‘var’ type variable and initialize a value to it. Now the value of a is 20.
ii. Reassigning a value to a ‘var’ variable is also possible. The first output will be 20 and the second output will be 30.
iii. ‘var’ type variables can be redeclared without any issue. The variable a’s value is consoled as 1 in the first console. In the third line again declaring variable a and assign 2. The second console will output 2.
iv. The scope of a variable with the ‘var’ keyword, is its current execution context which is either the enclosing function and functions declared within it or, for variables declared outside any function which is global.
Here x is in the foo function context while y is in the bar function context. Therefore we can’t access y in foo scope as y is only accepted to bar scope.
4. let
The ‘let’ keyword was introduced with ECMAScript 2015 and it provides block-scoped variables. The ‘let’ keyword doesn’t compatible with hoisting. Variables with the ‘let’ keyword don’t move to the top of the current scope. So can’t use ‘let’ variables before the declaration.
i. Declaring a ‘let’ type variable and initialize a value to it. First, we declare (create) the variable ‘a’ and then assign(initialize) 10 to it. next, we declare and initialize ‘b’ with 10.
ii. Values can be reassigned to the ‘let’ variables. The first output will be 10 and the second output will be 20.
iii. Redeclaration of ‘let’ type depends on the execution context. In the same execution block, it avoids redeclaring ‘let’ type variables. Apart from the same block scope, we can redeclare ‘let’ type variables in different scopes.
In caption 4–3.0, it doesn’t allow to redeclare a let variable in the same scope.
Figure 4–4.0 shows redeclaration of the same variable with the type of ‘let’ but with different scopes. The first declaration of ‘a’ is in the global scope and the first console will output 10. The third line is generating a new scope as brackets are there. The fourth line redeclares variable ‘a’ in that block scope and the fifth line will output 20. But it’s accessible only in the particular block. After the block scope, the next console will log 10 since the first line was declared as global.
iv. ‘let’ variables have their scope in the block for which they are declared, as well as in any contained sub-blocks.
In function let, it creates x variable and assigns 1 to it. In the third line, there’s a block scope. The fourth line has created another x variable but it’s a different one from the second-line declared x.
5. const
The ‘const’ keyword was introduced with ECMAScript 2015 and it provides block-scoped variables. The ‘const’ keyword doesn’t compatible with hoisting. Variables with the ‘const’ keyword don’t move to the top of the current scope. So can’t use ‘const’ variables before the declaration.
i. Declaring a ‘const’ type variable and initialize a value to it. We need to initialize the ‘const’ type variable once it’s declared. Not like let or var, we can’t first declare and initialize later on.
Figure 5–2.0 describes declaration and initialization at the same time. Otherwise, it’ll generate an error as figure 5–1.0.
ii. Values can’t be reassigned to the ‘const’ variables. First-line we declare ‘a’ and initialize 10 to it. In the third line, we’re going to assign 20 to ‘a’ which will generate ‘TypeError: Assignment to constant variable’ error since no const variables can be reassigned.
iii. Redeclaration of ‘const’ type depends on the execution context. In the same execution block, it avoids redeclaring ‘const’ type variables. Apart from the same block scope, we can redeclare ‘const’ type variables in different scopes.
Figure 5–4.0 avoids redeclaring the same constant in the same scope.
Figure 5–5.0 shows redeclaration of the same variable with the type of ‘const’ but with different scopes. The first declaration of ‘x’ is in the global scope. The third line is generating a new scope as brackets are there. The fourth line redeclares variable ‘a’ in that block scope and the fifth line will output 20. But it’s accessible only in the particular block. After the block scope, the next console will log 10 since the first line was declared as global.
iv. ‘const’ variables have their scope in the block for which they are declared, as well as in any contained sub-blocks.
In function test, it creates x variable and assigns 1 to it. In the third line, there’s a block scope. The fourth line has created another x variable but it’s a different one from the second-line declared x.
SUMMARY
After the introduction of ES6 variable type ‘var’ has been replaced by ‘let’ and ‘const’, but still ‘var’ is also active.
