Real-Life Example of a Variable

Imagine you have a box at home where you store your belongings. This box represents a variable, and the contents inside the box represent the value stored in the variable. The box can hold different types of items: books, clothes, toys, or even food. Similarly, a variable can hold different types of data, like numbers, strings, or objects.

The key thing is that you can change the contents of the box whenever you want. For example, today, the box may hold a book (a string), but tomorrow it could hold a jacket (an object) or a bag of cookies (a number). This flexibility is similar to how variables in JavaScript can store and change values dynamically.

What is a Variable in JavaScript?

A variable in JavaScript is like a named container that holds a value, such as a number, string, object, or array. It allows you to store data and reference it by name throughout your program. The value inside the variable can change during the execution of the program, just like you can change what you store in your box at home.

How to Declare a Variable

To declare a variable in JavaScript, you use one of the following keywords:

• var: A function-scoped variable.
• let: A block-scoped variable, introduced in ES6 (ECMAScript 2015).
• const: A block-scoped variable whose value cannot be reassigned after initialization, introduced in ES6 (ECMAScript 2015).

Note : Don't worry about scope for now; we'll cover it in detail later.

Examples with Each Keyword

Using var:

The var keyword is used to declare variables. It has function scope or global scope if declared outside a function. Variables declared with var can be re-declared and updated within the same scope. Variable declaration with var in global attached to window object.

var name = 'John';  // variable is declared with 'var'
name = 'Doe';           // variable value can be updated
console.log(name);      // Output: 'Doe'
var name='Jack'         // can be re-declared

Using let:

The let keyword declares block-scoped variables, meaning the variable is only available within the block, statement, or expression where it is defined. Variables declared with let can be updated, but they cannot be re-declared within the same scope. Variable declaration with let in global doesn't attached to window object.

let age = 30;       // variable is declared with 'let'
age = 35;              // variable value can be updated
console.log(age);      // Output: '35'

Using const:

The const keyword declares a block-scoped variable whose value cannot be reassigned after initialization. It is used for variables that should not change. Variable declaration with const in global doesn't attached to window object.

Important: With const, you must initialize the variable at the time of declaration; leaving it uninitialized will result in an error.

const country = 'USA'; // variable declared with 'const'
country = 'Canada';      // ❌ This will throw an error because 'const' variables cannot be reassigned

const city;             // ❌ Syntax Error: Missing initializer in const declaration

Note: While you cannot reassign a value to a const variable, if the variable holds an object or array, you can still modify the contents of that object or array.

Example with `const` (Object):

const person = { name: 'John', age: 30 }; // const object
person.name = 'Doe'; // allowed, object properties can be modified
console.log(person); // Output: { name: 'Doe', age: 30 }

Difference Between var, let, and const

Note: Just remember the differences to impress the interviewer; we will learn about scope and hoisting later.

Key Takeaways

• var: Function-scoped, can be re-declared and reassigned, hoisted with `undefined`, attached to the window object.
• let: Block-scoped, cannot be re-declared, can be reassigned, hoisted but not initialized, not attached to the window object.
• const: Block-scoped, cannot be re-declared or reassigned, must be initialized at declaration, allows modification of objects/arrays.
• Hoisting: `var` is hoisted with `undefined`, while `let` and `const` are hoisted but not initialized (Temporal Dead Zone).
• Scope: `var` has function scope, whereas `let` and `const` have block scope.
• Best Practices: Prefer `const` for values that won’t change and `let` for mutable values; avoid `var` in modern JavaScript.