🌐JavaScript

Variables (let, const, var)

Updated 2026-04-24

8 min

Variables (let, const, var)

Variables are containers that store data values. In JavaScript, you have three ways to declare them: let, const, and var. Understanding the differences is essential - it's one of the most common interview questions and a source of real bugs in production code.

Declaring Variables

variables.js

1let age = 25;           // Can be reassigned
2const name = "Alice";   // Cannot be reassigned
3var score = 100;        // Old way - avoid in modern JS
4 
5console.log(age);   // 25
6console.log(name);  // Alice
7console.log(score); // 100

let vs const vs var

Feature	`let`	`const`	`var`
Reassignable	✅ Yes	❌ No	✅ Yes
Block-scoped	✅ Yes	✅ Yes	❌ No (function-scoped)
Hoisted	✅ (TDZ)	✅ (TDZ)	✅ (initialized as `undefined`)
Redeclarable	❌ No	❌ No	✅ Yes
Use case	Values that change	Values that don't change	Legacy code only

Rule of Thumb

Use const by default. Switch to let only when you need to reassign the variable. Never use var in modern JavaScript.

let - Mutable Variables

Use let when the value will change over time:

let-example.js

1let count = 0;
2count = 1;          // ✅ Reassignment is fine
3count = count + 1;  // ✅ count is now 2
4 
5let temperature = 72;
6temperature = 68;   // ✅ Updated
7 
8// ❌ Cannot redeclare in the same scope
9// let count = 5; // SyntaxError: Identifier 'count' has already been declared

const - Immutable Bindings

Use const for values that should never be reassigned:

const-example.js

1const PI = 3.14159;
2const API_URL = "https://api.example.com";
3const MAX_RETRIES = 3;
4 
5// ❌ Cannot reassign
6// PI = 3.14; // TypeError: Assignment to constant variable
7 
8// ⚠️ BUT: Objects and arrays declared with const CAN be modified
9const user = { name: "Alice", age: 25 };
10user.age = 26;        // ✅ This works - we're modifying the object, not reassigning
11console.log(user);    // { name: "Alice", age: 26 }
12 
13const colors = ["red", "green"];
14colors.push("blue");  // ✅ Modifying the array is fine
15console.log(colors);  // ["red", "green", "blue"]

const Doesn't Mean Immutable

const prevents reassignment, not mutation. The variable binding is constant, but object/array contents can still change. To make an object truly immutable, use Object.freeze().

var - The Legacy Keyword

var was the only way to declare variables before ES6 (2015). It has two major quirks that cause bugs:

var-problems.js

1// Problem 1: var is function-scoped, NOT block-scoped
2if (true) {
3var leaked = "I escaped the block!";
4}
5console.log(leaked); // "I escaped the block!" - 😱 shouldn't be accessible
6 
7// With let, this works correctly:
8if (true) {
9let contained = "I stay inside";
10}
11// console.log(contained); // ❌ ReferenceError
12 
13// Problem 2: var is hoisted and initialized as undefined
14console.log(ghost); // undefined (no error!)
15var ghost = "boo";
16 
17// With let, you get an error (safer):
18// console.log(spirit); // ❌ ReferenceError: Cannot access 'spirit' before initialization
19// let spirit = "boo";

Hoisting & the Temporal Dead Zone

Hoisting means variable declarations are moved to the top of their scope during compilation. But the behavior differs:

hoisting.js

1// var is hoisted AND initialized as undefined
2console.log(a); // undefined
3var a = 10;
4 
5// let/const are hoisted but NOT initialized (Temporal Dead Zone)
6// console.log(b); // ❌ ReferenceError
7let b = 20;
8 
9// The Temporal Dead Zone (TDZ) is the period between
10// entering the scope and the declaration being reached
11{
12// TDZ starts here for 'x'
13// console.log(x); // ❌ ReferenceError
14let x = 42;       // TDZ ends here
15console.log(x);   // 42 ✅
16}

Variable Naming Rules

JavaScript variable names must follow these rules:

naming.js

1// ✅ Valid names
2let firstName = "Alice";       // camelCase (recommended)
3let _privateVar = true;        // starts with underscore
4let $element = "div";          // starts with dollar sign
5let MAX_SIZE = 100;            // UPPER_SNAKE_CASE for constants
6let numberOfStudents = 42;     // descriptive camelCase
7 
8// ❌ Invalid names
9// let 1stPlace = "gold";      // cannot start with a number
10// let my-name = "Alice";      // hyphens not allowed
11// let class = "Math";         // 'class' is a reserved word

Convention	Use For	Example
`camelCase`	Variables, functions	`userName`, `getTotal()`
`PascalCase`	Classes, components	`UserProfile`, `Button`
`UPPER_SNAKE_CASE`	True constants	`API_KEY`, `MAX_RETRIES`
`_prefixed`	"Private" values (convention)	`_internalState`

Multiple Declarations

multiple.js

1// Declare multiple variables
2let x = 1, y = 2, z = 3;
3 
4// Destructuring (more on this in later topics)
5const [a, b] = [10, 20];
6console.log(a, b); // 10 20
7 
8const { name, age } = { name: "Bob", age: 30 };
9console.log(name, age); // Bob 30

Practical Example: Temperature Converter

converter.js

1const FREEZING_POINT_F = 32;
2const CONVERSION_FACTOR = 5 / 9;
3 
4let celsius = 100;
5let fahrenheit = (celsius * 9/5) + FREEZING_POINT_F;
6 
7console.log(celsius + "°C = " + fahrenheit + "°F");
8// 100°C = 212°F
9 
10// Convert back
11celsius = (fahrenheit - FREEZING_POINT_F) * CONVERSION_FACTOR;
12console.log(fahrenheit + "°F = " + celsius + "°C");
13// 212°F = 100°C

Notice how FREEZING_POINT_F and CONVERSION_FACTOR use const (they never change), while celsius and fahrenheit use let (they get reassigned).

What's Next?

Now that you can store values, let's explore the different data types JavaScript supports and how type coercion works behind the scenes.

🌐JavaScript

Variables (let, const, var)

Updated 2026-04-24

8 min

Variables (let, const, var)

Declaring Variables

variables.js

1let age = 25;           // Can be reassigned
2const name = "Alice";   // Cannot be reassigned
3var score = 100;        // Old way - avoid in modern JS
4 
5console.log(age);   // 25
6console.log(name);  // Alice
7console.log(score); // 100

let vs const vs var

Feature	`let`	`const`	`var`
Reassignable	✅ Yes	❌ No	✅ Yes
Block-scoped	✅ Yes	✅ Yes	❌ No (function-scoped)
Hoisted	✅ (TDZ)	✅ (TDZ)	✅ (initialized as `undefined`)
Redeclarable	❌ No	❌ No	✅ Yes
Use case	Values that change	Values that don't change	Legacy code only

Rule of Thumb

Use const by default. Switch to let only when you need to reassign the variable. Never use var in modern JavaScript.

let - Mutable Variables

Use let when the value will change over time:

let-example.js

1let count = 0;
2count = 1;          // ✅ Reassignment is fine
3count = count + 1;  // ✅ count is now 2
4 
5let temperature = 72;
6temperature = 68;   // ✅ Updated
7 
8// ❌ Cannot redeclare in the same scope
9// let count = 5; // SyntaxError: Identifier 'count' has already been declared

const - Immutable Bindings

Use const for values that should never be reassigned:

const-example.js

1const PI = 3.14159;
2const API_URL = "https://api.example.com";
3const MAX_RETRIES = 3;
4 
5// ❌ Cannot reassign
6// PI = 3.14; // TypeError: Assignment to constant variable
7 
8// ⚠️ BUT: Objects and arrays declared with const CAN be modified
9const user = { name: "Alice", age: 25 };
10user.age = 26;        // ✅ This works - we're modifying the object, not reassigning
11console.log(user);    // { name: "Alice", age: 26 }
12 
13const colors = ["red", "green"];
14colors.push("blue");  // ✅ Modifying the array is fine
15console.log(colors);  // ["red", "green", "blue"]

