Variable declaration using const in Javascript - Step-by-Step Execution

Concept Flow - Variable declaration using const

Start

↓

Declare const variable

↓

Assign initial value

↓

Use variable

↓

Try to reassign?

Yes→Error: Cannot reassign const

No↓

End

This flow shows declaring a constant variable, assigning it once, using it, and that reassignment causes an error.

Execution Sample

Javascript

const pi = 3.14;
console.log(pi);
pi = 3.14159; // Error

Declare a constant pi, print it, then try to change it which causes an error.

Execution Table

Step	Action	Variable	Value	Result/Output
1	Declare const pi	pi	3.14	No output
2	Print pi	pi	3.14	3.14
3	Try to reassign pi	pi	3.14	Error: Assignment to constant variable.

💡 Execution stops at step 3 due to error on reassignment of const variable.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
pi	undefined	3.14	3.14	3.14 (unchanged, error on reassignment)

Key Moments - 2 Insights

Why can't we change the value of a const variable after declaring it?

Because const variables are read-only after assignment. The execution_table step 3 shows an error when trying to reassign pi.

Does declaring a const variable require an initial value?

Yes, const must be assigned a value when declared. Step 1 shows pi assigned 3.14 immediately.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of pi after step 2?

A 3.14159

B undefined

C 3.14

D Error

💡 Hint

Check the 'Value' column for pi at step 2 in the execution_table.

At which step does the program stop due to an error?

A Step 1

B Step 3

C Step 2

D No error

💡 Hint

Look at the 'Result/Output' column in the execution_table for error messages.

If we remove the reassignment line, what will be the output at step 2?

A 3.14

B undefined

C Error

D Nothing

💡 Hint

Refer to the output at step 2 in the execution_table when pi is printed.

Concept Snapshot

const variableName = value;
- Declares a constant variable.
- Must assign value at declaration.
- Cannot reassign later (error if tried).
- Use for values that should not change.

Full Transcript

This example shows how to declare a constant variable in JavaScript using const. First, we declare pi with the value 3.14. Then we print pi, which outputs 3.14. Finally, we try to change pi to 3.14159, but this causes an error because const variables cannot be reassigned. The execution stops at this error. Remember, const variables must be assigned a value when declared and cannot be changed later.

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