Short circuit Array.forEach like calling break

Question

[1,2,3].forEach(function(el) {
    if(el === 1) break;
});

How can I do this using the new forEach method in JavaScript? I've tried return;, return false; and break. break crashes and return does nothing but continue iteration.

Tumbrel

It is worth noting that while return does indeed continue the iteration, it will skip any code that comes after it in the block. Take this code for instance: [1,2,3].forEach(function(el) { if(el === 2) { console.log(`Match on 2!`); return; } console.log(el); }); .The console.log(el); will be skipped when 2 is matched. – Fdic

There is a simple alternative: for(const e of [1, 2, 3]){ if(e == 2){ break; } console.log(e) } – Kalikalian

Answer 1

There's no built-in ability to break in forEach. To interrupt execution you would have to throw an exception of some sort. eg.

var BreakException = {};

try {
  [1, 2, 3].forEach(function(el) {
    console.log(el);
    if (el === 2) throw BreakException;
  });
} catch (e) {
  if (e !== BreakException) throw e;
}

JavaScript exceptions aren't terribly pretty. A traditional for loop might be more appropriate if you really need to break inside it.

Use Array#some

Instead, use Array#some:

[1, 2, 3].some(function(el) {
  console.log(el);
  return el === 2;
});

This works because some returns true as soon as any of the callbacks, executed in array order, return true, short-circuiting the execution of the rest.

some, its inverse every (which will stop on a return false), and forEach are all ECMAScript Fifth Edition methods which will need to be added to the Array.prototype on browsers where they're missing.

Use Array#every

[1, 2, 3].every(v => {
  if (v > 2) {
    return false // "break"
  }
  console.log(v);
  return true // must return true if doesn't break
});

Bently

As many above have said, this is a technically interesting hack, but since it subverts and confuses the intended meaning of some/every, it is very much a hack. Considered harmful. Using an old-school for and/or prefiltering/slicing your array aren't as sexy, but they're better ideas. – Arteriotomy

You can also try to use ECMAScript2015 new for...of (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) which would do exactly what you are looking for but the drawback is that this solution can cause issues for older browsers. If you are looking for more generic solution that support more than just array, you could look at solution like this (github.com/nbouvrette/forEach) one who can solve all your problems if you are willing to go this route. – Maximamaximal

when using es6, for of might be the best choice, especially if not dealing with arrays. check the other answer below. – To

The use of Array#some is really nice. Firstly its compatible with most browsers including ie9 and firefox 1.5 also works really well. My example use case will be to find the index in an array of ranges[a,b] where a number is between a lower boundary and upper boundary pair, test and return true when found. for..of would be the next best solution though only for newer browsers. – Lissotrichous

Exception handling should NEVER be used as control flow. PERIOD. – Roush

@Roush I wrote an esolang with only one loop construct: forever. All other loop constructs are formed from forever and appropriate iterable exceptions, such as ContinueIteration and StopIteration (which break is a macro to raise). On one hand: never. On the other hand: always. On the gripping hand: sometimes? The "PERIOD" in your comment implies there may be a citation to back up your suggestion? – Shuttlecock

@Roush it depends on the language. In Python it is perfectly acceptable to control flow with exception handling. In fact, __next__() raises StopIteration after generator exhaustion for that reason, as it is generally the best way to detect the end of a generator - it's way better than relying on magic return values. Python's ducktyping and EAFP patterns generally depend on exception handling as a flow control mechanic. – Oblige

Using exception handling as control flow is bad juju. Use exceptions to notify of exceptions and handle them as unexpected results. They are not conditional operators. – Northeastwards

This is a (very) old answer and flings bad practises (one simply does not use exceptions here). Keep scrolling down for better suggestions. – Burschenschaft

Upvoted for the use of "some". I would consider the exception version "bad practice" since it would be throwing an exception for a "normal" condition, thereby irritating those of us who like to debug with "halt on handled exceptions" turned on. – Builtin

