Skip to content
Find me on GitHub Find on Twitter

Difference Between var and let in JavaScript

One of the features that ES6 (ECMAScript 2015) introduced was let and const which raised some confusion between var and let. If we could already declare variables with var why do we need let? What’s the difference between them? Today we will discover that!

The legendary battle: let vs var

1) Scope

Variables declared with var are said to be function scoped. They are only known inside the body of the function where they were declared:

function test() {
  var something = 'Banana man';
  console.log(something);
}

test(); // "Banana man"
console.log(something); // ReferenceError
// Because we are outside of the variable's scope

Another example would be:

for (var i = 0; i < 3; ++i) {
  //some sick code
}
console.log(i); // 3

Variables declared with let are said to be block scoped. They are only known inside of the block they were declared in:

for (let i = 0; i < 3; ++i) {
  //another sick code
}
console.log(i); // ReferenceError

A block is code between the curly brackets {}

2) Hoisting

But what if…

console.log(something); // undefined
var something = 'Banana boy';

We wouldn’t expect such result because it doesn’t make sense, how the hell would it recognize the variable something if it was not declared yet?

The answer to this is hoisting.

Hoisting in Javascript is a dense topic that I will write about in separate article, for now, I will briefly summarize it.

Hoisting is a Javascript engine behavior that recognizes variables and functions before they’re initialized.

You can picture it as moving all the declarations to the top of the code, but that’s not what happens, your code does not move, it is just a way for you to understand it more easily!

In the example above, we notice that the variable something was initialized with the value undefined before reaching the initialization (with the value “Banana boy”), that’s exactly what hoisting does.

It is “equivalent” to:

var something; // declaration "moved" to the top
console.log(something); // undefined
something = 'Banana boy';

Now when it comes to variables declared with let we do not encounter such result:

console.log(something); // ReferenceError
let something = 'banana';

We cannot access or use variables declared with let before initialization.

Does that mean that they are not hoisted?

No. They are indeed hoisted, in a different way. I will explain how that is the case in detail in a separate article to keep it simple.

All in all

3) Global object property

When a variable is defined globally with var, it becomes a property of the window object:

var x = 'Banana girl';
console.log(window.x); // "Banana girl"

That is not the case with global variables defined with let though:

let y = 'boi';
console.log(window.y); // undefined

4) Redefining

You can redefine the same variable with var.

But when you try to do that with let, it raises SyntaxError:

var x = 30;
var x = 300; // Valid
let boo = 'cacao';
let boo = 'never mind'; // Uncaught SyntaxError

Why was “let” introduced?

Thank you for reading!

That was the main difference between var and let, I hope you learned a thing or two!

Follow my blog and my Twitter for more!

Have a nice one!