Return inside loops in Javascript - Step-by-Step Execution

Concept Flow - Return inside loops

Start function

↓

Enter loop

↓

Check condition

Yes↓

Return value?

Yes→Exit function immediately

No↓

Continue loop

↓

Loop ends

→Return after loop or undefined

The function starts and enters a loop. If a return is hit inside the loop, the function exits immediately. Otherwise, the loop continues until done.

Execution Sample

Javascript

function findFirstEven(arr) {
  for (let num of arr) {
    if (num % 2 === 0) return num;
  }
  return null;
}

This function returns the first even number found in the array or null if none.

Execution Table

Step	num	Condition (num % 2 === 0)	Action	Return Value	Function Exit
1	3	false	Continue loop	none	No
2	7	false	Continue loop	none	No
3	4	true	Return 4	4	Yes

💡 Function exits immediately when return is executed at step 3.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
num	undefined	3	7	4	4

Key Moments - 2 Insights

Why does the function stop running when it hits return inside the loop?

Because return immediately exits the entire function, not just the loop. See execution_table step 3 where return 4 ends the function.

What happens if no number satisfies the condition inside the loop?

The loop finishes all iterations without returning, then the function returns null after the loop, as shown by the absence of return in steps 1 and 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'num' when the function returns?

A 4

B 3

C 7

D null

💡 Hint

Check the 'num' column at the step where 'Return Value' is set.

At which step does the function exit due to return inside the loop?

A Step 1

B Step 2

C Step 3

D After loop ends

💡 Hint

Look at the 'Function Exit' column in the execution table.

If the array was [1,3,5], what would the function return?

A 1

B null

C 5

D undefined

💡 Hint

No number satisfies the condition, so the function returns after the loop.

Concept Snapshot

Return inside loops:
- A return inside a loop exits the entire function immediately.
- The loop stops running once return is hit.
- If no return in loop, function continues after loop.
- Useful to find and return first matching item quickly.

Full Transcript

This example shows how a return statement inside a loop causes the function to exit immediately when the condition is met. The function findFirstEven loops through numbers, and returns the first even number it finds. If no even number is found, it returns null after the loop. The execution table traces each step, showing variable values and when the function exits. This helps beginners understand that return inside loops stops the whole function, not just the loop.

Practice

1. What happens when you use return inside a loop in a JavaScript function?

easy

A. The function stops immediately and returns the specified value.

B. Only the current loop iteration stops, but the function continues.

C. The loop skips the current iteration and continues with the next one.

D. The loop runs to completion before the function returns.

Solution

1. Step 1: Understand the role of return in functions

   The return statement immediately exits the entire function and sends back a value.

2. Step 2: Analyze return inside a loop

   When return is inside a loop, it does not just stop the loop but stops the whole function immediately.

3. Final Answer:

   The function stops immediately and returns the specified value. -> Option A

4. Quick Check:

   Return exits function, not just loop [OK]

Hint: Return inside loop exits whole function immediately [OK]

Common Mistakes:

• Thinking return only stops the loop
• Confusing return with continue or break
• Assuming function runs after return

2. Which of the following is the correct syntax to return a value inside a for loop in a JavaScript function?

easy

A. for(let i=0; i<5 i++) return i;

B. return for(let i=0; i<5; i++) { i; }

C. for(let i=0; i<5; i++) { return i; }

D. for(let i=0; i<5; i++) { i return; }

Solution

1. Step 1: Check valid return placement

   Return must be inside the loop block with correct syntax: return value;.

2. Step 2: Analyze each option

   for(let i=0; i<5 i++) return i; has a syntax error (missing semicolon after i<5). for(let i=0; i<5; i++) { return i; } correctly places return i; inside the loop block. return for(let i=0; i<5; i++) { i; } and for(let i=0; i<5; i++) { i return; } have invalid syntax.

3. Final Answer:

   for(let i=0; i<5; i++) { return i; } -> Option C

4. Quick Check:

   Return inside braces is correct syntax [OK]

Hint: Return must be inside loop braces with value [OK]

Common Mistakes:

• Placing return before for loop
• Missing semicolon after return
• Incorrect order of return and loop

3. What is the output of this code?

function findFirstEven(arr) {
  for (let num of arr) {
    if (num % 2 === 0) {
      return num;
    }
  }
  return null;
}
console.log(findFirstEven([1, 3, 5, 6, 8]));

medium

A. 6

B. 3

C. null

D. 1

Solution

1. Step 1: Loop through array elements

   The function checks each number in the array: 1, 3, 5, 6, 8.

2. Step 2: Return first even number found

   Numbers 1, 3, 5 are odd, so loop continues. At 6, condition num % 2 === 0 is true, so function returns 6 immediately.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   First even number returned is 6 [OK]

Hint: Return stops at first even number found [OK]

Common Mistakes:

• Returning first number instead of first even
• Ignoring return stops function
• Assuming loop checks all elements

4. Find the error in this function that tries to return the first negative number from an array:

function firstNegative(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < 0) {
      break arr[i];
    }
  }
  return null;
}

medium

A. The loop condition should be i <= arr.length.

B. The loop should use return instead of break.

C. The function should return arr[i] after the loop.

D. Using break with a value is invalid syntax.

Solution

1. Step 1: Understand break statement usage

   In JavaScript, break cannot have a value; it only exits the loop.

2. Step 2: Identify correct way to return value

   To return a value and stop the function, use return arr[i]; inside the loop.

3. Final Answer:

   Using break with a value is invalid syntax. -> Option D

4. Quick Check:

   Break cannot return a value [OK]

Hint: Use return, not break, to exit function with value [OK]

Common Mistakes:

• Using break with a value
• Returning after loop instead of inside
• Incorrect loop boundary conditions

5. You want to write a function that returns the first string longer than 5 characters from an array. Which code correctly uses return inside a loop to do this?

hard

A. function findLong(arr) {
for (const str of arr) {
if (str.length > 5) {
break str;
}
}
return null;
}

B. function findLong(arr) {
for (const str of arr) {
if (str.length > 5) {
return str;
}
}
return null;
}

C. function findLong(arr) {
for (const str of arr) {
if (str.length > 5) {
continue str;
}
}
return null;
}

D. function findLong(arr) {
for (const str of arr) {
if (str.length > 5) {
return;
}
}
return null;
}

Solution

1. Step 1: Check correct use of return inside loop

   function findLong(arr) { for (const str of arr) { if (str.length > 5) { return str; } } return null; } returns the string immediately when condition is met, stopping the function.

2. Step 2: Analyze other options for errors

   function findLong(arr) { for (const str of arr) { if (str.length > 5) { break str; } } return null; } uses invalid break with value. function findLong(arr) { for (const str of arr) { if (str.length > 5) { continue str; } } return null; } uses invalid continue with value. function findLong(arr) { for (const str of arr) { if (str.length > 5) { return; } } return null; } returns undefined instead of the string.

3. Final Answer:

   function findLong(arr) { for (const str of arr) { if (str.length > 5) { return str; } } return null; } -> Option B

4. Quick Check:

   Return with value inside loop stops function correctly [OK]

Hint: Return the value inside loop to stop function early [OK]

Common Mistakes:

• Using break or continue with values
• Returning without value
• Returning after loop instead of inside