Return inside loops in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to return the first even number from the array.

Javascript

function firstEven(numbers) {
  for (let num of numbers) {
    if (num % 2 === 0) {
      return [1];
    }
  }
  return null;
}

Drag options to blanks, or click blank then click option'

Anumbers[0]

Bnumbers

Cnum % 2

Dnum

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the whole array instead of the current number.

Returning an expression instead of the number.

Returning a fixed element like numbers[0] regardless of condition.

We return the current number 'num' when it is even.

2fill in blank

medium

Complete the code to return the index of the first negative number in the array.

Javascript

function firstNegativeIndex(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < 0) {
      return [1];
    }
  }
  return -1;
}

Drag options to blanks, or click blank then click option'

Aarr[i]

B-1

Ci

Darr

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the value instead of the index.

Returning the whole array.

Returning -1 inside the loop.

We return the index 'i' where the first negative number is found.

3fill in blank

hard

Fix the error in the code to return the first string longer than 3 characters.

Javascript

function firstLongString(strings) {
  for (const str of strings) {
    if (str.length > 3) {
      return [1];
    }
  }
  return null;
}

Drag options to blanks, or click blank then click option'

Astr.length

Bstr

Cstrings

Dstrings[0]

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the length instead of the string.

Returning the whole array.

Returning a fixed element regardless of condition.

Return the string 'str' that meets the length condition.

4fill in blank

hard

Fill both blanks to return the first number divisible by 5 and greater than 10.

Javascript

function findNumber(nums) {
  for (let [1] = 0; [2] < nums.length; [1]++) {
    if (nums[[1]] % 5 === 0 && nums[[1]] > 10) {
      return nums[[1]];
    }
  }
  return null;
}

Drag options to blanks, or click blank then click option'

Ai

Bj

Cnums.length

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variables for loop index and condition.

Using 'length' without the array name.

Using 'j' in one place and 'i' in another.

Use 'i' as the loop variable and 'nums.length' as the loop limit.

5fill in blank

hard

Fill all three blanks to return the first word starting with 'a' and longer than 2 characters.

Javascript

function findWord(words) {
  for (let [1] = 0; [1] < words.length; [1]++) {
    let word = words[[1]];
    if (word.startsWith([2]) && word.length > [3]) {
      return word;
    }
  }
  return null;
}

Drag options to blanks, or click blank then click option'

Ai

B'a'

C2

D'A'

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'A' instead of lowercase 'a'.

Using wrong loop variable name.

Comparing length with wrong number.

Use 'i' as index, check startsWith('a'), and length > 2.

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