Variable declaration using const in Javascript - Deep Dive

Overview - Variable declaration using const

What is it?

In JavaScript, const is a way to declare a variable that cannot be reassigned after its initial value is set. It means the variable name always points to the same value or object. However, if the value is an object or array, its contents can still be changed. This helps prevent accidental changes to important values.

Why it matters

Using const helps avoid bugs caused by changing values that should stay the same, making code easier to understand and safer. Without const, developers might accidentally overwrite variables, causing unexpected behavior and hard-to-find errors. It encourages writing clearer and more reliable programs.

Where it fits

Before learning const, you should understand basic variables and how to declare them with var and let. After mastering const, you can learn about immutability, object references, and best practices for managing state in JavaScript applications.

Mental Model

Core Idea

A const variable is like a locked box that always holds the same item, but if the item is a container, you can still rearrange what's inside.

Think of it like...

Imagine you have a labeled jar sealed shut with a sticker that says 'Do not replace contents.' You cannot swap the jar for another, but if the jar holds marbles, you can move the marbles around inside the jar freely.

┌───────────────┐
│ const myVar   │
│ ┌───────────┐ │
│ │  Value    │ │
│ │ (object)  │ │
│ └───────────┘ │
│  (fixed ref) │
└───────────────┘

Inside the object:
┌───────────┐
│ property  │
│ can change│
└───────────┘

Build-Up - 7 Steps

1

Foundation

Basic variable declaration

Concept: Learn how to declare variables using var and let before const.

In JavaScript, variables store data. You can declare them using var or let. For example: let age = 25; var name = 'Alice'; These variables can be changed later by assigning new values.

Result

Variables age and name hold values 25 and 'Alice' respectively and can be reassigned.

Understanding how variables hold and change values is the foundation for learning const.

2

Foundation

Introduction to const declaration

Concept: Declare variables that cannot be reassigned using const.

const pi = 3.14; Here, pi is a constant variable. If you try to assign a new value like pi = 3.1415, JavaScript will give an error.

Result

pi holds 3.14 and cannot be changed to another value.

Knowing that const prevents reassignment helps protect important values from accidental changes.

3

Intermediate

Const with primitive values

🤔Before reading on: Do you think const variables can be changed if they hold numbers or strings? Commit to your answer.

Concept: Const variables holding simple values like numbers or strings cannot be changed after assignment.

const greeting = 'Hello'; // greeting = 'Hi'; // This causes an error const count = 10; // count = 20; // This also causes an error

Result

Trying to change greeting or count causes errors because const forbids reassignment.

Understanding that const locks the variable name to a value prevents bugs with simple data types.

4

Intermediate

Const with objects and arrays

🤔Before reading on: Can you change the contents of a const object or array? Commit to your answer.

Concept: Const variables holding objects or arrays cannot be reassigned, but their contents can be modified.

const user = { name: 'Bob' }; user.name = 'Alice'; // Allowed const numbers = [1, 2, 3]; numbers.push(4); // Allowed // user = { name: 'Eve' }; // Error // numbers = [5, 6]; // Error

Result

You can change properties inside the object or elements in the array, but cannot assign a new object or array to the const variable.

Knowing the difference between changing the reference and changing the contents avoids confusion and errors.

5

Intermediate

Temporal dead zone with const

🤔Before reading on: Do you think you can use a const variable before declaring it? Commit to your answer.

Concept: Const variables are in a 'temporal dead zone' before declaration, meaning you cannot access them before they are declared.

console.log(value); // ReferenceError const value = 5; This error happens because const variables are not hoisted like var variables.

Result

Trying to use a const variable before declaration causes a ReferenceError.

Understanding temporal dead zone helps prevent runtime errors and clarifies variable lifetimes.

6

Advanced

Const and block scoping

🤔Before reading on: Does const behave like var or let in terms of scope? Commit to your answer.

Concept: Const variables are block-scoped, meaning they only exist inside the block they are declared in.

