Differences Between let and var in JavaScript Explained

While declaring variables you might get confused between the choice of two keywords in JavaScript: let and var. They might look similar at first, but both of them are different in terms of scope and behavior. In this article, we will explore the differences between let and var keywords in JavaScript, along with many examples.

Before moving forward, let’s revise both of them first!

What is the var keyword?

When we create a variable using the var keyword in JavaScript, it makes the variable to be function-scoped, i.e. the variable can be accessed throughout the entire function in which it was declared. Earlier the var keyword was the primary way of declaring variables.

Let’s see how we can use the var keyword:

function example() {
  var x = 5;
  console.log(x);
}

Output:

5

In the example above, the variable x is declared using var within the example function. Since var is function-scoped, we can access it anywhere inside the function.

Additionally, variables declared with var can also be redeclared within the same scope. This can result in potential issues and bugs.

What is the let keyword?

When we use the let keyword to declare a variable in JavaScript, it makes the variable block-scoped, i.e. it can be accessed only within the block of code in which they are declared.

The let keyword was introduced in JavaScri[t ES6 in 2015. It can be seen as a more modern alternative to var.

Let’s see how we can use the let keyword:

function example() {
  let message = "Hello, world!";
  console.log(message); 
  if (true) {
    let message = "Goodbye, world!";
    console.log(message); 
  }
  console.log(message);
}

Output:

Hello, world!
Goodbye, world!
Hello, world!

In the above example, we declared the variable message with let within the example function. The first console.log statement within the if block will output “Goodbye, world!”, as the message is block-scoped and limited to the block in which it is declared.

Difference between let and var in JavaScript

Now that you have a basic idea about both of them, let’s discuss the key differences between let and var in JavaScript:

1) Scope

The main difference between let and var in JavaScript lies in their scope. The variables declared with var are function-scoped, while the let variables are block-scoped. 

This means that when we declare the variable using var, they can be accessed throughout the entire function in which they are declared, as well as any nested functions. On the other hand, we can only access the let variables within the block of code in which they are declared.

Let’s see an example to compare them.

Variables using var:

function example() {
  var x = 5;
  if (true) {
    var x = 10;
    console.log(x);
  }
  console.log(x);
}

Output:

10
10

Variables using let:

function example() {
  let y = 5;
  if (true) {
    let y = 10;
    console.log(y);
  }
  console.log(y);
}

Output:

10
5

In the first example, the var variable x is accessible both inside and outside the if block, leading to a change in its value. However, in the second example, the let variable y is block-scoped, so the value inside the if block does not affect the value outside of it.

2) Redeclaration

Another important difference lies in their behavior to redeclaration. We can redeclare a variable declared using var within the same scope which can cause unexpected results and bugs. For example:

var a = 5;
var a = 10;
console.log(a);

Output:

10

In the example above, we initially declared the var variable a with a value of 5. However, we have redeclared it with a value of 10 within the same scope, resulting in a final output of 10.

On the other hand, we can not redeclare the variable using let within the same scope. If we attempt to redeclare a let variable, we will encounter an error. For example:

let b = 5;
let b = 10; 

Output:

Error: Identifier 'b' has already been declared

In this example, when we tried to redeclare the variable b again with value 10, it showed the error that ‘b’ has already been declared.

3) Hoisting

Hoisting is a JavaScript behavior in which variable and function declarations are moved to the top of their respective scopes during the compilation phase. 

There is a difference in hoisting behavior between the variables declared using let and var. The variables declared using var are hoisted to the top of their scope, which allows us to access and use a variable before it is declared.

For example,If we try to access the variable a before it is declared, it will print undefined which is the initial value of it:

console.log(a);
var a = 5;
console.log(a);

Output:

undefined 
5

While, when we try to access the let variables, it will result in a ReferenceError as they are not hoisted. Let’s see it with another example:

console.log(b); 
let b = 5;
console.log(b); 

Output: 

ReferenceError: Cannot access 'b' before initialization
5

In this example, the let variable b is not hoisted, and trying to access it before initialization leads to a ReferenceError.

Key Differences Between var and let Keywords

Let’s now summarize the key differences:

Conclusion

In conclusion, understanding the differences between let and var is crucial for effective variable declaration in JavaScript. While var has been the traditional way of declaring variables, let provides block scope and stricter behavior, making it the preferred choice in modern JavaScript development. By utilizing let and var appropriately, we can write more robust and maintainable code. If you still have some doubts, get our programming assignment help online.