JAVASCRIPT

Var vs Let vs Const

In JavaScript, there are three ways to declare variables: var, let, and const. Each of these keywords has its own rules and uses, and it is important to understand the differences between them in order to write effective and maintainable code.

var

The "var" keyword is used to declare variables in JavaScript. However, the "var" keyword has some limitations and has been largely replaced by the "let" and "const" keywords in modern JavaScript.

Tip : Variables declared with var are in the function scope.

app/page.tsx

1function f1()
2{
3    var a=10;
4}
5console.log(a)

Function scope

When we define a variable inside a function, we can only access the variable inside the function.

app/page.tsx

1function test(){
2 var a = 10;
3 console.log("Value of 'a' inside funuction", a);
4}
5test();
6try{
7    console.log("Triyng  to access 'a' defined in function ")
8    console.log(a); 
9}catch(e){
10    console.log(e.message); 
11}

let

"let" variables are block-scoped, which means that they are only accessible within the block of code in which they are declared. This makes them more predictable and easier to reason about than "var" variables.

Tip : Variables declared with let are in the block scope.

app/page.tsx

1if (x > 10) {
2  let y = 20;
3  console.log(y); // 20
4}
5console.log(y); // ReferenceError: y is not defined
6

Block Scope

When we define a variable inside a block, we can only access the variable inside that block. We can achieve this with let and const.

app/page.tsx

1function test() {
2    {
3      let a = 10;
4      const b = 5;
5    }
6    
7    try{
8      console.log("We will get error when we try to access a  b")
9      console.log(a, b);// error will be thrown here 
10    } catch(e) {
11      console.log(e.message);
12    }
13}
14test();

const

The "const" keyword is used to declare variables that cannot be reassigned later."const" variables are also block-scoped and behave similarly to "let" variables in that respect. However, the main difference is that "const" variables must be initialized with a value when they are declared and cannot be reassigned later.

Tip : Variables declared with var are in the function scope.

For example:

app/page.tsx

1const PI = 3.14;
2PI = 3.14159; // TypeError: Assignment to constant variable.
3

Difference between let and var

The variables that are declared using let are only available to the block where they are defined
The variables that are declared using var are available throughout the function that they are declared.

app/page.tsx

1function varScoping() {
2  var x = 1;
3
4  if (true) {
5    var x = 2;
6    console.log(x); // will print 2
7  }
8
9  console.log(x); // will print 2
10}
11
12function letScoping() {
13  let x = 1;
14
15  if (true) {
16    let x = 2;
17    console.log(x); // will print 2
18  }
19
20  console.log(x); // will print 1
21}
22

Conclusion

In summary, "var" is an old way of declaring variables that is function-scoped and can be reassigned. "let" is a newer way of declaring variables that is block-scoped and can be reassigned. "const" is a newer way of declaring variables that is block-scoped and cannot be reassigned. In modern JavaScript, it is generally recommended to use "let" and "const" instead of "var," as they provide better scoping and make it easier to write maintainable code.

Prev Next