Yes, exception handling should not be used as a control flow ... except that try-catch is a construct that is intended to be used with more than just exception. The only problem there is then the BreakException name. JS's try/catch comes from a Lisp legacy, and the WP page on it even says: "This was rapidly used not only for error raising, but for non-local control flow, and thus was augmented by two new keywords, CATCH and THROW" – Gillenwater

I wouldn't use "some" since it was not the intention of the code (bad readability). – Durware

How is this an accepted solution!? Do NOT use exceptions as control flow! – Snowberry

@KarlAdler It probably depends on the task, but I'm leaning towards some/every being a hack in this case. Less readable because it's generally used for different purposes. find() might be a bit more readable. But generally it's best to find the element(s) and do with them what you need (after that). – Redbreast

Answer 2

There is now an even better way to do this in ECMAScript2015 (aka ES6) using the new for of loop. For example, this code does not print the array elements after the number 5:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (const el of arr) {
  console.log(el);
  if (el === 5) {
    break;
  }
}

From the docs:

Both for...in and for...of statements iterate over something. The main difference between them is in what they iterate over. The for...in statement iterates over the enumerable properties of an object, in original insertion order. The for...of statement iterates over data that iterable object defines to be iterated over.

Need the index in the iteration? You can use Array.entries():

for (const [index, el] of arr.entries()) {
  if ( index === 5 ) break;
}

Lungki

@superhero You can get the index of the element in a for...of loop, you just have to use entries. for (const [index, element] of someArray.entries()) { // ... } – Stabilize

isn't it recommended not to use for...in with arrays ? – Lovett

@emostafa You are correct about for in loops not being recommended for arrays, but this is approach actually uses a for of loop. – Lungki

This is "for of", and this is a really clean solution... but this is also an ES6 feature, so just be aware that this will only work if your environment is setup for ES6. – Anticathexis

I find myself using this solution a lot, and I use it for objects as well. With objects, you can do Object.entries(myObject) and then use it exactly like you use the for..in for the array. Note that JS arrays are basically objects under the hood: blog.niftysnippets.org/2011/01/myth-of-arrays.html – Arachne

How exactly does it answer the question? – Nanine

A simple for loop is still faster than the better way. – Nanine

Answer 3

You can use every method:

[1,2,3].every(function(el) {
    return !(el === 1);
});

ES6

[1,2,3].every( el => el !== 1 )

for old browser support use:

if (!Array.prototype.every)
{
  Array.prototype.every = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          !fun.call(thisp, this[i], i, this))
        return false;
    }

    return true;
  };
}

more details here.

Dinny

Nice and clean in ES6 now - [1,2,3].every( el => el !== 1 ) – Elicia

@Valdemar, But does every guarantee that calls are made in sequence? – Crelin

@Pacerier, you can see the algorithm in the ES6 specification that the index k starts at 0 and is incremented by 1: http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.every – Chloroplast

@XP1, Are all implementors required to do it that way? – Crelin

@Pacerier, yes, most popular implementations work properly. If you are concerned about embedded implementations, usually it's Opera or webkit. Method every calls callbackfn once for each element present in the array, in ascending order, until it finds one where callbackfn returns false. Also look at step 7. Let k be 0. and 8.e Increase k by 1. – Dinny

Changes the intention of the code. Very bad. – Durware

@Cesar, thanks for replying, but could you please explain, why does it change intention? I thought the intention was to do something and exit forEach cycle in some moment. – Dinny

@Dinny the usage of "some" is finding if some items match some criteria, "every" is intended to find out if all the items in a set match a criteria. On the other hand breaking isn't always connected to a criteria but breaks some logic. Although the example given (if(el === 1)) might be implemented by "some", but I believe the question was about a general case. – Durware

@Cesar, thanks again for the explanation, I agree with you, that the "some" method might be better in a particular case when you are searching for one exact condition. But if you are inverting the condition or say that I want to check that none of the elements equals 1, then the "every" method might be used as well. The question was about breaking the loop, both of these methods are suitable there. – Dinny

MDN also has a polyfill: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Wheaton

Answer 4

Quoting from the MDN documentation of Array.prototype.forEach():

