Global execution context in Javascript - Step-by-Step Execution

Concept Flow - Global execution context

Start: Script loads

↓

Create Global Execution Context

↓

Memory Creation Phase

↓

Variable & Function Declarations Stored

↓

Code Execution Phase

↓

Execute Code Line by Line

↓

Global Context Remains Active Until Script Ends

When a JavaScript file runs, the global execution context is created first, setting up memory for variables and functions, then runs the code line by line.

Execution Sample

Javascript

var a = 5;
function greet() {
  console.log('Hello');
}
greet();

This code creates a global variable and a function, then calls the function to print 'Hello'.

Execution Table

Step	Action	Memory State	Output
1	Create global execution context	Empty memory for variables and functions
2	Memory creation phase: store 'a' as undefined, store 'greet' function	a: undefined, greet: function
3	Code execution: assign 5 to 'a'	a: 5, greet: function
4	Code execution: call greet()	a: 5, greet: function	Hello
5	End of script	a: 5, greet: function

💡 Script ends, global execution context is removed

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
a	undefined	undefined	5	5
greet	undefined	function	function	function

Key Moments - 2 Insights

Why is variable 'a' initially undefined in memory before assignment?

During the memory creation phase (see step 2 in execution_table), variables are set to undefined before code runs. This is why 'a' is undefined before step 3 assigns 5.

Why can the function 'greet' be called before its code line?

Functions are fully stored in memory during the creation phase (step 2), so they can be called anytime after that, even before their code line appears.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of 'a'?

A undefined

B 5

C function

D null

💡 Hint

Check the 'Memory State' column at step 3 in the execution_table

At which step is the function 'greet' stored in memory?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Memory State' column in execution_table rows to see when 'greet' appears

If we remove the function call 'greet()', what will be the output?

A No output

B undefined

C Hello

D Error

💡 Hint

Check the 'Output' column in execution_table, see when 'Hello' is printed

Concept Snapshot

Global Execution Context in JavaScript:
- Created when script starts
- Memory phase: variables set to undefined, functions stored
- Execution phase: code runs line by line
- Functions can be called anytime after memory phase
- Context lasts until script ends

Full Transcript

When JavaScript runs a script, it first creates the global execution context. This sets up memory for variables and functions. Variables start as undefined, and functions are stored fully. Then the code runs line by line, assigning values and calling functions. For example, variable 'a' starts undefined, then gets value 5. The function 'greet' is stored early and can be called anytime after. The output 'Hello' appears when greet() runs. The global context stays active until the script finishes.

Practice

1. What does the global execution context in JavaScript contain?

easy

A. Global variables, functions, and the global object

B. Only local variables inside functions

C. Only the code inside loops

D. Only event listeners

Solution

1. Step 1: Understand what global execution context is

   The global execution context is the environment where all JavaScript code runs initially, outside any function.

2. Step 2: Identify what it holds

   It holds global variables, functions declared globally, and the global object (like window in browsers).

3. Final Answer:

   Global variables, functions, and the global object -> Option A

4. Quick Check:

   Global execution context = global variables + functions + global object [OK]

Hint: Global context holds everything outside functions [OK]

Common Mistakes:

• Thinking it only holds local variables
• Confusing with function execution context
• Assuming it holds event listeners only

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

easy

A. let myVar = 10;

B. function myVar() {}

C. const myVar;

D. var myVar = 10;

Solution

1. Step 1: Identify global variable declaration syntax

   Using var outside any function declares a global variable in JavaScript.

2. Step 2: Check other options

   function myVar() {} declares a function, not a variable. let and const can declare global variables but behave differently in scope and hoisting; const myVar; is invalid because const needs initialization.

3. Final Answer:

   var myVar = 10; -> Option D

4. Quick Check:

   Global variable declaration = var outside functions [OK]

Hint: Use var outside functions for global variables [OK]

Common Mistakes:

• Using const without initialization
• Confusing function declaration with variable
• Assuming let always creates global variables

3. What will be the output of the following code?

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

medium

A. 10 10 10

B. 5 5 5

C. 5 10 5

D. 10 5 10

Solution

1. Step 1: Understand variable scopes

   var x = 5; declares a global variable x with value 5. Inside test(), var x = 10; declares a local variable x that shadows the global one.

2. Step 2: Trace console.log outputs

   First console.log(x); outside function prints global x = 5. Inside test(), console.log(x); prints local x = 10. After calling test(), the last console.log(x); prints global x again, which is still 5.

3. Final Answer:

   5 10 5 -> Option C

4. Quick Check:

   Global x = 5, local x = 10 inside function [OK]

Hint: Local vars shadow globals inside functions [OK]

Common Mistakes:

• Assuming global x changes after function call
• Confusing local and global scopes
• Expecting all outputs to be same

4. Identify the error in the following code related to global execution context:

console.log(a);
var a = 10;

medium

A. undefined because of hoisting of 'var a'

B. SyntaxError due to missing semicolon

C. 10 because 'a' is initialized before console.log

D. ReferenceError because 'a' is not defined

Solution

1. Step 1: Understand hoisting of var declarations

   In JavaScript, var declarations are hoisted to the top of their scope with an initial value of undefined.

2. Step 2: Trace the console.log output

   At console.log(a);, variable a exists but is not yet assigned 10, so it prints undefined.

3. Final Answer:

   undefined because of hoisting of 'var a' -> Option A

4. Quick Check:

   var hoisting = undefined before assignment [OK]

Hint: var declarations hoist but initialize as undefined [OK]

Common Mistakes:

• Expecting ReferenceError instead of undefined
• Thinking variable is initialized before console.log
• Confusing var with let/const hoisting

5. Consider this code snippet:

var count = 1;
function increment() {
  count++;
  var count = 10;
  console.log(count);
}
increment();
console.log(count);

What will be the output and why?

hard

A. 10 1

B. NaN 1

C. 1 1

D. ReferenceError 1

Solution

1. Step 1: Analyze variable hoisting inside function

   Inside increment(), var count is hoisted to the top of the function scope but not initialized yet, so it starts as undefined.

2. Step 2: Evaluate the increment operation

   The line count++; tries to increment the local count which is undefined, setting it to NaN. Then count = 10; assigns 10, and console.log(count); prints 10.

3. Step 3: Check global count after function call

   The global count remains unchanged at 1, so console.log(count); outside prints 1.

4. Final Answer:

   NaN 1 -> Option B

5. Quick Check:

   Local var hoisted undefined -> NaN on increment -> 10 on assignment [OK]

Hint: Hoisted local var undefined causes NaN on ++ [OK]

Common Mistakes:

• Thinking the output is NaN 1 because of undefined++
• Assuming increment affects global count
• Ignoring hoisting of local var