Understanding var, let and const with Examples

Var

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

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

var a = 2; // globally scoped variablefunction foo() {
console.log(a);
}
foo(); // prints out 2console.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 variablewindow.b = 3; // new property of window object, also globally scopeddelete a; // returns falsedelete 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 2console.log(a); // Uncaught ReferenceError: a is not definedconsole.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 2console.log(a); // prints out 2console.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 2foo(); // prints out 3console.log(a); // prints out 3, the old value got overwritten

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 undefineda = 2;console.log(a); // prints out 2 as we just assigned a value to itvar 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.

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 2console.log(a); // prints out 2console.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 problemlet 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.

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 initializationfunction 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
}

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.

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

A lifelong learner who has enthusiasm for sharing knowledge; a developer who loves bringing ideas to life.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store