There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behaviour, the .forEach() method is the wrong tool, use a plain loop instead. If you are testing the array elements for a predicate and need a boolean return value, you can use every() or some() instead.

For your code (in the question), as suggested by @bobince, use Array.prototype.some() instead. It suits very well to your usecase.

Array.prototype.some() executes the callback function once for each element present in the array until it finds one where callback returns a truthy value (a value that becomes true when converted to a Boolean). If such an element is found, some() immediately returns true. Otherwise, some() returns false. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

Schism

This is the correct answer. 'some' does exactly what a foreach/break would do. It loops until iteration n = true. – Northeastwards

Sonar flags it, not using the returned value from array.some(). The logic is to use it only for looping. – Hardship

Answer 5

Unfortunately in this case it will be much better if you don't use forEach. Instead use a regular for loop and it will now work exactly as you would expect.

var array = [1, 2, 3];
for (var i = 0; i < array.length; i++) {
  if (array[i] === 1){
    break;
  }
}

Ritenuto

It shocks me that the highest vote is the worst implementation possible, compared to the higher performing, less code, and better readability of this correct answer. Throw exception... really? Is the traditional for loop just not kewl enough? – Bozarth

@Bozarth I agree with your statement and used this method, but what really shocks me is there is no way of exiting a forEach without these hacks, now that's bad design. – Sheliasheline

@Bozarth I also agree, but the issue is more with Stack Overflow and its guidelines. The question specifically asks for a solution to break out of an Array.forEach loop. The accepted answer does that... in an incredibly ugly way. Technically this answer is incorrect, even though it achieves the same goal in a tried and true fashion. – Ossified

Answer 6

From your code example, it looks like Array.prototype.find is what you are looking for: Array.prototype.find() and Array.prototype.findIndex()

[1, 2, 3].find(function(el) {
    return el === 2;
}); // returns 2

Shoat

Answer 7

Consider to use jquery's each method, since it allows to return false inside callback function:

$.each([{user: "barney", active: false}, {user: "fred", active: false}],function(e, i) { 
   if (i % 2) return false;
   console.log(e)
})

Lodash libraries also provides takeWhile method that can be chained with map/reduce/fold etc:

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.takeWhile(users, function(o) { return !o.active; });
// => objects for ['barney', 'fred']
 
// The `_.matches` iteratee shorthand.
_.takeWhile(users, { 'user': 'barney', 'active': false });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.takeWhile(users, ['active', false]);
// => objects for ['barney', 'fred']
 
// The `_.property` iteratee shorthand.
_.takeWhile(users, 'active');
// => []

Pluck

Good reason to use jQuery. forEach in native javascript is still lacking. – Irairacund

@AlexGrande jQuery's forEach and JavaScript's forEach are not compatible. – Knighthead

JavaScript is used in many places that jQuery is not an option. – Electrocute

The jQuery code using each is incorrect. It takes an array and a callback. It should rather be something like: $.each(array,function(e, i) { if (i % 2) return false; console.log(e) }); See: jQuery documentation – Berberine

Answer 8

If you would like to use Dean Edward's suggestion and throw the StopIteration error to break out of the loop without having to catch the error, you can use the following the function (originally from here):

// Use a closure to prevent the global namespace from be polluted.
(function() {
  // Define StopIteration as part of the global scope if it
  // isn't already defined.
  if(typeof StopIteration == "undefined") {
    StopIteration = new Error("StopIteration");
  }

  // The original version of Array.prototype.forEach.
  var oldForEach = Array.prototype.forEach;

  // If forEach actually exists, define forEach so you can
  // break out of it by throwing StopIteration.  Allow
  // other errors will be thrown as normal.
  if(oldForEach) {
    Array.prototype.forEach = function() {
      try {
        oldForEach.apply(this, [].slice.call(arguments, 0));
      }
      catch(e) {
        if(e !== StopIteration) {
          throw e;
        }
      }
    };
  }
})();

The above code will give you the ability to run code such as the following without having to do your own try-catch clauses:

// Show the contents until you get to "2".
[0,1,2,3,4].forEach(function(val) {
  if(val == 2)
    throw StopIteration;
  alert(val);
});

