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.

Practice

1. What does the var keyword do in JavaScript?

easy

A. Declares a block-scoped variable

B. Declares a constant that cannot be changed

C. Declares a variable that can be changed and redeclared

D. Declares a variable only inside loops

Solution

1. Step 1: Understand var behavior

   var declares variables that can be changed and redeclared in the same scope.

2. Step 2: Compare with other declarations

   Unlike const or let, var is function-scoped and allows redeclaration.

3. Final Answer:

   Declares a variable that can be changed and redeclared -> Option C

4. Quick Check:

   var allows redeclaration = A [OK]

Hint: Remember: var variables can be changed and redeclared easily [OK]

Common Mistakes:

• Confusing var with const or let
• Thinking var is block-scoped
• Assuming var variables cannot be redeclared

2. Which of the following is the correct syntax to declare a variable using var?

easy

A. var myVar = 10;

B. variable myVar = 10;

C. var: myVar = 10;

D. v ar myVar = 10;

Solution

1. Step 1: Recall correct var syntax

   The correct syntax is var variableName = value; with no spaces or colons.

2. Step 2: Check each option

   Only var myVar = 10; matches the correct syntax exactly.

3. Final Answer:

   var myVar = 10; -> Option A

4. Quick Check:

   Correct var syntax = A [OK]

Hint: Use 'var name = value;' format without extra symbols [OK]

Common Mistakes:

• Using 'variable' instead of 'var'
• Adding colons after var
• Adding spaces inside 'var'

3. What will be the output of this code?

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

medium

A. 5

B. Error

C. undefined

D. 10

Solution

1. Step 1: Understand redeclaration with var

   Using var, redeclaring a variable overwrites its previous value.

2. Step 2: Trace the code execution

   First x is 5, then redeclared as 10, so console.log(x) prints 10.

3. Final Answer:

   10 -> Option D

4. Quick Check:

   Redeclared var overwrites value = 10 [OK]

Hint: Redeclaring var overwrites previous value [OK]

Common Mistakes:

• Thinking redeclaration causes error
• Expecting first value to print
• Confusing var with let or const behavior

4. Find the error in this code snippet:

if (true) {
  var a = 1;
}
console.log(a);

medium

A. ReferenceError: a is not defined

B. No error, prints 1

C. TypeError: a is not a function

D. SyntaxError due to missing braces

Solution

1. Step 1: Understand var scope

   var is function-scoped, not block-scoped, so a is accessible outside the if block.

2. Step 2: Check console.log output

   Since a is declared with var, console.log(a) prints 1 without error.

3. Final Answer:

   No error, prints 1 -> Option B

4. Quick Check:

   var is function-scoped, so prints 1 [OK]

Hint: var ignores block scope, accessible outside blocks [OK]

Common Mistakes:

• Assuming var is block-scoped like let
• Expecting ReferenceError outside block
• Confusing var with const or let scope

5. Consider this code:

function test() {
  if (true) {
    var count = 5;
  }
  var count = 10;
  return count;
}
console.log(test());

What will be the output and why?

hard

A. 10 because second var redeclares and overwrites

B. Error due to redeclaration of count

C. 5 because first var inside if is used

D. undefined because var is block-scoped

Solution

1. Step 1: Analyze var declarations inside function

   Both var count declarations are in the same function scope, so the second redeclaration overwrites the first.

2. Step 2: Determine returned value

   The function returns the last assigned value, which is 10.

3. Final Answer:

   10 because second var redeclares and overwrites -> Option A

4. Quick Check:

   Function-scoped var redeclaration overwrites = 10 [OK]

Hint: Inside functions, var redeclaration overwrites previous value [OK]

Common Mistakes:

• Thinking redeclaration causes error
• Assuming block scope limits var
• Expecting first value to be returned