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.

Practice

1. What does the return statement do in a JavaScript function?

easy

A. It pauses the function but continues later.

B. It prints a value to the screen.

C. It sends a value back to where the function was called.

D. It creates a new variable inside the function.

Solution

1. Step 1: Understand the purpose of return

   The return statement sends a value back to the place where the function was called.

2. Step 2: Recognize function behavior after return

   After return, the function stops running and no further code inside it executes.

3. Final Answer:

   It sends a value back to where the function was called. -> Option C

4. Quick Check:

   Return sends value back [OK]

Hint: Return sends value back and stops function [OK]

Common Mistakes:

• Thinking return prints output
• Believing return pauses function
• Confusing return with variable creation

2. Which of the following is the correct syntax to return the value 10 from a function?

easy

A. return 10;

B. return = 10;

C. return: 10;

D. return => 10;

Solution

1. Step 1: Identify correct return syntax

   The correct syntax to return a value is return value; with a semicolon.

2. Step 2: Check each option

   return 10; uses return 10; which is correct. return = 10; uses equals sign for assignment, invalid. return: 10; uses colon which is invalid. return => 10; uses arrow syntax incorrectly.

3. Final Answer:

   return 10; -> Option A

4. Quick Check:

   Correct return syntax ends with semicolon [OK]

Hint: Use 'return value;' with semicolon [OK]

Common Mistakes:

• Using colon instead of semicolon
• Confusing arrow functions with return syntax
• Using = for assignment with return

3. What is the output of this 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 behavior

   The function add takes two numbers and returns their sum using return a + b;.

2. Step 2: Calculate the return value

   Calling add(3, 4) returns 3 + 4 = 7, which is printed by console.log.

3. Final Answer:

   7 -> Option A

4. Quick Check:

   Sum of 3 and 4 is 7 [OK]

Hint: Return adds numbers and prints result [OK]

Common Mistakes:

• Concatenating numbers as strings
• Forgetting to return value
• Expecting undefined without return

4. Find the error in this function:

function greet(name) {
  console.log('Hello ' + name);
  return;
  console.log('Goodbye');
}

medium

A. The function syntax is invalid.

B. Missing return value causes error.

C. The function should not use console.log.

D. The function returns before printing 'Goodbye', so 'Goodbye' never shows.

Solution

1. Step 1: Analyze function flow

   The function prints 'Hello ' plus the name, then hits return; which stops the function.

2. Step 2: Check code after return

   Code after return (printing 'Goodbye') never runs, so 'Goodbye' is never printed.

3. Final Answer:

   The function returns before printing 'Goodbye', so 'Goodbye' never shows. -> Option D

4. Quick Check:

   Code after return is skipped [OK]

Hint: Code after return does not run [OK]

Common Mistakes:

• Expecting code after return to run
• Thinking missing return value causes error
• Confusing console.log with return

5. You want a function that returns the first non-empty string from an array or returns 'No valid string' if none found. Which function correctly uses return values?

hard

A. function firstNonEmpty(arr) {
arr.forEach(str => {
if (str) return str;
});
return 'No valid string';
}

B. function firstNonEmpty(arr) {
for (const str of arr) {
if (str) return str;
}
return 'No valid string';
}

C. function firstNonEmpty(arr) {
let result = '';
arr.forEach(str => {
if (str) result = str;
});
return result || 'No valid string';
}

D. function firstNonEmpty(arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === '') return arr[i];
}
return 'No valid string';
}

Solution

1. Step 1: Understand the goal

   The function must return the first non-empty string or a default message if none found.

2. Step 2: Evaluate each function

   function firstNonEmpty(arr) { for (const str of arr) { if (str) return str; } return 'No valid string'; } uses a for-of loop and returns immediately when a non-empty string is found, else returns default. This is correct.
   function firstNonEmpty(arr) { arr.forEach(str => { if (str) return str; }); return 'No valid string'; } uses forEach with return inside callback, which does not stop the outer function.
   function firstNonEmpty(arr) { let result = ''; arr.forEach(str => { if (str) result = str; }); return result || 'No valid string'; } collects last non-empty string but does not return first.
   function firstNonEmpty(arr) { for (let i = 0; i < arr.length; i++) { if (arr[i] === '') return arr[i]; } return 'No valid string'; } returns empty string if found, which is opposite of requirement.

3. Final Answer:

   function firstNonEmpty(arr) { for (const str of arr) { if (str) return str; } return 'No valid string'; } -> Option B

4. Quick Check:

   Return inside loop stops function immediately [OK]

Hint: Use return inside loop to exit early [OK]

Common Mistakes:

• Using forEach with return expecting to exit function
• Returning empty string instead of non-empty
• Returning last instead of first non-empty string