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.

Practice

1. What does it mean when a variable is in the global scope in JavaScript?

easy

A. The variable can be accessed anywhere in the code.

B. The variable can only be used inside a function.

C. The variable is hidden from all parts of the code.

D. The variable is deleted after a function finishes.

Solution

1. Step 1: Understand global scope meaning

   Global scope means a variable is declared outside any function and is accessible everywhere in the code.

2. Step 2: Compare options with definition

   Only The variable can be accessed anywhere in the code. correctly states that the variable can be accessed anywhere.

3. Final Answer:

   The variable can be accessed anywhere in the code. -> Option A

4. Quick Check:

   Global scope = accessible everywhere [OK]

Hint: Global variables are outside functions, accessible everywhere [OK]

Common Mistakes:

• Thinking global variables are only inside functions
• Confusing global with local scope
• Believing global variables disappear after function ends

2. Which of the following is the correct way to declare a global variable in JavaScript?

easy

A. Inside a function using let

B. Outside any function using var

C. Inside a block using const

D. Inside a function using const

Solution

1. Step 1: Identify where to declare global variables

   Global variables must be declared outside any function or block.

2. Step 2: Check declaration keywords

   Using var outside functions creates a global variable. Options A, B, and D declare inside functions or blocks, so they are not global.

3. Final Answer:

   Outside any function using var -> Option B

4. Quick Check:

   Global variable = declared outside functions [OK]

Hint: Declare global variables outside functions with var [OK]

Common Mistakes:

• Declaring variables inside functions and expecting global scope
• Using let or const inside blocks thinking they are global
• Confusing block scope with global scope

3. What will be the output of this code?

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

medium

A. 10

B. undefined

C. ReferenceError

D. null

Solution

1. Step 1: Identify variable scope

   Variable x is declared globally with var and has value 10.

2. Step 2: Check function access

   The function show logs x. Since x is global, it is accessible inside the function.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Global variable accessed inside function = 10 [OK]

Hint: Global variables are accessible inside functions [OK]

Common Mistakes:

• Expecting undefined because variable is outside function
• Thinking console.log will cause ReferenceError
• Confusing local and global scope

4. Find the error in this code related to global scope:

function test() {
  var a = 5;
}
console.log(a);

medium

A. No error, prints 5

B. TypeError: a is undefined

C. ReferenceError: a is not defined

D. SyntaxError: var inside function

Solution

1. Step 1: Check variable scope

   Variable a is declared inside function test with var, so it is local to that function.

2. Step 2: Access variable outside function

   Trying to log a outside the function causes a ReferenceError because a is not in global scope.

3. Final Answer:

   ReferenceError: a is not defined -> Option C

4. Quick Check:

   Local variable accessed globally = ReferenceError [OK]

Hint: Variables inside functions are not global [OK]

Common Mistakes:

• Assuming var inside function is global
• Expecting output 5 instead of error
• Confusing ReferenceError with SyntaxError

5. You want to create a global counter variable that increases every time a function runs. Which code correctly uses global scope to do this?

hard

A. let counter = 0;
function count() {
let counter = 0;
counter++;
console.log(counter);
}

B. function count() {
var counter = 0;
counter++;
console.log(counter);
}

C. function count() {
let counter = 0;
counter++;
console.log(counter);
}

D. var counter = 0;
function count() {
counter++;
console.log(counter);
}

Solution

1. Step 1: Identify global variable declaration

   var counter = 0;
   function count() {
     counter++;
     console.log(counter);
   }

   declares counter outside the function, making it global and accessible inside the function.

2. Step 2: Check counter increment behavior

   Inside count, counter++ increases the global variable, so the count persists across calls.

3. Final Answer:

   var counter = 0; function count() { counter++; console.log(counter); } -> Option D

4. Quick Check:

   Global counter increments inside function =

   var counter = 0;
   function count() {
     counter++;
     console.log(counter);
   }

   [OK]

Hint: Declare counter outside function to keep it global [OK]

Common Mistakes:

• Declaring counter inside function resets it each call
• Using let inside function hides global variable
• Expecting local counter to remember previous value