One important thing to remember is that this will only update the Array.prototype.forEach function if it already exists. If it doesn't exist already, it will not modify the it.

Visa

Answer 9

Short answer: use for...break for this or change your code to avoid breaking of forEach. Do not use .some() or .every() to emulate for...break. Rewrite your code to avoid for...break loop, or use for...break. Every time you use these methods as for...break alternative God kills kitten.

Long answer:

.some() and .every() both return boolean value, .some() returns true if there any element for which passed function returns true, every returns false if there any element for which passed function returns false. This is what that functions mean. Using functions for what they doesn't mean is much worse then using tables for layout instead of CSS, because it frustrates everybody who reads your code.

Also, the only possible way to use these methods as for...break alternative is to make side-effects (change some vars outside of .some() callback function), and this is not much different from for...break.

So, using .some() or .every() as for...break loop alternative isn't free of side effects, this isn't much cleaner then for...break, this is frustrating, so this isn't better.

You can always rewrite your code so that there will be no need in for...break. You can filter array using .filter(), you can split array using .slice() and so on, then use .forEach() or .map() for that part of array.

Back

using .filter is actually the appropriate solution for a lot of use cases for breaking. – Ginnifer

What about performance? Woudln't filter affect performance if used frequently? – Tingaling

Yes, the filter array prototype can get heavy. I love it, but it could effect performance if it's overused. – Anticathexis

@Tingaling use for...break loop if you need performance. for loop is the most performant iteration tool than .forEach(), .any(), .map(), .filter() etc. – Back

Why is using a table for layout a bad thing if you intend to build a table? Actually, not using a table when needing a table is just like using some, every instead of breaking. The table thing has nothing to do with readability. – Durware

Answer 10

As mentioned before, you can't break .forEach().

Here's a slightly more modern way of doing a foreach with ES6 Iterators. Allows you to get direct access to index/value when iterating.

const array = ['one', 'two', 'three'];

for (const [index, val] of array.entries()) {
  console.log('item:', { index, val });
  if (index === 1) {
    console.log('break!');
    break;
  }
}

Output:

item: { index: 0, val: 'one' }
item: { index: 1, val: 'two' }
break!

Links

• Array.prototype.entries()
• Iterators and generators
• Destructuring assignment

Saltation

Answer 11

Another concept I came up with:

function forEach(array, cb) {
  var shouldBreak;
  function _break() { shouldBreak = true; }
  for (var i = 0, bound = array.length; i < bound; ++i) {
    if (shouldBreak) { break; }
    cb(array[i], i, array, _break);
  }
}

// Usage

forEach(['a','b','c','d','e','f'], function (char, i, array, _break) {
  console.log(i, char);
  if (i === 2) { _break(); }
});

Chromophore

The syntax is similar to [NSArray enumerateObjectsUsingBlock], Thanks! – Yogini

@Drenai the signature is analogous to the native Array.prototype.forEach(). for and break existed long before this question was asked; the OP was looking for that behaviour using, the more functional, forEach. – Chromophore

@Drenai has now deleted their comment (but left the downvote) which mentioned that the signature of this solution is hard to remember and unnecessary when you can solve the problem with for...in and break. – Chromophore

Answer 12

This is just something I came up with to solve the problem... I'm pretty sure it fixes the problem that the original asker had:

Array.prototype.each = function(callback){
    if(!callback) return false;
    for(var i=0; i<this.length; i++){
        if(callback(this[i], i) == false) break;
    }
};

And then you would call it by using:

var myarray = [1,2,3];
myarray.each(function(item, index){
    // do something with the item
    // if(item != somecondition) return false; 
});

Returning false inside the callback function will cause a break. Let me know if that doesn't actually work.

Yip

=== false might be better than == false so you don't have to explicitly return true (or a truthy value) to continue the loop, lest some control path doesn't return a value and the loop breaks unexpectedly. – Southeast

Answer 13

If you don't need to access your array after iteration you can bail out by setting the array's length to 0. If you do still need it after your iteration you could clone it using slice..

