Variables (var, let, const)
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
.
var
is the oldest keyword. It has function scope when declared within a function and global scope otherwise. Variables definedvar
can be re-declared and updated.let
is a newer feature of JavaScript. It provides block scope, which limits its access to the block, statement, or expression where it's used. Unlikevar
, alet
variable cannot be re-declared within its scope. However, it can be updated.const
is 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:
var
is 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).let
is 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.const
is 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:
var
is 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).let
is 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).
const
is like the CEO of the company. There’s only one CEO (no re-declaration), and their role is constant (no updating).
Aspect | var | let | const |
Scope | Function scope | Block scope | Block scope |
Hoisting | Variables are hoisted (can be used before declaration) | Temporal Dead Zone (TDZ): cannot use before declaration | Temporal Dead Zone (TDZ): cannot use before declaration |
Re-declaration | Can be re-declared within its scope | Cannot be re-declared in the same scope | Cannot be re-declared in the same scope |
Re-assignment | Can be re-assigned | Can be re-assigned | Cannot be re-assigned |
Initialization | Can be declared without initialization | Can be declared without initialization | Must be initialised upon declaration |
Best Use Cases | Legacy code; global variables for the whole script | Use when the variable needs to be reassigned within a block | Use for constants whose value should not change |
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.