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.

Practice

1. What happens when JavaScript encounters a function declaration in the code?

easy

A. The function runs immediately.

B. The function is stored but not run until called.

C. The function is ignored.

D. The function causes an error.

Solution

1. Step 1: Understand function declaration behavior

   When JavaScript sees a function declared, it saves it in memory but does not execute it immediately.

2. Step 2: Recognize when functions run

   Functions only run when they are explicitly called later in the code.

3. Final Answer:

   The function is stored but not run until called. -> Option B

4. Quick Check:

   Functions run only when called = A [OK]

Hint: Functions run only when called, not on declaration [OK]

Common Mistakes:

• Thinking functions run immediately on declaration
• Confusing declaration with invocation
• Assuming functions are ignored until called

2. Which of the following is the correct way to call a function named greet in JavaScript?

easy

A. greet();

B. greet;

C. call greet();

D. function greet();

Solution

1. Step 1: Identify function call syntax

   In JavaScript, calling a function requires the function name followed by parentheses.

2. Step 2: Check each option

   greet(); uses greet(); which correctly calls the function. Others are incorrect syntax.

3. Final Answer:

   greet(); -> Option A

4. Quick Check:

   Function call needs parentheses = A [OK]

Hint: Call functions with parentheses: name() [OK]

Common Mistakes:

• Forgetting parentheses when calling functions
• Using 'call' keyword incorrectly
• Confusing declaration syntax with call

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

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');

medium

A. StartEndTimeout

B. EndStartTimeout

C. TimeoutStartEnd

D. StartTimeoutEnd

Solution

1. Step 1: Understand synchronous and asynchronous code

   console.log('Start') runs first and prints 'Start'. setTimeout schedules a function to run later, after current code finishes.

2. Step 2: Trace the execution order

   console.log('End') runs immediately after 'Start'. Then the setTimeout callback runs, printing 'Timeout'.

3. Final Answer:

   Start
   End
   Timeout -> Option A

4. Quick Check:

   Async runs after sync code = D [OK]

Hint: setTimeout runs after current code finishes [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Mixing order of console logs
• Ignoring asynchronous behavior

4. Find the error in this code snippet:

function sayHi() {
  console.log('Hi');
}
sayHi

medium

A. console.log syntax error

B. Function name is incorrect

C. Missing parentheses to call the function

D. No error, code runs fine

Solution

1. Step 1: Check function call syntax

   The code writes sayHi without parentheses, so the function is not called.

2. Step 2: Identify the fix

   Adding parentheses sayHi() calls the function and prints 'Hi'.

3. Final Answer:

   Missing parentheses to call the function -> Option C

4. Quick Check:

   Function call needs () = C [OK]

Hint: Always use () to call functions [OK]

Common Mistakes:

• Forgetting parentheses to invoke functions
• Thinking function name alone calls it
• Assuming no error when function not called

5. Consider this code:

console.log('1');
setTimeout(() => console.log('2'), 100);
Promise.resolve().then(() => console.log('3'));
console.log('4');

What is the correct order of output?

hard

A. 1342

B. 4132

C. 1234

D. 1432

Solution

1. Step 1: Understand synchronous, microtask, and macrotask queues

   console.log('1') and console.log('4') run immediately (sync). Promise.then callbacks run next (microtask). setTimeout callbacks run last (macrotask).

2. Step 2: Trace output order

   Output order is '1' (sync), '4' (sync), '3' (Promise microtask), then '2' (setTimeout macrotask).

3. Final Answer:

   1
   4
   3
   2 -> Option D

4. Quick Check:

   Promise microtasks before setTimeout macrotasks = B [OK]

Hint: Promise.then runs before setTimeout even with 0 delay [OK]

Common Mistakes:

• Thinking setTimeout runs before Promise.then
• Ignoring microtask queue priority
• Assuming all async run in order scheduled