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

Concept Flow - Variable declaration using let

Start

↓

Declare variable with let

↓

Assign initial value

↓

Use or update variable

↓

End or block scope exit

This flow shows declaring a variable with let, assigning a value, using or updating it, and then ending or leaving its block scope.

Execution Sample

Javascript

let count = 1;
console.log(count);
count = 2;
console.log(count);

Declare a variable 'count' with let, print it, update it, then print again.

Execution Table

Step	Action	Variable	Value	Output
1	Declare 'count' with let and assign 1	count	1
2	Print 'count'	count	1	1
3	Update 'count' to 2	count	2
4	Print updated 'count'	count	2	2
5	End of code	count	2

💡 Code ends after printing updated variable value.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
count	Error	1	2	2

Key Moments - 3 Insights

Why can't I use the variable before declaring it with let?

Using 'count' before step 1 would cause an error because 'let' variables are not accessible before declaration, as shown by the first step where 'count' is declared.

Can I change the value of a variable declared with let?

Yes, as shown in step 3, 'count' is updated from 1 to 2 without error.

What happens to the variable after the code ends?

The variable 'count' keeps its last value 2 until the program ends or the block scope ends, as shown in the final variable_tracker column.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after step 1?

A 2

B 1

C undefined

D Error

💡 Hint

Check the 'Value' column for step 1 in the execution_table.

At which step does 'count' change its value?

A Step 3

B Step 2

C Step 4

D Step 1

💡 Hint

Look for the step where the 'Action' says 'Update' and the 'Value' changes.

If we tried to print 'count' before step 1, what would happen?

A It would print undefined

B It would print 0

C It would cause an error

D It would print 1

💡 Hint

Recall that 'let' variables cannot be accessed before declaration, as explained in key_moments.

Concept Snapshot

let variableName = value;
- Declares a block-scoped variable.
- Can be updated but not redeclared in the same scope.
- Cannot be accessed before declaration (no hoisting).
- Use let for variables that change value.

Full Transcript

This example shows how to declare a variable using let in JavaScript. First, the variable 'count' is declared and assigned the value 1. Then it is printed, showing 1. Next, 'count' is updated to 2 and printed again, showing 2. Variables declared with let cannot be used before they are declared, and they keep their value until the block ends or the program finishes.

Practice

1. What does the let keyword do in JavaScript?

easy

A. Declares a constant variable that cannot change

B. Declares a variable that can change value and has block scope

C. Declares a variable with global scope only

D. Declares a function

Solution

1. Step 1: Understand let behavior

   let declares variables that can be reassigned new values.

2. Step 2: Understand scope of let

   Variables declared with let are limited to the block they are declared in (block scope).

3. Final Answer:

   Declares a variable that can change value and has block scope -> Option B

4. Quick Check:

   let = variable with block scope [OK]

Hint: Remember: let = changeable variable inside blocks [OK]

Common Mistakes:

• Confusing let with const (constant)
• Thinking let variables have global scope
• Mixing let with function declarations

2. Which of the following is the correct syntax to declare a variable named score using let?

easy

A. let = score 10;

B. let score: 10;

C. score let = 10;

D. let score = 10;

Solution

1. Step 1: Recall correct variable declaration syntax

   The correct syntax is: let variableName = value;

2. Step 2: Match syntax with options

   let score = 10; matches the correct syntax exactly.

3. Final Answer:

   let score = 10; -> Option D

4. Quick Check:

   Correct syntax = let score = 10; [OK]

Hint: Use: let variableName = value; [OK]

Common Mistakes:

• Placing let after variable name
• Using colon instead of equal sign
• Missing semicolon (though optional)

3. What will be the output of this code?

let x = 5;
x = 10;
console.log(x);

medium

A. 10

B. Error

C. undefined

D. 5

Solution

1. Step 1: Understand variable assignment and reassignment

   Variable x is first set to 5, then changed to 10.

2. Step 2: Check console.log output

   Since x was reassigned to 10, console.log(x) prints 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Reassigned let variable prints new value [OK]

Hint: let variables can change value, so print latest [OK]

Common Mistakes:

• Thinking let variables cannot be reassigned
• Expecting original value to print
• Confusing with const behavior

4. Find the error in this code:

if (true) {
  let message = "Hello";
}
console.log(message);

medium

A. ReferenceError: message is not defined

B. SyntaxError: Unexpected token

C. No error, prints Hello

D. TypeError: message is undefined

Solution

1. Step 1: Understand block scope of let

   Variable message is declared inside the if block and only exists there.

2. Step 2: Check console.log outside block

   Trying to access message outside the block causes a ReferenceError.

3. Final Answer:

   ReferenceError: message is not defined -> Option A

4. Quick Check:

   let variables have block scope, so error outside block [OK]

Hint: let variables only exist inside their block [OK]

Common Mistakes:

• Assuming let variables are global
• Confusing ReferenceError with SyntaxError
• Trying to access block variables outside

5. Consider this code:

let total = 0;
for (let i = 0; i < 3; i++) {
  let total = i * 2;
}
console.log(total);

What will be printed and why?

hard

A. 6, because total sums all i*2 values

B. 4, because total accumulates inside the loop

C. 0, because the outer total is unchanged by inner block

D. ReferenceError, total is redeclared

Solution

1. Step 1: Identify variable scopes

   There are two total variables: one outside the loop and one declared inside the loop block.

2. Step 2: Understand variable shadowing

   The inner total inside the loop is a new variable that does not affect the outer total.

3. Step 3: Check final console.log

   The outer total remains 0, so console.log(total) prints 0.

4. Final Answer:

   0, because the outer total is unchanged by inner block -> Option C

5. Quick Check:

   Inner let shadows outer variable, outer stays 0 [OK]

Hint: Inner let creates new variable, outer stays same [OK]

Common Mistakes:

• Thinking inner total changes outer total
• Assuming let variables are global
• Confusing variable shadowing with reassignment