{ const secret = 'hidden'; console.log(secret); // works } console.log(secret); // ReferenceError This shows const is limited to the block, unlike var which is function-scoped.

Result

Const variables cannot be accessed outside their block, preventing accidental use elsewhere.

Knowing const is block-scoped helps write safer code with fewer side effects.

7

Expert

Const with immutability patterns

🤔Before reading on: Does using const guarantee an object is fully immutable? Commit to your answer.

Concept: Const alone does not make objects immutable; to fully prevent changes, you must use methods like Object.freeze().

const config = Object.freeze({ mode: 'dark' }); // config.mode = 'light'; // Fails silently or throws in strict mode const data = { value: 10 }; data.value = 20; // Allowed because data is not frozen // const only locks the reference, not the object's contents.

Result

Using Object.freeze with const creates truly immutable objects, preventing any changes.

Understanding the limits of const prevents false assumptions about data safety and guides better immutability practices.

Under the Hood

When JavaScript runs, const declarations create a binding between the variable name and a memory location that holds the value. This binding is immutable, meaning the variable name cannot point to a different memory location after initialization. However, if the value is an object or array, the memory location holds a reference to that object, and the object's internal state can still be changed. The JavaScript engine enforces this immutability by throwing errors on reassignment attempts during runtime.

Why designed this way?

Const was introduced to help developers write safer and clearer code by preventing accidental reassignment of variables. Before const, var and let allowed reassignment, which could lead to bugs. Const provides a way to signal intent that a variable should not change, improving code readability and maintainability. The design balances immutability of the binding with flexibility for object contents, as full immutability is often too restrictive and handled separately.

┌───────────────┐
│ const myVar   │
├───────────────┤
│ Binding (fixed)│
│ points to     │
│ ┌───────────┐ │
│ │ Value     │ │
│ │ (object)  │ │
│ └───────────┘ │
└───────────────┘

Attempt to reassign myVar → Error
Modify object contents → Allowed

Myth Busters - 4 Common Misconceptions

Quick: Does const make an object completely unchangeable? Commit to yes or no before reading on.

Common Belief: Const makes the entire object or array unchangeable.

Reality: Const only prevents reassignment of the variable name; the contents of objects or arrays can still be changed unless frozen.

Why it matters: Assuming full immutability leads to bugs when object properties change unexpectedly, causing unpredictable behavior.

Quick: Can you use a const variable before declaring it? Commit to yes or no before reading on.

Common Belief: Const variables are hoisted and can be used before declaration like var.

Reality: Const variables are not hoisted and accessing them before declaration causes a ReferenceError due to the temporal dead zone.

Why it matters: Misunderstanding this causes runtime errors that confuse beginners and waste debugging time.

Quick: Is const variable scope the same as var? Commit to yes or no before reading on.

Common Belief: Const variables have function scope like var variables.

Reality: Const variables have block scope, like let, meaning they only exist inside the block they are declared in.

Why it matters: Incorrect scope assumptions can cause variables to be accessed where they don't exist, leading to errors.

Quick: Does using const mean you cannot change the contents of an array? Commit to yes or no before reading on.

Common Belief: Const arrays cannot be modified after declaration.

Reality: Const arrays can have their elements changed, added, or removed; only reassignment of the array variable is forbidden.

Why it matters: Believing arrays are immutable with const can cause confusion and misuse of data structures.

Expert Zone

1

Const bindings are immutable, but the underlying value's mutability depends on its type and methods like Object.freeze().

2

Using const with destructuring assignments can create multiple immutable bindings in one statement, improving code clarity.

3

In performance-critical code, const can help JavaScript engines optimize variable access due to guaranteed immutability of bindings.

When NOT to use

Const is not suitable when you need to reassign variables frequently, such as counters in loops or variables that change state. In those cases, use let. For full immutability of data, use libraries or methods like Object.freeze(), Immer, or immutable.js instead of relying on const alone.

Production Patterns

In real-world code, const is used for configuration values, fixed references, and imported modules to prevent accidental reassignment. Developers combine const with immutability helpers to manage state in frameworks like React. Const also helps enforce coding standards and improves readability by signaling intent clearly.

Connections

Immutability in Functional Programming

Const provides a basic form of immutability by preventing reassignment, which is a core idea in functional programming.

Understanding const helps grasp how functional programming avoids side effects by keeping data unchanged.

Memory Management in Computer Science

Const variables create fixed bindings to memory locations, relating to how memory references and pointers work.

Knowing const's fixed binding concept deepens understanding of how programs manage memory references safely.

Legal Contracts in Law

Const is like a legal contract that fixes an agreement (variable binding) that cannot be changed without breaking rules.

Seeing const as a contract clarifies why reassignment is forbidden and why contents might still be negotiable.

Common Pitfalls

#1 Trying to reassign a const variable causes runtime errors.

Wrong approach:

const score = 10;
score = 20; // Error: Assignment to constant variable.

Correct approach:

let score = 10;
score = 20; // Allowed reassignment

Root cause:

Misunderstanding that const variables cannot be reassigned leads to errors when trying to change their value.

#2 Assuming const makes objects immutable and trying to prevent property changes.

Wrong approach:

const user = { name: 'Sam' };
user.name = 'Max'; // Allowed, but unexpected if you thought const prevents this

Correct approach:

const user = Object.freeze({ name: 'Sam' });
user.name = 'Max'; // Fails silently or throws error

Root cause:

Confusing const's binding immutability with object immutability causes unexpected mutations.

#3 Using const variables before declaration causing ReferenceError.

Wrong approach:

console.log(value); // ReferenceError
const value = 5;

Correct approach:

const value = 5;
console.log(value); // 5

Root cause:

Not understanding temporal dead zone and hoisting behavior of const leads to runtime errors.

Key Takeaways

Const declares variables that cannot be reassigned after their initial value is set.

Const variables are block-scoped and exist only within the block they are declared in.

Const does not make objects or arrays immutable; their contents can still be changed unless frozen.

Using const helps prevent bugs by signaling which variables should remain constant throughout the program.

Understanding const's behavior with scope, reassignment, and object mutability is essential for writing clear and safe JavaScript code.

Practice

1. What does the const keyword do in JavaScript?

easy

A. Declares a variable that cannot be reassigned

B. Declares a variable that can be reassigned anytime

C. Declares a function

D. Declares a variable only inside loops

Solution

1. Step 1: Understand const behavior

   The const keyword creates a variable that cannot be reassigned after its initial value is set.

2. Step 2: Compare options

   Only Declares a variable that cannot be reassigned correctly states that const variables cannot be reassigned.

3. Final Answer:

   Declares a variable that cannot be reassigned -> Option A

4. Quick Check:

   const means no reassignment [OK]

Hint: Remember: const means constant value, no changes allowed [OK]

Common Mistakes:

• Thinking const variables can be reassigned
• Confusing const with let or var
• Assuming const declares functions

2. Which of the following is the correct syntax to declare a constant variable named pi with value 3.14?

easy

A. constant pi = 3.14;

B. const pi := 3.14;

C. const pi = 3.14;

D. let const pi = 3.14;

Solution

1. Step 1: Recall correct const syntax

   In JavaScript, the correct syntax to declare a constant is const variableName = value;.

2. Step 2: Check each option

   Only const pi = 3.14; matches the correct syntax. The other options use invalid keywords or symbols.

3. Final Answer:

   const pi = 3.14; -> Option C

4. Quick Check:

   Correct const syntax uses = and no extra keywords [OK]

Hint: Use const name = value; with equal sign [OK]

Common Mistakes:

• Using := instead of =
• Writing 'constant' instead of 'const'
• Combining let and const keywords

3. What will be the output of this code?

const greeting = 'Hello';
greeting = 'Hi';
console.log(greeting);

medium

A. undefined

B. Hi

C. Hello

D. TypeError

Solution

1. Step 1: Understand reassignment of const variable

   The variable greeting is declared with const, so it cannot be reassigned after initialization.

2. Step 2: Analyze the reassignment line

   Trying to assign 'Hi' to greeting causes a TypeError at runtime.

3. Final Answer:

   TypeError -> Option D

4. Quick Check:

   Reassigning const variable throws TypeError [OK]

Hint: const variables cannot be reassigned; error occurs if tried [OK]

Common Mistakes:

• Assuming const variables can be changed
• Expecting console.log to print new value
• Confusing TypeError with SyntaxError

4. Find the error in this code snippet:

const number;
number = 10;
console.log(number);

medium

A. Missing value when declaring const variable

B. Cannot use console.log with const

C. Variable name 'number' is reserved

D. No error, code runs fine

Solution

1. Step 1: Check const declaration rules

   When declaring a const variable, it must be initialized with a value immediately.

2. Step 2: Identify the problem in code

   The code declares const number; without assigning a value, which causes a SyntaxError.

3. Final Answer:

   Missing value when declaring const variable -> Option A

4. Quick Check:

   const must be initialized on declaration [OK]

Hint: Always assign a value when declaring const [OK]

Common Mistakes:

• Declaring const without initialization
• Thinking console.log causes error
• Assuming variable names like 'number' are invalid

5. You want to store a list of colors that should never change in your program. Which is the best way to declare it using const and why?

const colors = ['red', 'green', 'blue'];
colors.push('yellow');
console.log(colors);

hard

A. Use const and avoid changing array contents; push will cause error

B. Use const for the array; you can change contents but not reassign the variable

C. Use let instead of const to allow adding colors

D. Declare colors as a string instead of array

Solution

1. Step 1: Understand const with objects and arrays

   Using const means the variable cannot be reassigned, but the contents of objects or arrays can be changed.

2. Step 2: Analyze the code behavior

   The array colors is declared with const, but push modifies its contents without reassigning the variable, so it works fine.

3. Final Answer:

   Use const for the array; you can change contents but not reassign the variable -> Option B

4. Quick Check:

   const protects variable binding, not object contents [OK]

Hint: const protects variable name, not array contents [OK]

Common Mistakes:

• Thinking const makes array immutable
• Using let when const is better for fixed references
• Confusing reassignment with content modification