Function execution flow in Javascript - Step-by-Step Execution

Concept Flow - Function execution flow

Call function

↓

Enter function body

↓

Execute statements one by one

↓

Return value or finish

↓

Back to caller with result

This flow shows how a function is called, runs its code step-by-step, then returns a value back to where it was called.

Execution Sample

Javascript

function greet(name) {
  return "Hello, " + name + "!";
}

let message = greet("Alice");
console.log(message);

This code calls a function that creates a greeting message and prints it.

Execution Table

Step	Action	Evaluation	Result
1	Call greet("Alice")	Enter function with name = "Alice"	Function starts
2	Execute return statement	"Hello, " + "Alice" + "!"	"Hello, Alice!"
3	Return value to caller	Function ends	Value "Hello, Alice!" assigned to message
4	Call console.log(message)	Print message	Output: Hello, Alice!

💡 Function greet finishes and returns the greeting string, then program prints it.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
name	undefined	"Alice"	"Alice"	undefined	undefined
message	undefined	undefined	undefined	"Hello, Alice!"	"Hello, Alice!"

Key Moments - 2 Insights

Why does the function return immediately after the return statement?

Because the return statement ends the function execution and sends the value back to the caller, as shown in step 2 and 3 of the execution_table.

What happens to the variable 'name' after the function finishes?

The variable 'name' exists only inside the function during its execution (steps 1-3). After the function ends, 'name' is not accessible outside, but its value was used to create the return value.

Visual Quiz - 3 Questions

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

A "Alice"

B "Hello, Alice!"

C undefined

D null

💡 Hint

Check the 'Result' column in row for step 3 in execution_table.

At which step does the function greet return its value?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for the step where the function ends and value is assigned to 'message' in execution_table.

If we change the argument to greet("Bob"), what changes in variable_tracker?

A The 'name' variable changes to "Bob" after step 1

B The 'message' variable becomes undefined

C The 'name' variable stays undefined

D No variables change

💡 Hint

Check how 'name' is assigned the argument value at step 1 in variable_tracker.

Concept Snapshot

Function execution flow in JavaScript:
- Call function with arguments
- Enter function body
- Execute statements step-by-step
- Return value with 'return'
- Back to caller with result
- Variables inside function exist only during execution

Full Transcript

This visual shows how a JavaScript function runs. First, the function is called with an argument. Then it enters the function body and executes the code inside. When it reaches the return statement, it stops and sends the result back to where it was called. The returned value is stored in a variable outside the function. Variables inside the function exist only while it runs. This helps understand how functions work step-by-step.

Practice

1. What happens when a JavaScript function is defined but not called?

easy

A. The function runs twice.

B. The function code does not run.

C. The program crashes.

D. The function runs automatically once defined.

Solution

1. Step 1: Understand function definition

   Defining a function only tells the program what the function does but does not run it.

2. Step 2: Recognize function call requirement

   The function code runs only when the function is called explicitly.

3. Final Answer:

   The function code does not run. -> Option B

4. Quick Check:

   Function runs only when called [OK]

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

Common Mistakes:

• Thinking function runs on definition
• Confusing declaration with execution
• Assuming automatic call

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

easy

A. greet[];

B. call greet;

C. function greet();

D. greet();

Solution

1. Step 1: Identify function call syntax

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

2. Step 2: Check each option

   greet(); uses greet(); which is correct. Others use invalid syntax.

3. Final Answer:

   greet(); -> Option D

4. Quick Check:

   Function call = name + () [OK]

Hint: Call functions with parentheses after name [OK]

Common Mistakes:

• Omitting parentheses
• Using wrong keywords
• Using brackets instead of parentheses

3. What is the output of the following code?

function add(a, b) {
  return a + b;
}

console.log(add(3, 4));

medium

A. 7

B. 34

C. undefined

D. NaN

Solution

1. Step 1: Understand function parameters and return

   The function add takes two numbers and returns their sum.

2. Step 2: Calculate the return value for add(3, 4)

   3 + 4 equals 7, so the function returns 7.

3. Final Answer:

   7 -> Option A

4. Quick Check:

   3 + 4 = 7 [OK]

Hint: Return adds numbers, not concatenates without strings [OK]

Common Mistakes:

• Treating numbers as strings
• Missing return statement
• Confusing output with parameters

4. Find the error in this code snippet:

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

medium

A. Missing parentheses to call the function.

B. Function name is incorrect.

C. console.log syntax error.

D. Function cannot be called outside definition.

Solution

1. Step 1: Check how the function is called

   The function sayHi is referenced but not called because parentheses are missing.

2. Step 2: Understand function call syntax

   To run the function, it must be called with parentheses: sayHi();

3. Final Answer:

   Missing parentheses to call the function. -> Option A

4. Quick Check:

   Function call needs () [OK]

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

Common Mistakes:

• Forgetting parentheses
• Confusing function reference with call
• Assuming function runs automatically

5. Consider this code:

function multiply(x, y) {
  return x * y;
}

function calculate() {
  let result = multiply(2, 3);
  return result + 4;
}

console.log(calculate());

What is the output and why?

hard

A. 7, because multiply returns 3 and 3 + 4 = 7.

B. 24, because multiply returns 6 and 6 * 4 = 24.

C. 10, because multiply returns 6 and 6 + 4 = 10.

D. Error, because multiply is not called inside calculate.

Solution

1. Step 1: Trace multiply function call

   Calling multiply(2, 3) returns 2 * 3 = 6.

2. Step 2: Calculate final result in calculate

   The variable result is 6, then result + 4 equals 10.

3. Final Answer:

   10, because multiply returns 6 and 6 + 4 = 10. -> Option C

4. Quick Check:

   2*3=6; 6+4=10 [OK]

Hint: Follow return values step-by-step [OK]

Common Mistakes:

• Multiplying instead of adding final step
• Ignoring return values
• Assuming function not called