Variables (var, let, const)

Akash ThoriyaAkash Thoriya
3 min read

Expert-Level Explanation

In JavaScript, variables are containers for storing data values. There are three ways to declare a variable: using var, let, or const.

  • varis the oldest keyword. It has function scope when declared within a function and global scope otherwise. Variables definedvar can be re-declared and updated.

  • letis a newer feature of JavaScript. It provides block scope, which limits its access to the block, statement, or expression where it's used. Unlike var, a let variable cannot be re-declared within its scope. However, it can be updated.

  • constis also block-scoped, similar tolet, but it maintains a constant value. Aconst variable cannot be updated or re-declared. It must be initialised at the time of declaration.

Creative Explanation

Imagine a library with different kinds of bookshelves:

  • varis like an old bookshelf that’s accessible from anywhere in the library. You can replace the books (update variables) or add another shelf with the same name (re-declare).

  • letis like a modern bookshelf in a special room (block scope). You can swap out the books (update), but you can’t replace or add a new bookshelf with the same name within the same room.

  • constis like a glass case for displaying a rare book. Once the book is placed (initialised), it can’t be replaced or removed, and no other case can take its name.

Practical Explanation with Code

var oldVar = "I can be changed and re-declared";
oldVar = "Updated value";
var oldVar = "Re-declared value";

let blockLet = "I can be updated, but not re-declared within the same block";
blockLet = "Updated value";
// let blockLet = "Error if re-declared"; // This would cause an error

const constantValue = "I cannot change or be re-declared";
// constantValue = "Attempting to change"; // This line would cause an error

Real-world Example

Consider a company with different types of employees:

  • varis like a general role, such as a 'Consultant'. You can find many consultants in the company (re-declaration), and their roles can change over time (updating).

  • letis like a project manager for a specific project. You can’t have two managers with the same name on the same project (no re-declaration), but their responsibilities can change (update).

constis like the CEO of the company. There’s only one CEO (no re-declaration), and their role is constant (no updating).


Aspectvarletconst
ScopeFunction scopeBlock scopeBlock scope
HoistingVariables are hoisted (can be used before declaration)Temporal Dead Zone (TDZ): cannot use before declarationTemporal Dead Zone (TDZ): cannot use before declaration
Re-declarationCan be re-declared within its scopeCannot be re-declared in the same scopeCannot be re-declared in the same scope
Re-assignmentCan be re-assignedCan be re-assignedCannot be re-assigned
InitializationCan be declared without initializationCan be declared without initializationMust be initialised upon declaration
Best Use CasesLegacy code; global variables for the whole scriptUse when the variable needs to be reassigned within a blockUse for constants whose value should not change
0
Subscribe to my newsletter

Read articles from Akash Thoriya directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Akash Thoriya
Akash Thoriya

As a senior full-stack developer, I am passionate about creating efficient and scalable web applications that enhance the user experience. My expertise in React, Redux, NodeJS, and Laravel has enabled me to lead cross-functional teams and deliver projects that consistently exceed client expectations.