var, let, const: what's the difference?

Today we are going to talk about an important subject to know as a javascript developer. Every day, you probably use var, let or/and const, but do you know the difference between them. It’s what we are going to talk about.

The var statement is less and less used nowadays, but it doesn’t mean that it’s bad to use it. In fact there are some tricky behaviors that can makes the code less predictive.

A variable declared with var can be reassigned with another value:

var myVariable = 'First value';

myVariable = 'Second value';

var notInitializedVar;

You can declare multiple variable with the same name (or label):

var redeclaredVar = 'First declaration';

var redeclaredVar = 'Second declaration';

The scope of var depends on where it’s declared.

When declared inside a function, the scope will be the entire function. Yep event if you declared it inside a if, it will be accessible outside of it:

function myDummyFunction() {
  if (true) {
    var myVariable = 'A variable declared with var';
  }

  console.log(myVariable);
}

// Will print "A variable declared with var"
myDummyFunction();

function myDummyFunction() {
  var myVariable = 'A variable declared with var';

  if (true) {
    console.log(myVariable);
  }
}

// Will print "A variable declared with var"
myDummyFunction();

When we declared a variable with var outside of a function, the variables will be a globally-scoped variable.

For example if you type in the dev tool of your browser:

var myGlobalVariable =
  'Hello, I will be accessible from the window';

// Will print "Hello, I will be accessible from the window"
console.log(window.myGlobalVariable);

Firstly, let’s define what is hoisting: it’s the behavior to put variable or function at the top of the file automatically. That’s thanks to the hoisting you can declare your function after using it:

hoistedFunction();

function hoistedFunction() {
  console.log('I can be called before my declaration');
}

The particularity with var, it’s that the variable is hoisted at the top of the file or of the function (if declared inside a function) and that it’s initialized to undefined.

// Will print "undefined"
console.log(myHoistedVar);

var myHoistedVar = 'I am a hoisted and initialized var';

function myDummyFunction() {
  // Look the variable is declared inside the if
  // and the condition is always false
  console.log(myVariable);

  if (false) {
    var myVariable = 'A variable declared with var';
  }
}

// Will print "undefined"
myDummyFunction();

In non strict mode (without use strict;), if you declared a variable with only its label and no qualifier (var, let or const), this one will be automatically assigned to var:

unqualifiedVar =
  'I will be automatically be qualified \
with var in non strict mode';

// This will be transformed into
var unqualifiedVar =
  'I will be automatically be qualified \
with var in non strict mode';

'use strict';

// You will see in your console something like
// Uncaught ReferenceError: unqualifiedVar is not defined
unqualifiedVar = 'Will throw a ReferenceError';

---

In everyday life, you probably use more let variable than var. But let’s refresh our knowledge about it:

Like var, you can reassign a variable declared with let:

let myVariable = 'First value';

myVariable = 'Second value';

Here is one of the main difference with var. A variable qualified with let will be block scoped (ie only be accessible inside the current closer parent curly bracket).

function myDummyFunction() {
  let myVariable = 'A let variable';

  if (true) {
    console.log(myVariable);
  }
}

// Will print "A let variable"
myDummyFunction();

Unlike var it will throw a ReferenceError if you try to access to a variable declared in a inner block:

function myDummyFunction() {
  if (true) {
    let myVariable = 'A let variable';
  }

  console.log(myVariable);
}

// You will see in your console something like
// Uncaught ReferenceError: myVariable is not defined
myDummyFunction();

Unlike var you cannot defined another variable with the same label (identifier). Otherwise you will see a SyntaxError in your console.

let myLetVariable = 'First value';

// You will see in your console something like
// Uncaught SyntaxError: Identifier 'myLetVariable' has
// already been declared
let myLetVariable = 'Second value';

Despite what you may see on the web let (like const) are hoisted but the difference with var is that they are not initialized to undefined. Until the variable is not initialized you will have a ReferenceError if you try to access it.

console.log(myLetVariable);

// You will see in your console something like
// Uncaught ReferenceError: myLetVariable is not defined
let myLetVariable = 'Some value';

// From here no more TDZ

This behavior is called Temporal Dead Zone.

If you are asking why is the term temporal being used? In fact it’s because it depends of when the code is executed. For example if you have the following code, it’s totally fine:

setTimeout(() => console.log(myLetVariable)), 500;

let myLetVariable = 'Some value';

// After 500 ms you will see
// "Some value" prints in the console

---

A variable declared with const has very similar properties than let. The only difference is about reassignment an initialization.

With a variable declared with const, it’s not possible to reassign this variable with another value:

const myConstVariable = 'First value';

// You will see in your console something like
// Uncaught TypeError: Assignment to constant variable
myConstVariable = 'Second value';

const person = {};

// Mutation is done here
person.firstName = 'Romain';

You have to initialized a variable qualified with const, otherwise you will have a SyntaxError.

// You will see in your console something like
// Uncaught SyntaxError: Missing initializer in const declaration
const uninitializedConst;

---

I hope things are clearer in your mind. If you have to remember something, I guess it will be than scope between var and let/const is different. var has function scope when declared inside a function and global scope when outside. let and const has block scope. let variable can be reassigned contrary to const. But watch out, a variable declared with const is not immutable. All three are hoisted but var is initialized to undefined unlike let and const that are not.

Here is a little table to resume:

border py-1 px-3 rounded-md cursor-pointer border-black hover:border-red-600 server border py-1 px-3 rounded-md cursor-pointer border-red-600 bg-red-100 client

---

You can find me on Twitter if you want to comment this post or just contact me. Feel free to buy me a coffee if you like the content and encourage me.