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

Concept Flow - Variable declaration using var

Start

↓

Declare variable with var

↓

Variable created in function/global scope

↓

Assign value

↓

Use variable

↓

End

The flow shows declaring a variable with var, which creates it in function or global scope, then assigning and using it.

Execution Sample

Javascript

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

Declares a variable x with var, assigns 5, prints it, changes to 10, then prints again.

Execution Table

Step	Action	Variable x Value	Output
1	Declare var x and assign 5	5
2	Print x	5	5
3	Assign 10 to x	10
4	Print x	10	10
5	End of code	10

💡 Code ends after printing x twice with values 5 and 10.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
x	undefined	5	10	10

Key Moments - 3 Insights

Why is x undefined before step 1 even though we use var x?

Before step 1, x is not yet declared or assigned, so it is undefined. Step 1 declares and assigns x to 5 (see execution_table row 1).

Does var create block scope or function/global scope?

var creates function or global scope, not block scope. So x is accessible outside blocks but inside the function or globally (see concept_flow).

Why does changing x to 10 affect the variable globally?

Because var variables are scoped to the function or global, reassigning x changes its value everywhere in that scope (see execution_table rows 3 and 4).

Visual Quiz - 3 Questions

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

A 10

B undefined

C 5

D null

💡 Hint

Check the 'Variable x Value' column at step 1 in the execution_table.

At which step does the output first show the value 10?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Output' column in the execution_table for when 10 appears.

If we declared x with let instead of var, how would the variable scope change?

A x would have block scope instead of function/global scope

B x would become a constant

C x would be global regardless of block

D x would not be declared

💡 Hint

Recall var creates function/global scope, but let creates block scope (see key_moments about scope).

Concept Snapshot

var declares a variable with function or global scope.
Syntax: var variableName = value;
Variable can be reassigned.
Accessible throughout the function or globally.
Not block scoped.
Useful for legacy code but let/const preferred now.

Full Transcript

This lesson shows how declaring a variable with var works in JavaScript. First, var creates the variable in function or global scope. Then the variable is assigned a value. We can use and reassign the variable later. The execution table traces each step: declaring x as 5, printing it, changing to 10, and printing again. The variable tracker shows x starts undefined, then becomes 5, then 10. Key moments clarify that var variables are not block scoped and that reassigning changes the variable globally in its scope. The quiz tests understanding of variable values at steps and scope differences with let. The snapshot summarizes var usage and scope rules.