How to stop a JavaScript for loop?

Question

I'm using this JavaScript to iterate through an array and find a matching array element:

var remSize = [], 
 szString, remData, remIndex, i;
for (i = 0; i < remSize.length; i++) { 
 // I'm looking for the index i, when the condition is true
 remSize[i].size == remData.size ? remIndex = i : remIndex = -1; 
}

The array contains these "sizes": ["34", "36", "38"...].

remData.size is the "size" I'm looking for (e.g. "36").

I need to return the index i if the size I'm searching for is in the index. Otherwise I need to return -1. Is there a better way to do this?

• CherryDT: Best to use the findIndex method

Answer 1

To stop a for loop early in JavaScript, you use break:

const remSize = [];
let remData;
/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */
let remIndex = -1; // Set a default if we don't find it
for (let i = 0; i < remSize.length; i++) { 
 // I'm looking for the index i, when the condition is true
 if (remSize[i].size === remData.size) {
 remIndex = i;
 break; // <=== breaks out of the loop early
 }
}

That said, for this specific use case, you can use Array's findIndex (to find the entry's index) or find (to find the entry itself):

const remIndex = remSize.findIndex((entry) => entry.size === remData.size);

find stops the first time the callback returns a truthy value, returning the element that the callback returned the truthy value for (returns undefined if the callback never returns a truthy value):

const remEntry = remSize.find((entry) => entry.size === remData.size);

findIndex does the same thing, but returns the index of the entry the callback returned a truthy value for or -1 if it never does.

(There's also some function, but it wouldn't be appropriate here.)

More about looping in my other answer here.

Answer 2

Use for of loop instead which is part of ES2015 release. Unlike forEach, we can use return, break and continue. See https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/

let arr = [1,2,3,4,5];
for (let ele of arr) {
 if (ele > 3) break;
 console.log(ele);
}

• Emad Salah: good use of es6, I think this is one of the best answers here
• Velojet: Indeed, I'd say it is THE best answer here - much the neatest way of doing it (" the most concise, direct syntax yet for looping through array elements", as Mozilla Hacks says in the link in the answer). We should repay all the hard work that's gone into ES6 by making use of its new features wherever we can (and benefit ourselves in the process).

Answer 3

The logic is incorrect. It would always return the result of last element in the array.

remIndex = -1;
for (i = 0; i < remSize.length; i++) { 
 if (remSize[i].size == remData.size) {
 remIndex = i
 break;
 }
}

Answer 4

I know this is a bit old, but instead of looping through the array with a for loop, it would be much easier to use the method <array>.indexOf(<element>[, fromIndex])

It loops through an array, finding and returning the first index of a value. If the value is not contained in the array, it returns -1.

<array> is the array to look through, <element> is the value you are looking for, and [fromIndex] is the index to start from (defaults to 0).

I hope this helps reduce the size of your code!

• greybeard: This does not answer the title question: How to stop a JavaScript for loop? It does answer Is there a better way to return the index of a match/-1 if none.
• JMoore2007: @greybeard You are correct. It does not answer the title. However, in the body, OP asks, verbatim, "Is there a better way to do this?" The method I have provided here accomplishes exactly what OP is trying to do, avoids the XY problem (asking for solutions to problem Y in order to solve problem X), and produces code that is both shorter and easier to read. While the question in the title may lead to a functional solution to the problem, it does not directly solve it. When the question isn't about the problem, you should generally solve the problem, instead of answering the question.

Answer 5

It is also possible to use every method of Javascript. It would stop the execution when condition is not true.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

remIndex = -1;
remSize.every((rem, index) => {
 if (rem.size == remData.size) {
 remIndex = i
 return false
 }
 return true
})