Global scope in Javascript - Step-by-Step Execution

Concept Flow - Global scope

Start Program

↓

Declare Global Variables

↓

Execute Code

↓

Access Variables

↓

Global

↓

Use Global

↓

End Program

The program starts by declaring global variables accessible everywhere. When code runs, it can use global or local variables depending on where they are declared.

Execution Sample

Javascript

let x = 10;
function show() {
  console.log(x);
}
show();

This code declares a global variable x and a function that prints x. Calling show() prints the global x value.

Execution Table

Step	Action	Variable x Value	Output
1	Declare global variable x = 10	10
2	Define function show()	10
3	Call show()	10
4	Inside show(), access x (global)	10	10
5	End show() execution	10

💡 Function show() finished, program ends

Variable Tracker

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

Key Moments - 2 Insights

Why does show() print 10 even though x is not declared inside it?

Because x is declared in the global scope, it is accessible inside show(). The execution_table row 4 shows accessing global x.

What if we declare a local x inside show()? Which x is used?

The local x inside show() would shadow the global x. The function would use the local x instead, not the global one.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of x when show() is called (Step 3)?

A null

B 10

C undefined

D Error

💡 Hint

Check the 'Variable x Value' column at Step 3 in the execution_table.

At which step does the program output the value 10?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the 'Output' column in the execution_table to find when 10 is printed.

If we add 'let x = 5;' inside show(), what will be printed?

A 5

B 10

C undefined

D Error

💡 Hint

Local variables inside functions shadow global ones, so the local x = 5 will be used.

Concept Snapshot

Global scope means variables declared outside functions are accessible everywhere.
Variables declared globally can be used inside functions unless shadowed by local variables.
Local variables inside functions override global variables with the same name.
Use global variables carefully to avoid unexpected changes.
Access global variables directly inside functions if no local variable shadows them.

Full Transcript

This example shows how global scope works in JavaScript. We declare a variable x globally with value 10. Then we define a function show() that prints x. When we call show(), it accesses the global x because no local x exists inside the function. The execution table traces each step: declaring x, defining show, calling show, accessing x inside show, and ending the function. The variable tracker shows x remains 10 throughout. Key moments clarify why show() prints 10 and what happens if a local x is declared. The quiz tests understanding of variable values and scope behavior. Remember, global variables are accessible everywhere unless shadowed by local variables.