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?

Best to use the findIndex method

CherryDT
– CherryDT

2021-08-26 18:35:36 +00:00
Commented Aug 26, 2021 at 18:35 — CherryDT
– CherryDT, Commented Aug 26, 2021 at 18:35

T.J. Crowder · Accepted Answer · 2023-09-30 08:23:07Z

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.

ingdc · Accepted Answer · 2018-04-14 09:10:01Z

34

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);
}

edited Apr 14, 2018 at 9:10

ingdc

96311 silver badges16 bronze badges

answered Jan 4, 2017 at 6:38

Srini Karthikeyan

7828 silver badges15 bronze badges

2 Comments

Emad Salah Over a year ago

good use of es6, I think this is one of the best answers here

Velojet Over a year ago

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).

amit_g · Accepted Answer · 2012-03-22 21:19:04Z

10

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;
    }
}

answered Mar 22, 2012 at 21:19

amit_g

31.3k8 gold badges67 silver badges125 bronze badges

Comments

JMoore2007 · Accepted Answer · 2019-12-01 21:09:34Z

0

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!

answered Dec 1, 2019 at 21:09

JMoore2007

514 bronze badges

2 Comments

greybeard Over a year ago

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 Over a year ago

@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.

Kuldeep Saxena · Accepted Answer · 2021-08-26 18:33:07Z

0

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
})

answered Aug 26, 2021 at 18:33

Kuldeep Saxena

2,0331 gold badge18 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to stop a JavaScript for loop?

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related