I recently had a coding interview that involved evaluating one schema against another. The details of it aren"t that important, but one thing that came out of it (in the middle of the interview) was that you can"t break out of a forEach() loop. I had forgotten that little tidbit and it probably screwed up my chances of getting hired. After you read this, hopefully, you won"t make the same mistake I did! Don"t be like me.
If you prefer khổng lồ watch than read, check out the video clip version of this!MDN Knows All
As noted by MDN:
There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool
That"s some hardcore sass coming from the MDoanh Nghiệp docs. However, they are right, knowing which tool khổng lồ choose is important.
Before we get too deep inkhổng lồ why you can"t break out of a forEach(), let"s examine what a loop even is and where forEach() came from.What is a Loop
A loop in programming solves a pretty common problem: I need khổng lồ run the same code against all this data. Put simply, it is:
Repeating the same code over & over (on loop) until we reach a defined end state.The Problem
For the sake of comparison, we"re going to solve the same problem using the various loop types. Here is the problem:
Compare two arrays và see if the items in them are the same.
Here is the data we are going to compare:
const jedis = <"Anakin","Luke"> const sith = <"Palpatine", "Anakin">
We have sầu two arrays, both with a couple of names. You"ll probably notice that Anakin is both a Jedi and a Sith. This is a trivial example, however not far off from what I was tested on during my interview.
The Old A Way
What I don"t want you khổng lồ get from this article is that one loop is better than another. They all offer unique programming solutions và have sầu a spot for specific use cases. The trichồng is knowing which one khổng lồ use when.
Traditional For Loop
If you"ve ever taken any type of programming course, you"ve probably been exposed lớn our good frikết thúc the for loop. It has been a handy tool for programmers for a long time and is still useful today. Let"s solve our problem using it.
// Our data again, for referenceconst jedis = <"Anakin", "Luke">;const sith = <"Palpatine", "Anakin">;// start our loop, define our iterator variablefor (let i = 0; i jedis.length; i++) // create a variable we can reference const thisJedi = jedis; // see if the thành công in the array we are testing exists if (sith.includes(thisJedi)) // If it does exist, then that jedi is also a sith console.log(`$thisJedi is also a Sith`); // we can exit out break; console.log(`$thisJedi is not a Sith`);
The for loop offers a pretty handy way of exiting our code if it meets a condition we choose. This is immensely helpful when looping over a TON of data. It has been very helpful in solving some of the Project Euler problems, specifically this one.
The New Another Way
Ahy vọng other things, forEach() was stamped in the spec in 2009 along with all the other goodness that was given lớn us in ES5. It serves as a handy method lớn write clean code that easily iterates over items in an array.
What is it doing?
A forEach() loop is a function that runs another function (callback) on each chiến thắng in an array. We define what happens in that callback function. JS is nice enough khổng lồ give us three parameters in that function:The vật phẩm in the arrayThe index of the itemThe whole array
Let"s take a look at our problem using a forEach() loop instead. I"ve sầu included all three parameters in the function, but we"re only using the first, the thành tích, which I"m naming jedi
// We have sầu lớn create a global state variable to keep traông xã of what is happening let matching // loop over array jedis.forEach((jedi,index,array) => // check to see if jedi is in sith if(!sith.includes(jedi)) // if it isn"t, mix global variable to lớn false matching = false // it keeps going... ) console.log(matching) // false
If it makes more sense, you can refactor the callback function inlớn a named function. I think it makes it a bit more readable. It also allows us lớn reuse this function wherever we want. Yay functional programming!
let matching function isJediAlsoSith(jedi,index,array) if(!sith.includes(jedi)) matching = false jedis.forEach(isJediAlsoSith)
Our solution essentially does the same thing. The only difference is it keeps running until it reaches the kết thúc of the jedis array. For an array of such a small kích cỡ, I doubt that it will make much of a performance difference.
This finally brings us lớn the answer to lớn our question, why can"t we break out of a forEach() loop? It"s because the loop is running that callback function over every thành tựu, so even if you write a return it"s only returning on that instance of the function. It keeps going. In the case of the forEach() function, it doesn"t bởi vì anything with the returned code. Be aware, that is not the case for some of the other Array Methods.
Additionally, because of this, break or continue are not valid statements.
There are quite a few different types of loops. They all have sầu different purposes và I"d recommover looking into lớn each one. You don"t always need a forEach() loop.
forEach() vs map()
Likely, the most common array methods that appear in tutorials are forEach() & map() . The biggest difference between the two is that maps will return a new Array, while a forEach() won"t.
Iterable Object Loops (including Arrays)
for ofThis is the Way
As mentioned earlier by the incredibly sassy MDN docs, choosing the right tool is paramount to lớn success. The number of options may seem a bit overwhelming at first, but I lượt thích lớn take the approach of: "if it works, it"s the right tool."
Generally speaking, you can refactor your code to lớn death, but then you"re just wasting time you could be building stuff. In the case of my interview, I was using the right tool, the wrong way. Had I known remembered that you can"t break out of a forEach loop, things probably would have sầu turned out different