What's the Difference Between var, let and const in JavaScript?

William Le

In this article, we’ll cover the differences between var, let, and const. You’ll also learn some prescriptive rules to know when to choose one over the other.

With ES2016, two new ways to define variables were introduced with let and const. Before that you could only use var to define variables. So… what’s the big idea? Why are three different ways to define variables?

Before we can understand how var and let/const differ we need to understand a computer science-y concept called scope.

Function-scope vs Block-scope

In JavaScript there’s two kinds of scope: function-scope and block-scope.

Function-scope

function myFn() {
  var foo = 'peekaboo!';
  
  console.log(foo); // 'peekaboo!'
}

console.log(foo); // ReferenceError: foo is not defined

Using var, variables are function-scoped because their visibility is limited to the function. When you try to use it outside of the function, you’ll get an error.

Block-scope

if (true) {
  var foo = 'peekaboo!';
  let bar = 'i see u';
  const baz = 'baby blue!';

  console.log(foo); // 'peekaboo!';
  console.log(bar); // 'i see u';
  console.log(baz); // 'baby blue!';
}

console.log(foo); // 'peekaboo!';
console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined

Notice the visibility of foo isn’t limited by the if-statement block. However, both bar and baz are limited in visibility to the block of code.

This concept of scope is the most prominent distinction between the old-fashioned var and modern let/const.

A block of code is the code between curly braces in JavaScript.

var

There’s other nuances between var and let/const so let’s explore a few code snippets to understand them better.

var outside of a for-loop

// for-loop
for (var i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

What do you think the output of this code is?

// 0
// 1
// 2
// 3

The variable i is accessible outside of the for-loop. This is expected since variables defined with var are only inaccessible outside of a function definition.

Redefining var

Using var you can reassign it with a new value.

function myFn() {
  var foo = 1;
  foo = 30;
  var foo = 101;

  console.log(foo);  
}

myFn();

What’s the output of myFn()?

// 101

let

In many ways let is like a cousin of var. It has a lot of similarities but differentiates in ways that makes ES2016 a more modern-feeling language.

let outside of a for-loop

// for-loop
for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

What do you think is the output?

// 0
// 1
// 2
// ReferenceError: i is not defined

Redefining let

Using let you can reassign variables, but its syntax is more strict than var.

function myFn() {
  let foo = 1;
  foo = 30;
  // let foo = 101;    // 🙅‍♀️ can't use "let" keyword again
  foo = 101;

  console.log(foo);  
}

myFn();

console.log(foo);  

What’s the output of myFn()?

// 101
// ReferenceError: foo is not defined

const

The keyword const is an abbreviation for constant. Similar to let, it’s block-scoped, however, you can’t reassigned it.

What do you think is the output of this code?

const myBoolean = true;

if (myBoolean) {
  const turtles = [
    'leonardo',
    'donatello',
    'michaelangelo',
    'raphael'
  ];
  // turtles = turtles.concat('Shredder');  // 🙅‍♀️ this would throw an error

  console.log(turtles);
}

console.log(turtles); 

// ['leonardo', 'donatello', 'michaelangelo', 'raphael']
// ReferenceError: turtles is not defined

Items can still be added to a const variable that points to an array or an object, because the const is not being reassigned in such case. You can learn more about that in this short post about let and const.

Review

See the table below for a breakdown.

KeywordFunction vs Block-scopeRedefinable?
varfunction-scope
letblock-scope
constblock-scope🚫

In summary, it’s generally advisable to avoid using var because function-scope isn’t as obvious as block-scope. It certainly seems that the intention of ES2016-2019 is to replace var with let/const since they encourage better coding practices.

Generally, if you need to create a variable, use const. However, if you know or think that you’ll need to reassign it (for-loops, switch statements, algorithm swapping) use let.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#