[1,3,4,5,6,7,8,244,3,5,2].forEach(function (item, index, arr) {
  if (index === 3) arr.length = 0;
});

Or with a clone:

var x = [1,3,4,5,6,7,8,244,3,5,2];

x.slice().forEach(function (item, index, arr) {
  if (index === 3) arr.length = 0;
});

Which is a far better solution then throwing random errors in your code.

Gonroff

well done :) but if there are some actions after assigning array.length to 0 they will apply in current iteration, so probably it's sometimes better to use return after such assigning – Mathewmathews

This is technically wrong. forEach will still check for the existence of indices 4 through 10. But because they don't exist anymore, nothing is executed for them. However, if the array were to become repopulated prior to the completion of the checks, the callback would be called on the values of the remaining indices. – Tout

Answer 14

Found this solution on another site. You can wrap the forEach in a try / catch scenario.

if(typeof StopIteration == "undefined") {
 StopIteration = new Error("StopIteration");
}

try {
  [1,2,3].forEach(function(el){
    alert(el);
    if(el === 1) throw StopIteration;
  });
} catch(error) { if(error != StopIteration) throw error; }

More details here: http://dean.edwards.name/weblog/2006/07/enum/

Fifi

Don't use exceptions as a control flow statements. Use it for handling unexpected results. – Back

Answer 15

This is a for loop, but maintains the object reference in the loop just like a forEach() but you can break out.

var arr = [1,2,3];
for (var i = 0, el; el = arr[i]; i++) {
    if(el === 1) break;
}

Kim

Answer 16

try with "find" :

var myCategories = [
 {category: "start", name: "Start", color: "#AC193D"},
 {category: "action", name: "Action", color: "#8C0095"},
 {category: "exit", name: "Exit", color: "#008A00"}
];

function findCategory(category) {
  return myCategories.find(function(element) {
    return element.category === category;
  });
}

console.log(findCategory("start"));
// output: { category: "start", name: "Start", color: "#AC193D" }

Nomadize

Answer 17

I use nullhack for that purpose, it tries to access property of null, which is an error:

try {
  [1,2,3,4,5]
  .forEach(
    function ( val, idx, arr ) {
      if ( val == 3 ) null.NULLBREAK;
    }
  );
} catch (e) {
  // e <=> TypeError: null has no properties
}
//

Valdes

Why not just throw BREAK? – Has

You can simply use FOOBARED and it would throw an error. – Crelin

Answer 18

Yet another approach:

var wageType = types.filter(function(element){
  if(e.params.data.text == element.name){
    return element;
  }
});
console.dir(wageType);

Magna

Is this right usage of filter method? I guess callback returns a boolean that regardless of it, callback is called array elements until the last one. – Keepsake

The question says "short circuit", filter does not. – Nanine

Answer 19

Use for of instead forEach.

const timeSlots = [
  "0:00am", "0:30am", "1:00am", "1:30am", "2:00am", "2:30am", "3:00am", "3:30am",
  "4:00am", "4:30am", "5:00am", "5:30am", "6:00am", "6:30am", "7:00am", "7:30am",
  "8:00am", "8:30am", "9:00am", "9:30am", "10:00am", "10:30am", "11:00am", "11:30am",
  "12:00pm", "12:30pm", "1:00pm", "1:30pm", "2:00pm", "2:30pm", "3:00pm", "3:30pm",
  "4:00pm", "4:30pm", "5:00pm", "5:30pm", "6:00pm", "6:30pm", "7:00pm", "7:30pm",
  "8:00pm", "8:30pm", "9:00pm", "9:30pm", "10:00pm", "10:30pm", "11:00pm", "11:30pm"
];

for (let time of timeSlots) {
  if (time === "5:30am") {
    break; // Stop the iteration when you reach "5:30am"
  }
}

Menfolk

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Christy

Answer 20

Use the array.prototype.every function, which provide you the utility to break the looping. See example here Javascript documentation on Mozilla developer network

Belk

Answer 21

Agree with @bobince, upvoted.

