With Javascript’s release of ES6, two new ways of declaring variables have been introduced. These new declarations use the keywords let and const. Basically, these are more advanced declarations with the old variable declaration with var .
And to understand more about the 3 ways of declaring these variables, we need to understand two important concepts in JavaScript – Scope and Hoisting . This will give us a better understanding of why it is necessary to declare variables in these new declarations and what is the difference between declaring var , let, and const .
Scope:
In programming, the scope of a variable is where the variable can be accessed. We have function scope and block scope . Function scope means that a variable is declared inside a function and is only accessible within that function. Block scope is a piece of code enclosed in two {} signs. Any code written in {} is a block. Therefore, within the block scope, any variable declared in a block will be accessible only within that block, not anywhere else.
Hoisting:
Hoisting is a mechanism in JavaScript that helps variables and functions, when declared, are moved to the top before any code statements are executed.
1 2 3 | console.log(name); var name = 'Ky'; |
Ok, this code looks weird, right? since we are seeing the variable ‘name’ being used before it is declared. But due to hositing , it runs in the following order:
1 2 3 4 | var name; console.log(name); name = 'Ky'; |
So now we have a rough understanding of the two concepts of scope and hoisting , right, now let’s go to var , let and const :
var:
Variables declared with the var keyword have function scoped meaning that these variables can only be accessed within the function in which they are declared.
1 2 3 4 5 6 7 | function displayNameOfAnimal(){ var animal = 'lion'; console.log(animal); } console.log(animal); |
It will definitely be an error. In the code above, we see the variable ‘animal’ declared inside the displayNameOfAnimal () function. Therefore, it can only be accessed inside the displayNameOfAnimal () function, not outside it.
Additionally, variables declared using the var keyword will be hoisted .
Variables using the var keyword can also be re-declared and updated within their scope:
1 2 3 4 5 6 7 8 | // Re-declaration var name = 'ky'; var name = 'name'; //Updation var name = 'ky'; name = 'nam'; |
When using var to declare variables, if a variable is used prior to declaration, that variable will be assigned an undefined value.
let:
Variables declared with let have block scope meaning that those variables will only be accessible within the block they are declared in, not outside the block.
1 2 3 4 5 6 | let first_name = 'ky'; if( name === 'ky') { let second_name = 'nam'; } console.log(second_name); |
The above code will return the following error: ‘error: Uncaught ReferenceError: second_name is not defined’.
This is because we are trying to access the variable ‘second_name’ from outside the block it was declared in.
In addition, variables declared with let can be updated but cannot be re-declared within their scope.
1 2 3 4 5 6 7 8 | // Được cho phép let animal = 'lion'; animal = 'cat'; // Không được đâu nha : let animal = 'lion'; let animal = 'cat'; |
The re-declaration will generate the error ‘error: Uncaught ReferenceError: second_name is not defined’.
Note : Although we are not allowed to re-declare in scope . But outside of scope , we are allowed to re-declare because then the declared variable is treated as a new variable.
1 2 3 4 5 6 7 8 9 10 11 12 13 | let first_name = 'ky'; let weight = 0; if( name === 'ky') { let second_name = 'nam'; let weight = 100000; console.log(weight); } console.log(weight); Kết quả sẽ trả ra như sau : 100000 0 |
This is because the variable ‘weight’ defined inside the ‘if’ block is treated as another variable and its scope is limited to the ‘if’ block.
When using the keyword let to declare a variable, during hoisting, if a variable is used before declaration, that variable will not be assigned the value ‘undefined’ as declared with var .
1 2 3 | console.log(name); let name = 'Hoang Ky'; |
The above code will return the following error: error: Uncaught ReferenceError: Cannot access ‘season’ before initialization.
Even though the variable ‘name’ has been moved to the top of the range, it is still not assigned any value.
const:
Variables declared with const have the same block scope as let .
Variables declared with const cannot be updated or re-declared. Therefore, it is advisable to assign a value to the variable during initialization.
Example: const age = 22;
Hoisting is also played out with const . It follows the same rule as let , variable declarations are passed to the top of the scope, and they are not assigned an ‘undefined’ value.
End :
Okk that’s what I want to share with everyone in today’s post. If it feels good, like , share and most importantly, upvote so I have the motivation to write more new posts.
Many thankssssss