Return values in Javascript - Step-by-Step Execution

Concept Flow - Return values

Function called

↓

Execute function code

↓

Return value found?

No→Return undefined

Yes↓

Return value to caller

↓

Function call replaced by return value

When a function is called, it runs its code and then sends back a value to where it was called from. If no return is given, it returns undefined.

Execution Sample

Javascript

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

let result = add(2, 3);
console.log(result);

This code defines a function that adds two numbers and returns the sum, then prints the result.

Execution Table

Step	Action	Evaluation	Return Value	Output
1	Call add(2, 3)	Parameters a=2, b=3
2	Calculate a + b	2 + 3
3	Return sum		5
4	Assign return value to result			result = 5
5	Print result			5
6	End	No more code

💡 Function returns 5, assigned to result, printed, then program ends

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
a	undefined	2	out of scope	out of scope	out of scope
b	undefined	3	out of scope	out of scope	out of scope
result	undefined	undefined	undefined	5	5

Key Moments - 2 Insights

Why does the function return a value instead of printing it?

The function uses 'return' to send the value back to the caller (see execution_table step 3). Printing happens outside the function (step 5).

What happens if the function has no return statement?

If no return is found, the function returns undefined automatically (see concept_flow where 'Return value found? No' leads to returning undefined).

Visual Quiz - 3 Questions

Look at the execution table, what is the return value at step 3?

A 5

B undefined

C 2 + 3

D result

💡 Hint

Check the 'Return Value' column at step 3 in the execution_table

At which step is the return value assigned to the variable 'result'?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Output' column in execution_table for when 'result' gets a value

If the function had no return statement, what would 'result' be after the call?

A NaN

B 5

C undefined

D null

💡 Hint

Refer to key_moments about functions without return statements returning undefined

Concept Snapshot

function name(params) {
  return value; // sends value back to caller
}

Calling function returns this value.
If no return, returns undefined by default.
Use return to get results from functions.

Full Transcript

When you call a function in JavaScript, the code inside runs. If the function uses 'return', it sends a value back to where it was called. This value can be saved in a variable or used directly. If the function does not have a return statement, it returns undefined automatically. In the example, the add function returns the sum of two numbers, which is then saved in 'result' and printed. The execution table shows each step: calling the function, calculating the sum, returning the value, assigning it, and printing it. Variables 'a' and 'b' get their values from the call, and 'result' gets the returned sum. Remember, return stops the function and sends the value back.