Also, FYI:

Prototype.js has something for this purpose:

<script type="text/javascript">
  $$('a').each(function(el, idx) {
    if ( /* break condition */ ) throw $break;
    // do something
  });
</script>

$break will be catched and handled by Prototype.js internally, breaking the "each" cycle but not generating external errors.

See Prototype.JS API for details.

jQuery also has a way, just return false in the handler to break the loop early:

<script type="text/javascript">
  jQuery('a').each( function(idx) {
    if ( /* break condition */ ) return false;
    // do something

  });
</script>

See jQuery API for details.

Footworn

Answer 22

If you want to keep your forEach syntax, this is a way to keep it efficient (although not as good as a regular for loop). Check immediately for a variable that knows if you want to break out of the loop.

This example uses a anonymous function for creating a function scope around the forEach which you need to store the done information.

(function(){
    var element = document.getElementById('printed-result');
    var done = false;
    [1,2,3,4].forEach(function(item){
        if(done){ return; }
        var text = document.createTextNode(item);
        element.appendChild(text);
        if (item === 2){
          done = true;
          return;
        }
    });
})();

<div id="printed-result"></div>

My two cents.

Caul

Answer 23

If you need to break based on the value of elements that are already in your array as in your case (i.e. if break condition does not depend on run-time variable that may change after array is assigned its element values) you could also use combination of slice() and indexOf() as follows.

If you need to break when forEach reaches 'Apple' you can use

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var fruitsToLoop = fruits.slice(0, fruits.indexOf("Apple"));
// fruitsToLoop = Banana,Orange,Lemon

fruitsToLoop.forEach(function(el) {
    // no need to break
});

As stated in W3Schools.com the slice() method returns the selected elements in an array, as a new array object. The original array will not be changed.

See it in JSFiddle

Hope it helps someone.

Mandatory

Answer 24

Why don't you try wrapping the function in a Promise?

The only reason I bring it up is that I am using a function in an API that acts in a similar manner to forEach. I don't want it to keep iterating once it finds a value, and I need to return something so I am simply going to resolve a Promise and do it that way.

traverseTree(doc): Promise<any> {
  return new Promise<any>((resolve, reject) => {
    this.gridOptions.api.forEachNode((node, index) => {
    //the above function is the one I want to short circuit.
      if(node.data.id === doc.id) {
        return resolve(node);
      }
    });
  });
}

Then all you need to do is do something with the result like

this.traverseTree(doc).then((result) => {
   this.doSomething(result);
});

My above example is in typescript, simply ignore the types. The logic should hopefully help you "break" out of your loop.

Ashantiashbaugh

Answer 25

The answer is, a bit counter intuitively, you don't actually have to!

There are alternative solutions that will make your code look much neater as well, a win-win situation.

By filtering the array before applying your forEach, the break/return early won't be necessary.

function isOne(num) { 
    return num === 1; 
}

function processElement(num, index) { 
    console.log(num, index);
} 

[1, 2, 3, 4, 2, 5].filter(isOne)
                  .forEach(processElement); 

If necessary, you can map your elements to add on some additional information:

function doPreCalculation(num) { 
    return num / 2;
}

[1, 2, 3, 4, 2, 5].map(doPreCalculation)
                  .filter(isOne)
                  .forEach(processElement); 

You can use these methods on Iterators aswell. Collections like NodeList can be turned into an Iterator with NodeList.values().

Bacteroid

This isnt true for things like NodeList where forEach exists but filter and map do not – Myxomycete

Answer 26

This isn't the most efficient, since you still cycle all the elements, but I thought it might be worth considering the very simple:

let keepGoing = true;
things.forEach( (thing) => {
  if (noMore) keepGoing = false;
  if (keepGoing) {
     // do things with thing
  }
});

Campbellbannerman

continue is a keyword, your code is a syntax error. – Has

Given that you're using ES6 anyway, you should just switch to a for of loop and break; from that as usual. – Has

fixed, and true -- but was mostly using es6 for brevity – Campbellbannerman

Answer 27

you can follow the code below which works for me:

 var     loopStop = false;
