JavaScript execution flow - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the JavaScript execution flow?

It is the order in which JavaScript code runs, from top to bottom, line by line, unless directed otherwise by functions, loops, or conditions.

beginner

What happens when a function is called in JavaScript execution flow?

The flow jumps to the function's code, runs it, then returns back to the next line after the call.

beginner

How do loops affect JavaScript execution flow?

Loops repeat a block of code multiple times, causing the flow to cycle through the loop until a condition stops it.

intermediate

What is the role of the call stack in JavaScript execution flow?

The call stack keeps track of function calls, managing where the flow should return after each function finishes.

intermediate

How does asynchronous code affect JavaScript execution flow?

Asynchronous code runs separately and uses callbacks or promises to continue execution later, without blocking the main flow.

What is the default order of JavaScript execution?

A Top to bottom, line by line

B Bottom to top

C Random order

D Only functions run

JavaScript runs code from top to bottom, line by line, unless directed otherwise.

When a function is called, what happens to the execution flow?

A It skips the function

B It jumps to the function, runs it, then returns

C It runs the function later

D It stops completely

The flow jumps to the function code, executes it, then returns to continue.

What does the call stack do in JavaScript execution?

A Runs asynchronous code

B Stores variables

C Manages function calls and returns

D Handles errors only

The call stack tracks function calls and where to return after each finishes.

How do loops affect the execution flow?

A They repeat code blocks multiple times

B They skip code

C They run code once

D They stop the flow

Loops repeat a block of code until a condition is met.

What is true about asynchronous JavaScript execution?

A It does not exist

B It runs code immediately in order

C It blocks the main flow

D It runs separately and continues later

Asynchronous code runs separately and uses callbacks or promises to continue later.

Explain how JavaScript executes code from start to finish, including how functions and loops affect the flow.

Think about how the program moves through lines and jumps into functions or loops.

Describe the role of the call stack and how asynchronous code changes the usual execution flow.

Consider how JavaScript keeps track of where it is and how it handles tasks that take time.

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