JavaScript var, let, and const - What they are and when to use

Last Updated Sep 5, 2024

Learn the differences between var, let and const keyword in JavaScript

Written By

Reviewed By

JavaScript code

Technology is constantly evolving, and programming Languages are updated from time to time.

JavaScript became a more robust programming language with the release of ES6, which came with many outstanding features.

Here we will discuss two of the many new features of ECMAScript 6, the let and const keywords. The let and const keywords are two new ways of declaring variables in Javascript. But why do we need them when we already have the var keyword?

This and many other things you might want to know about these new keywords are covered in this piece.

Var keyword

Var is the traditional keyword used for creating variables in JavaScript. It is the oldest there is. The var keyword has been supported in all web browsers since the inception of JavaScript.

Variables defined using the var keyword are either function-scoped or globally-scoped, depending on whether the declaration is made inside or outside a function. Scopes in Javascript refer to the current execution context or encapsulation of a code. It determines the accessibility of variables.

There are two types of execution scopes in Javascript:

  1. Global scope
  2. local scope

Global Scope: When a variable is available for use from anywhere within the codebase, we say it has a global scope. Variables defined outside of functions have global scope.

Local Scope: A variable defined within a block of code is local to that block and can only be accessed within that code block. Code blocks include functions, loop blocks, and try-catch blocks.

When a Javascript variable is available in the browser window, we say it has a global scope. Global scoped variables are properties of the window object.

// global variables, declared outside of a function
var firstName = "Akande";
var lastName = "Olalekan Toheeb";

var sayName = function() {
  // firstName and lastName is accessible inside sayName because they are global variables
  var fullName = firstName + ' ' + lastName;
  console.log(fullName);  // >>> Akande Olalekan Toheeb
}

console.log(firstName); // >>> Akande
console.log(lastName); // >>> Olalekan Toheeb

// full name is not accessible out the function sayName, because it is function scoped
console.log(fullName); // error fullName is not defined

As can be seen from the code snippet above, firstName and lastName can be accessed from anywhere in the code because they are global variables. In contrast, fullName, a function-scoped variable declared inside the sayName function, can only be accessed within the sayName function.

Var Hoisting

Variables declared using the var keyword are moved up to the top of the file or function in which they are declared before code execution. This process is called Hoisting. Hence, it is valid to use a var declared variable before it is declared.

console.log(fullname)
var fullName = "Akande Olalekan";

// the code is valid because of var hoisting.
// before execution, the declaration is moved up to the beginning of the file

Var keyword and its buggy nature

Using the var keyword to declare variables can inherently introduce bugs and lead to code smell. It is impossible to scope a variable within a code block, for instance, within a loop and try-catch block.

This inherent problem of the var keyword led to the introduction of two new variable declaration keywords in ES6.

The let keyword

let keyword alongside the const keyword are two JavaScript keywords introduced in ES6 in 2015. The let keyword is an improvement to the var keyword with a different use case. It improves and solves the inherent problem using var, as discussed above.

The let keyword is a block-scoped JavaScript variable declaration keyword and is designed to be used in declaring constantly changing variables. Unlike the var keyword with a global or function scope, let declared variables be scoped to the block they were declared on.

A Javascript code block is defined with curly braces {}. All the codes inside these braces are blocked. Block-scoped variables can only be accessed within the block.

{
  let fullName= "Akande Olalekan Toheeb"
  console.log(fullName)   // Akande Olalekan Toheeb
}

console.log(fullName)   //  error fullName is not defined

The let keyword is not designed to be when declaring a const variable, i.e., a variable whose value remains unchanged throughout the execution lifetime of the block of code.

Const

The const keyword is the second addition to variable declaration keywords introduced by ES6. The const keyword is block-scoped and is designed to declare constant variables whose values will remain unchanged throughout the execution lifetime of the block.

If you ever need to change the value of a const variable, then it is time to turn it into a let variable. Value reassignment is not possible with const variables.

const fullName = "Akande Olalekan";
fullName = "Akande Olalekan Toheeb"; // TypeError: Assignment to constant variable.

However, it is okay to update, add and delete the properties of const declared javascript objects.

const fullName = {
  firstName: "Akande",
  lastName: "Olalekan:
}
// it is okay to change value of the property lastName
fullName.lastName = "Olalekan Toheeb";

Summary

Variable declaration is the first thing we learn when starting to code. It is very important to understand the three modes of declaring JavaScript variables. Today, you would mostly write in ES6 and use the const and let keywords.

How to choose which Javascript variable declaration keyword to use:

  1. Use the let keyword to declare variables whose values changed in the code block.
  2. Use the const keyword to declare variables whose values remain unchanged within the code block.
  3. Use the const keyword to declare project-wide constants.
  4. Please stay away from using the var keyword due to its buggy nature. Use let or const keywords whenever possible.

Latest

Rest API Put vs Post methods, Similarities and differences

List comprehension in python

Defaced launches Chrome Extension for Google Core Web Vitals

Complete guide on how to set up Storybook UI with React

Rem, px, and em CSS units, their subtle differences

Introduction to C# Programming Language