YOUR_ARRAY.forEach(function loop(){
    if(loopStop){ return; }
    if(condition){ loopStop = true; }
});

Ewall

Why the -1? it isn't uglier than catching an exception, that is a bigger hack IMHO. – Sousa

Answer 28

I know it not right way. It is not break the loop. It is a Jugad

let result = true;
[1, 2, 3].forEach(function(el) {
    if(result){
      console.log(el);
      if (el === 2){
        result = false;
      }
    }
});

Pinnati

Answer 29

Breaking out of built-in Array.prototype.map function esp in React

The key thing to note here is the use of statement return to BREAK

let isBroken = false;

colours.map(item => {
    if (isBroken) {
        return;
    }
    if (item.startsWith("y")) {
        console.log("The yessiest colour!");
        isBroken = true;
        return;
    }
});

More information here: https://www.codegrepper.com/code-examples/javascript/break+out+of+map+javascript

Bartholomew

Answer 30

In fact, I don't understand the reward for this old question. But if you really want to interrupt the foreach cycle, using only the foreach cycle, you can use the second parameter of the method to save the original array after its zeroing. Something like this:

let array = [1, 2, 3];
array.forEach(function(el) {
    console.log(el);
    if(el === 1) {
        array = [...this];
        this.length = 0;
    }
}, array);
console.log(array);

P.S. I am in no way not advise that this should be done. On the contrary, I advise you to bypass my answer and use the previous best suggestions. Best regards.

Facility

Answer 31

You can create a variant of forEach that allows for break, continue, return, and even async/await: (example written in TypeScript)

export type LoopControlOp = "break" | "continue" | ["return", any];
export type LoopFunc<T> = (value: T, index: number, array: T[])=>LoopControlOp;

Array.prototype.ForEach = function ForEach<T>(this: T[], func: LoopFunc<T>) {
    for (let i = 0; i < this.length; i++) {
        const controlOp = func(this[i], i, this);
        if (controlOp == "break") break;
        if (controlOp == "continue") continue;
        if (controlOp instanceof Array) return controlOp[1];
    }
};

// this variant lets you use async/await in the loop-func, with the loop "awaiting" for each entry
Array.prototype.ForEachAsync = async function ForEachAsync<T>(this: T[], func: LoopFunc<T>) {
    for (let i = 0; i < this.length; i++) {
        const controlOp = await func(this[i], i, this);
        if (controlOp == "break") break;
        if (controlOp == "continue") continue;
        if (controlOp instanceof Array) return controlOp[1];
    }
};

Usage:

function GetCoffee() {
    const cancelReason = peopleOnStreet.ForEach((person, index)=> {
        if (index == 0) return "continue";
        if (person.type == "friend") return "break";
        if (person.type == "boss") return ["return", "nevermind"];
    });
    if (cancelReason) console.log("Coffee canceled because: " + cancelReason);
}

Doi

This would require anyone to get back and read the Array prototype which seems not trivial and a waste of time – Arezzini

No, the "continue", "break", and "return" strings/operators are processed within the ForEach function (it's not the generic forEach function) -- the caller does not need to read anything on the Array prototype. That said, I don't actually use the solution above in production code -- it's just showing how one could accomplish those various operators within a forEach-like function, if they wished to. – Doi

Yes. And still - if I would encounter this - it would not be clear at first look. – Arezzini

Answer 32

const Book = {"Titles":[                          
    {"Book3" : "BULLETIN 3"},
    {"Book1" : "BULLETIN 1"},
    {"Book2" : "BULLETIN 2"}    
]}

const findbystr = function(str) { 
    Book.Titles.forEach(function(data) { 
        if (typeof data[str] != 'undefined') {
            return data[str];
        } 
    }, str) 
}

book = findbystr('Book1');

console.log(book);

Cammi

I like this approach (I've edited the code so that the value is immediately returned from the function when found) - if you were to write up how the return within the forEach has the effect of a break statement you'd probably accrue some up votes for this option. – Oddball

Answer 33

I use return false and it works for me.

Contemporaneous