const Doesn't Mean Immutable

const prevents reassignment, not mutation. The variable binding is constant, but object/array contents can still change. To make an object truly immutable, use Object.freeze().

var - The Legacy Keyword

var was the only way to declare variables before ES6 (2015). It has two major quirks that cause bugs:

var-problems.js

1// Problem 1: var is function-scoped, NOT block-scoped
2if (true) {
3var leaked = "I escaped the block!";
4}
5console.log(leaked); // "I escaped the block!" - 😱 shouldn't be accessible
6 
7// With let, this works correctly:
8if (true) {
9let contained = "I stay inside";
10}
11// console.log(contained); // ❌ ReferenceError
12 
13// Problem 2: var is hoisted and initialized as undefined
14console.log(ghost); // undefined (no error!)
15var ghost = "boo";
16 
17// With let, you get an error (safer):
18// console.log(spirit); // ❌ ReferenceError: Cannot access 'spirit' before initialization
19// let spirit = "boo";

Hoisting & the Temporal Dead Zone

Hoisting means variable declarations are moved to the top of their scope during compilation. But the behavior differs:

hoisting.js

1// var is hoisted AND initialized as undefined
2console.log(a); // undefined
3var a = 10;
4 
5// let/const are hoisted but NOT initialized (Temporal Dead Zone)
6// console.log(b); // ❌ ReferenceError
7let b = 20;
8 
9// The Temporal Dead Zone (TDZ) is the period between
10// entering the scope and the declaration being reached
11{
12// TDZ starts here for 'x'
13// console.log(x); // ❌ ReferenceError
14let x = 42;       // TDZ ends here
15console.log(x);   // 42 ✅
16}

Variable Naming Rules

JavaScript variable names must follow these rules:

naming.js

1// ✅ Valid names
2let firstName = "Alice";       // camelCase (recommended)
3let _privateVar = true;        // starts with underscore
4let $element = "div";          // starts with dollar sign
5let MAX_SIZE = 100;            // UPPER_SNAKE_CASE for constants
6let numberOfStudents = 42;     // descriptive camelCase
7 
8// ❌ Invalid names
9// let 1stPlace = "gold";      // cannot start with a number
10// let my-name = "Alice";      // hyphens not allowed
11// let class = "Math";         // 'class' is a reserved word

Convention	Use For	Example
`camelCase`	Variables, functions	`userName`, `getTotal()`
`PascalCase`	Classes, components	`UserProfile`, `Button`
`UPPER_SNAKE_CASE`	True constants	`API_KEY`, `MAX_RETRIES`
`_prefixed`	"Private" values (convention)	`_internalState`

Multiple Declarations

multiple.js

1// Declare multiple variables
2let x = 1, y = 2, z = 3;
3 
4// Destructuring (more on this in later topics)
5const [a, b] = [10, 20];
6console.log(a, b); // 10 20
7 
8const { name, age } = { name: "Bob", age: 30 };
9console.log(name, age); // Bob 30

Practical Example: Temperature Converter

converter.js

1const FREEZING_POINT_F = 32;
2const CONVERSION_FACTOR = 5 / 9;
3 
4let celsius = 100;
5let fahrenheit = (celsius * 9/5) + FREEZING_POINT_F;
6 
7console.log(celsius + "°C = " + fahrenheit + "°F");
8// 100°C = 212°F
9 
10// Convert back
11celsius = (fahrenheit - FREEZING_POINT_F) * CONVERSION_FACTOR;
12console.log(fahrenheit + "°F = " + celsius + "°C");
13// 212°F = 100°C

Notice how FREEZING_POINT_F and CONVERSION_FACTOR use const (they never change), while celsius and fahrenheit use let (they get reassigned).

What's Next?

Now that you can store values, let's explore the different data types JavaScript supports and how type coercion works behind the scenes.