How to exit forEach Loop in Javascript?

Without a doubt, loops are used in the bulk of the programming. There are several loops available with numerous distinct syntaxes. It’s difficult to make sense of it all, but learning the proper syntax, particularly when there are several choices, is a necessary aspect of being a skilled programmer.

The forEach loop is a type of loop in JavaScript. It is utilized to loop across arrays. It has a beautiful syntax, but when we try to get a little more sophisticated, like breaking out of the loop, problems occur.

Let’s see how to end a javascript forEach loop.

How to exit forEach Loop in Javascript?

In JavaScript, there isn’t an official mechanism to exit a forEach loop. The common break syntax will produce an error.

It might be wise to think about utilizing a conventional loop if breaking the loop is something you truly need to do.

Let’s examine the subsequent line of code.

let data = [
  {name: 'Rick'},{name: 'Steph'},{name: 'Bob'}
]

data.forEach(obj => {
  console.log(obj.name)
  if (obj.name === 'Steph') {
    break;
  }
})

The code throws an Unsyntactic break error after locating the name “Steph,” which is contrary to what you may anticipate.

Solution

There is, of course, a workaround, as there usually is in programming. While iterating our array, we can throw and receive an exception. Let’s consider how we may do this.

let data = [
  {name: 'Rick'},{name: 'Steph'},{name: 'Bob'}
]

try {
  data.forEach(obj => {
    console.log(obj.name)

    if (obj.name === 'Steph') {
      throw 'Break';
    }
  })
} catch (e) {
  if (e !== 'Break') throw e
}

We enclosed our forEach expression in a try-catch block, as you can see in this example. We conduct a “throw ‘Break‘” when we would ordinarily take a break.

We then descend to our catch and determine the nature of our mistake. We pass it up the error chain if it is anything other than “Break.” Otherwise, we resume running our code.

This remedy is effective, but it’s not particularly hygienic. Let’s examine some preferable options.

Alternative #1: for…of the loop (Preferred)

The for…of the loop would be the ideal remedy for this issue. It offers clear syntax that is simple to comprehend and also enables us to utilize breaks once more.

let data = [
    {name: 'Rick'},{name: 'Steph'},{name: 'Bob'}
  ]

for (let obj of data) {
  console.log(obj.name)
  if (obj.name === 'Steph') break;
}

The for…of loop’s ability to include await operations is a further advantage. A forEach loop prevents us from using the await idiom.

Alternative #2: every

The “every” array prototype is also applicable. Let’s examine that line of code.

let data = [
    {name: 'Rick'},{name: 'Steph'},{name: 'Bob'}
  ]
  
data.every(obj => {
    console.log(obj.name)
    return !(obj.name === 'Steph')
})

Each prototype will compare each element to our function and anticipate a boolean response.

The loop will be terminated when a value is returned as false. When the name is equivalent to “Steph,” we reverse our name test and return false, ending the loop and allowing us to continue writing our code.

Alternative #3: some

We may also use the “some” array prototype, which is quite similar to every prototype. The majority of prototypes resemble one another almost exactly.

The only distinction is that a true return will end the loop in this case. Let’s examine the code now.

let data = [
    {name: 'Rick'},{name: 'Steph'},{name: 'Bob'}
  ]

data.some(obj => {
    console.log(obj.name)
    return (obj.name === 'Steph')
})

You can see that the function terminates the loop when it encounters the name “Steph” and returns true. Whether you pick some or all depends totally on what you think is the most reading.

You are now aware of how to end a Javascript forEach loop. Along with the main remedy, you have a variety of other options.

Select the solution that best matches your use case. Keep in mind that code readability is crucial, so make an informed decision. Coding is fun!