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.