Do you think IIT Guwahati certified course can help you in your career?
No
Introduction
Variable declaration in JavaScript is the process of creating a variable and giving it a name so that it can be used to store a value. A variable is a named container that holds a value, and can be used to store and manipulate data in a program. "var", "let", and "const" are all used in JavaScript to declare variables. However, there are many differences between let, var, and const in javascript in terms of how they behave and how they should be used.
What is var?
"var" is the oldest way to declare a variable in JavaScript. Variables declared with "var" have a function-level scope, meaning they are only accessible within the function in which they were declared. They also have "hoisting" behavior, which means they are accessible throughout the entire scope of the function, regardless of where they were declared. However, because of its function-level scope, variables declared with var can lead to unexpected behavior and are generally not recommended.
What is let?
"let" was introduced in ECMAScript 6 (also known as ES6) as an alternative to "var". Variables declared with "let" have the block-level scope, meaning they are only accessible within the block in which they were declared. They also have the concept of the temporal dead zone, which means they are not accessible before they are declared.
What is const?
"const" was also introduced in ECMAScript 6 and is used to declare variables that cannot be reassigned. This makes "const" variables useful for declaring constants, such as pi or the gravitational constant, which have a fixed value. Like "let", "const" variables have the block-level scope, and, they are not accessible before they are declared.
However, it is recommended to use "let" and "const" over "var" when declaring variables in JavaScript because they have more predictable behavior, and "const" is the most recommended for defining constant values that you don't expect to change.
In JavaScript, the process of creating a variable and giving it a name so that it can be used to store a value is known as variable declaration. In JavaScript, you can use the "var", "let", and "const" keywords to declare variables. But there are many differences between let, var, and const in javascript. Here are some examples of how to use each keyword:
The scope of variables declared with var
Javascript
Javascript
var x = 5; console.log(x); // Output: 5
if (x > 0) { var x = 10; console.log(x); // Output: 10 } console.log(x); // Output: 10
You can also try this code with Online Javascript Compiler
As you can see, in this example, the variable x declared with "var" keyword has function scope and the value inside if block can still be accessed outside.
How to redeclare and reassign variables declared with var
Javascript
Javascript
var x = 10; console.log(x); // output : 10
// redeclare the variable var x; console.log(x); // output : 10
As you can see in this example, if we redeclare the variable, it does not affect its value. Its value remains the same. But if we reassign the value, the variable is storing the reassigned value.
Due to hoisting, it does not matter where we have declared the variables, the variable declarations move to the top of their scopes. In this example, we have printed the variable before its declaration, and it is not giving any error. It will give an undefined value until we initialize it.
How to Declare Variables with let in JavaScript
The scope of variables declared with let
Javascript
Javascript
let y = 5; console.log(y); // Output: 5
if (y > 0) { let y = 10; console.log(y); // Output: 10 } console.log(y); // Output: 5
You can also try this code with Online Javascript Compiler
In this example, the variable y declared with "let" keyword has block-level scope, so the value inside if block is not accessible outside. By looking at the code you can see that there are many differences between let, var, and const in javascript.
How to redeclare and reassign variables declared with let
Javascript
Javascript
let myvar = 10; console.log(myvar); // output : 10
Here, we have reassigned the variable within its block, so its value is updated to the new reassigned value. But we can not redeclare the variable declared with let within the same scope, if we do so, it will give the syntax error.
The variables declared with let are not hoisted to the top of the scope. So, if we try to access a variable before declaring it, it will surely give us a Reference Error. In this example, you can see that printing the variable before its declaration is giving us an error.
How to Declare Variables with const in JavaScript
The scope of variables declared with let
Javascript
Javascript
const pi = 3.14; console.log(pi); // Output: 3.14
pi = 3.14159; // TypeError: Assignment to constant variable.
You can also try this code with Online Javascript Compiler
As you can see, in this example, the variable pi declared with the "const" keyword is a constant variable that can't be reassigned. It will throw an error if we try to do so.
How to redeclare and reassign variables declared with const
Javascript
Javascript
const myvar = "first value"; console.log(myvar); // first value
We cannot change the value of a const variable. Once we assign it some value, it cannot be changed throughout the program execution. In this example, reassigning a variable leads to a Type Error, and if we try to redeclare it, it will give us a Syntax Error because of its block scope.
How to hoist variables declared with const
Javascript
Javascript
console.log(exp); // ReferenceError const exp = "not bad"; console.log(exp); // output : not bad
You can also try this code with Online Javascript Compiler
The variables declared with const are not hoisted to the top of the scope. This example shows that accessing the variable before its declaration results in a Reference Error. We can say that variables declared with const are not hoisted and must be assigned some value at the time of declaration.
Differences between var, let, and const
Here is a comparison table between "var", "let" and "const" in JavaScript:
Feature
var
let
const
Scope
Var has function-level scope, which makes the variables declared with var accessible throughout the function they are declared in.
Let has block-level scope, which makes the variables declared with let inaccessible to the entire function they are declared in.
Similar to let, const has a block-level scope as well.
Reassignable
Variables declared with var can be reassigned.
Variables declared with let can be reassigned.
Variables declared with const cannot be reassigned.
Hoisting
Variables declared with var are hoisted, which means they can be accessed before they are declared.
Variables declared with let are not hoisted.
Variables declared with const are not hoisted.
Temporal Dead Zone
Variables declared with var don't have a temporal dead zone, making them accessible before declaration.
Variables declared with var have a temporal dead zone, making them inaccessible before declaration.
Similar to let, const has a temporal dead zone as well.
Frequently Asked Questions
When should I use "var", "let", and "const"?
It is generally recommended to use "let" and "const" over "var" when declaring variables in JavaScript because they have more predictable behavior. Use "const" for constant variables that you don't expect to change, and use "let" for variables that you expect to change. "var" is not recommended to use because of its function-level scope and hoisting behavior.
Can I reassign a variable declared with "const"?
No, you cannot reassign a variable declared with "const". If you try to reassign a variable declared with "const", you will get a TypeError.
What is the temporal dead zone?
The temporal dead zone (TDZ) is a behavior that occurs when we try to access a variable declared with "let" or "const" before it is declared. It throws a ReferenceError.
Conclusion
We hope you enjoyed reading this article. We discussed the difference between let and var and const keywords in Javascript. Further, we discussed the brief about var, let, const, and implementation of var, let, const, and Comparision Table between var, let, const.
If you wish to learn more about Javascript, you can refer to blogs on