JavaScript execution flow - Step-by-Step Execution

Concept Flow - JavaScript execution flow

Start Execution

↓

Parse Code

↓

Create Execution Context

↓

Run Global Code

↓

Function Calls?

Yes→Create Function Context

↓

Run Function Code

↓

Return Value

↓

End Execution

JavaScript starts by parsing code, creating an execution context, running global code, then handling function calls by creating new contexts and running their code.

Execution Sample

Javascript

console.log('Start');
function greet() {
  console.log('Hello');
}
greet();
console.log('End');

This code logs messages showing the order JavaScript runs global code and function calls.

Execution Table

Step	Action	Code Line	Output	Notes
1	Parse and create global execution context	All lines		Prepare to run code
2	Run global code: log 'Start'	console.log('Start');	Start	First output
3	Define function greet	function greet() {...}		Function stored, not run yet
4	Call greet()	greet();		Create function execution context
5	Run greet function code: log 'Hello'	console.log('Hello');	Hello	Inside function
6	Return from greet	End of greet		Function ends
7	Run global code: log 'End'	console.log('End');	End	Last output
8	End of script			Execution complete

💡 All code lines executed, no more statements to run

Variable Tracker

Variable/Context	Start	After Step 3	After Step 4	After Step 6	Final
Global Execution Context	Created	Function greet defined	Function greet called	Function greet returned	Execution finished
Function greet Context	Not created	Not created	Created	Code run and returned	Destroyed

Key Moments - 3 Insights

Why doesn't the function greet run when it is defined?

Because defining a function only stores it in memory (Step 3), it runs only when called (Step 4).

What happens when greet() is called?

A new function execution context is created (Step 4), the function code runs (Step 5), then it returns (Step 6).

Why does the global code continue after the function call?

Because after the function finishes (Step 6), JavaScript returns to the global context and continues running remaining code (Step 7).

Visual Quiz - 3 Questions

Look at the execution table, what is the output at Step 2?

A Hello

B Start

C End

D No output

💡 Hint

Check the 'Output' column at Step 2 in the execution_table

At which step is the function greet actually run?

A Step 3

B Step 4

C Step 5

D Step 7

💡 Hint

Look for when 'Hello' is logged in the output column

If we remove the greet() call, what happens to the output at Step 5?

A No output at Step 5

B Logs 'Start' again

C It logs 'Hello' anyway

D Logs 'End' earlier

💡 Hint

Without calling greet(), the function code does not run (see Step 4 and 5)

Concept Snapshot

JavaScript execution flow:
- Parse code and create global context
- Run global code line by line
- Define functions but don't run them yet
- When function called, create new context and run it
- After function returns, continue global code
- Execution ends when no code left

Full Transcript

JavaScript starts by reading and parsing the entire code, then creates a global execution context. It runs the global code line by line. When it sees a function definition, it stores the function but does not run it immediately. When the function is called, JavaScript creates a new execution context for that function and runs its code. After the function finishes, it returns to the global context and continues running the remaining code. Execution ends when all code has been run.