Difference between var and let in JavaScript

As a JavaScript developer, we have been told multiple times that var is similar to let, and as part of ES6, we should all move to use let instead of var.

But do we really know what is the difference between them both and why should one consider using let?. Let's find out.

Here are a few of the things which differentiate var from let

1. Global Object
2. Re-declaration
3. Hoisting
4. Scoping

1. Creating global object

When using var at the top of the file, it creates a **global property object which is windows, which does not apply when using let instead.

var counter = 0;
let counter2 = 0;
console.log(window.counter); //  0
console.log(window.counter2); //  undefined

In the above example, both counter and counter2 are global objects created at the top, but when trying to access as via window.variableName let results in undefined error.

2. Re-declaration

In strict mode, let cannot be redeclared and if done it will throw an error, whereas var can be redeclared.

'use strict';
var string1= "hello";
var string1= "hi"; // "hello" will be replaced without any errors

let string2= "world"; 
let string2= "hello"; // SyntaxError: Identifier 'string2' has already been declared

3. Hoisting

Hoisting is when variables can be used even before they are declared. In the below example the variable string1is used, here it saves space for foo with the value undefined and the declaration/initialization follows later in the code. But whereas with let, this is not possible it will hit a temporal dead zone resulting in a reference error

console.log(string1); // undefined
var string1= "hello";
console.log(string1); // hello

console.log(string2); // ReferenceError
let string2= "world";
console.log(string2); // world

4. Scoping

The main difference between let and var is scoping of the variables. In the below example, Var string3 inside Level-enclosed brackets are available even outside the level when inside a function, whereas let is block-level scoped or enclosing brackets scoped.

function run() {
  var string1= "Hello1";
  let string2= "World1";

  console.log(string1, string2); // Hello1 World1
 //Level - enclosed brackets
  {
    var string3= "Hello2"
    let string4= "World2";
    console.log(string3, string4); // Hello2 World2
  }

  console.log(string3); // Hello2
  console.log(string4); // ReferenceError
}

In the above example, since let is scoped to block or enclosing brackets, when you try accessing string4 outside of the braces block it will not be available and throw an reference error.

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML
• CSS
• JavaScript
• Web Development