JavaScript - let vs var

We can use the let and var keywords to declare variables in JavaScript. However, there are a few differences between let and var that are worth knowing.

Let and const are keywords introduced to JavaScript in 2015, when the new version of the ECMAScript specification was released - ES6, also known as ECMAScript 2015.

Before the introduction of the ES6 standard, to declare a new variable we only had the var keyword.

Block scope

The most noticeable difference between let and var is their scope.

Before the ES6 specification, there were only two types of scope in the JavaScript: local and global.

In ES5, the block scope did not exist:

var name = "Kate";
if (name) {
    var name = "Anna";
    console.log(name); "Anna"
}
console.log(name); // "Anna"

Analyzing the given example, it can be assumed that we create a new variable between the curly braces. In fact, we're only modifying an existing variable that was declared before the if statement. This is because the variables declared with the var keyword have no block scope.

The ES6 specification has introduced many new features, including block scope, which has been in other programming languages for a long time. The block scope is limited to blocks of code surrounded by curly braces, e.g. if, switch statements, and for, while loops.

let name = "Kate";
if (name) {
    let name = "Anna";
    console.log(name); "Anna"
}
console.log(name); // "Kate"

In the given example, two variables named name are declared. The first variable is declared in the global scope and the second in the block scope. Modifying a variable from a block scope does not affect the value stored in a variable assigned to global scope.

Redeclaration let and var

Variables declared with the let and var keywords behave differently when we want to redeclare them within the same scope.

If you use the var keyword, there are no restrictions on the number of times a variable is redeclared within the same scope, regardless of whether it is local or global.

var x = 1;
var x = 2;

However, a variable declared with the let keyword cannot be redeclared within the same scope.

let y = 3;
let y = 4; // SyntaxError: Identifier 'x' has already been declared

The same principle applies if we try to declare a new variable using the let keyword, if that variable has already been declared with the var keyword:

var z = 5;
let z = 15; // SyntaxError: Identifier 'z' has already been declared

and also when we reverse the order:

let z = 15;
var z = 5; // SyntaxError: Identifier 'z' has already been declared

Hoisting

Another difference between let and var is hoisting, which occurs for variables declared with the var keyword. Hosting allows to access a variable before it is declared. This is possible by moving the variable to the top of the scope in which that variable was declared.

console.log(str); // undefined
var str = "abc";
console.log(str); "abc"

For a variable declared with the keyword let, hoisting does not occur. This is something called temporal dead zone. A variable declared with the keyword let is not initialized until its declaration is executed. Attempting to access such a variable before initialization returns an error:

console.log(str); // ReferenceError: str is not defined
letstr = "abc";
console.log(str); "abc"

Window

The last difference between let and var is that the variables declared with the keyword var in the global scope are automatically available as a parameter of the window object.

console.log(window.title); // undefined
var title = 'JavaScript';
console.log(window.title); // "JavaScript"

For variables declared with the let keyword, this is not the case.

console.log(window.title); // undefined
let title = 'JavaScript';
console.log(window.title); // undefined

Browser compatibility

Summary

• the let and var keywords are used to declare variables in JavaScript
• let and const were introduced in EcmaScript 2015 (ES6)
• variables declared with the var keyword can be assigned to a global or local scope
• variables declared with the keyword let and const have a block scope
• variables declared with the var keyword can be declared again, while variables declared with the let keyword cannot
• hoisting occurs when we create variables declared with the var keyword, when we create variables declared with the let and const keyword we facing something called temporal dead zone
• variables declared using the var keyword in the global scope are automatically available as a parameter of the parent window object, but when declaring variables using the let and const keyword, such situation does not occur