AppDividend
Latest Code Tutorials

Javascript let vs var: The Difference and Comparison

0

Javascript let, and var are both used for variable declaration. Before the ES6, JavaScript had only two types of scope:

  1. Global Scope
  2. Function Scope

Global Scope

Variables that are declared Globally (outside any function) have Global Scope.

var netflixFilm = "enola holms";

// code here can use netflixFilm

function detective() {
  // code here can also use netflixFilm
}

In this example, the variable is defined outside the function. So it is in the global scope.

You can access global variables anywhere in JavaScript programs.

Function Scope

Variables that are declared Locally which means inside a function have Function Scope.

// code here can not use netflixFilm

function detective() {
  var netflixFilm = "enola holms";
  // code here can  use netflixFilm
}

// code here can not use netflixFilm

In this example, you can see that we have defined a variable inside the function. You can only access the variable inside the function. You can not access the variable outside of the function.

Javascript let vs var

The difference between let and var is that let is block-scoped and var is function scoped. If you use the var keyword and initialize the variable inside the function then it is local scope. Otherwise, it is a global scope.

var netflixFilm

See the following syntax of let keyword in which the let variables are blocked scopes.

let netflixFilm

Creating global properties

The global var variables are inserted into a global object as properties. In the browser, the global object is window and on the server global is the global object. 

var netflixFilm = 'Enola'
console.log(window.netflixFilm)

Output

Enola

However, the let variables are not inserted into the global object.

let netflixFilm = ''
console.log(window.netflixFilm)

Output

undefined

JavaScript var vs let: Variable redeclaration

The var keyword permits us to redeclare the variable without any issues. The let keyword does not allow to redeclare the variable and if you try then you will get an error.

var netflixFilm = 'Enola'
var netflixFilm = 'Enola Holmes'
console.log(netflixFilm)

Output

Enola Holmes

You can see that we have declared a variable twice, and it is still working and gave the output.

Redeclaring the variable using a var keyword can create problems. Redeclaring a variable inside the block will also redeclare the variable outside the block.

Redeclaring a variable using the let keyword can solve this problem. Let’s check the same for the let keyword.

let netflixFilm = 'Enola'
let netflixFilm = 'Enola Holmes'
console.log(netflixFilm)

Output

/Users/krunal/Desktop/code/node-examples/es/app.js:2
let netflixFilm = 'Enola Holmes'
    ^

SyntaxError: Identifier 'netflixFilm' has already been declared

We get the SyntaxError: Identifier ‘netflixFilm’ has already been declared Error.

The Temporal dead zone

To understand the temporal dead zone, let’s see the life cycles of both var and let variables, which have two steps:

  1. creation
  2. execution

The var variables

In the creation phase, the var variable is assigned storage space and immediately initialized to undefined. 

In the execution phase, the var variable is assigned the values defined by the assignments if there are ones. If there aren’t, then undefined will be the value of the variables.

The let variables

In the creation phase, the let variables are assigned storage spaces, but they are not initialized. Referencing uninitialized variables will create the ReferenceError.

The let variable has the same execution phase as a var variable.

The let variable has temporal dead zones while the var variable doesn’t.

The temporal dead zone starts from the block until a let variable declaration is processed. That means it is where you cannot access the let variables before they are defined.

JavaScript let vs var: Hoisting.

Variables that are defined with a var keyword are hoisted to the top and can be initialized at any time.

Variables that are defined with a let keyword are hoisted to the top of the block, but not initialized. If we use let variable before it is declared, then it will result in the ReferenceError.

The variable declared with var keyword is defined throughout the JavaScript program as compared to let. Let’s understand this better using the following code.

console.log(netflixFilm)
var netflixFilm = 'Enola'
console.log(netflixFilm)

Output

undefined
Enola

Before initializing the variable, if we log that variable, we will get undefinedSee, it does not give any error. It merely gives undefined. Let’s check the same for the let keyword.

console.log(netflixFilm)
let netflixFilm = 'Enola'
console.log(netflixFilm)

Output

/Users/krunal/Desktop/code/node-examples/es/app.js:1
console.log(netflixFilm)
            ^

ReferenceError: Cannot access 'netflixFilm' before initialization
    at Object.<anonymous> (/Users/krunal/Desktop/code/node-examples/es/app.js:1:13)

And we got the ReferenceError: Cannot access the variable before initialization. That means, we can not use variables until we defined in the case of let keyword.

Conclusion

There are some advantages when we use let instead of var like we can not redeclare the let variable. The let variables are block-scoped. That is it for Javascript let vs var.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.