Understanding var, let and const with Examples

Var

Using var declares either a locally(within function) scoped variable or a globally scoped variable.

Scope

When var is used outside a function, it declares a globally scoped variable.

var a = 2; // globally scoped variable
function foo() {
    console.log(a);
}
foo(); // prints out 2
console.log(window.a); // prints out 2

This is similar to adding a property to window object directly, while there is a difference: you can’t delete the variable declared using var.

var a = 2; // globally scoped variable
window.b = 3; // new property of window object, also globally scoped
delete a; // returns false
delete b; // returns true

When var is used inside a function definition, it creates a local variable which is only available within the function:

function bar() {
    var a = 2; // only available inside this function
    console.log(a);
}
bar(); // prints out 2
console.log(a); // Uncaught ReferenceError: a is not defined
console.log(window.a); // prints out undefined

If you happen to forget to add var in a function when declare a variable, it becomes a globally scoped variable.

function foo() {
    a = 2; // note there is no var in front of the variable name
    console.log(a);
}
foo(); // prints out 2
console.log(a); // prints out 2
console.log(window.a); // prints out 2

It may not be what you intended to do, for example:

var a = 2;
function foo() {
    a = 3; // the value of the global variable a is overwritten here
    console.log(a);
}
console.log(a); // prints out 2
foo(); // prints out 3
console.log(a); // prints out 3, the old value got overwritten

Hoisting

The variables declared with var are hoisted, which means you can use the variables even before it reaches the line in the code it declares the variable.

console.log(a); // prints out undefined. This doesn't mean the variable a is not defined. It means the value of a is undefined
a = 2;
console.log(a); // prints out 2 as we just assigned a value to it
var a;

Note that if you try out above example in Chrome console, copy and paste above code snippet in one shot, i.e. don’t copy and execute each line one at a time; otherwise you’ll get a “Uncaught ReferenceError: a is not defined” error.

Let

Using let declares a block scoped variable.

Scope

The variable declared with let is only available within the code block it is defined.

{ // note the curly bracket here
    let a = 2;
    console.log(a); // prints out 2
}
console.log(a); // Uncaught ReferenceError: a is not defined

Unlike var, the variables declared with let is not added to window object as a property even if it is globally accessible.

let a = 2;
function foo() {
    console.log(a);
}
foo(); // prints out 2
console.log(a); // prints out 2
console.log(window.a); // prints out undefined

Unlike var, you can not re-declare a let variable in the same scope.

let a = 2; // declare for the first time, no problem
let a = 2; // Uncaught SyntaxError: redeclaration of let a

A fun fact is that both Chrome (84.0.4147.105) console and Microsoft Edge (83.0.478.61) allow this redeclaration, while FireFox (78.0.2) and Safari (13.1.1) don’t.

Hoisting

The variables declared with let are not hoisted to the top, hence let variable is still not yet initialized with undefined if user use it before declaration. That’s why there is a temporal death zone, i.e., browsers will report an error if one use the let variable before declaration.

function foo() {
    console.log(a);
    let a;
}
foo(); // Uncaught ReferenceError: Cannot access 'a' before initialization
function bar() {
    let b;
    console.log(b);
}
bar(); // prints undefined

Const

Using const declares and initializes a block scoped constant. If the constant is a primitive type (string, number, bigint, boolean, undefined, and symbol) or null, the value could not be altered after initialization.

{
    const a = 2;
    a = 3; // Uncaught TypeError: Assignment to constant variable.
}

While if it points to an object, the properties can be modified/added/deleted. The only thing that cannot be modified is the memory address of the object to which the constant is pointing.

{
    const a = {};
    a.foo = "hello";
    a.bar = "world";
    console.log(a.foo); // prints out hello
    console.log(a.bar); // prints out world
}

Scope

Like let, const constants are block scoped.

{
    const a = 2;
    console.log(a); // prints out 2
}
console.log(a); // Uncaught ReferenceError: a is not defined

In addition, browsers don’t allow redeclaration of constant in the same block scope, even in Chrome and Microsoft Edge.

Hoisting

Like let, const constants are not available before declaration, i.e. browser will report an error if one use it before declaration.