Break out of map

Question

so i have this problem where if the value in the array is higher than entered value it should do something and then stop the loop and don't touch the remaining values in the array.. Here's the code so far:

const percentages = [];
let enteredValue = parseInt(event.target.value, 10);

range.map((rangeValue, i) => {
  if (rangeValue <= enteredValue) {
    percentages.push(100);
    enteredValue = enteredValue - rangeValue;
  } else {
    percentages.push(enteredValue * 100 / (rangeValue));

    return;
  }
});

https://stackoverflow.com/questions/12260529/break-statement-in-javascript-array-map-method — Willem van der Veen, Apr 08 '18 at 12:47
Possible duplicate of [Break statement in javascript array map method](https://stackoverflow.com/questions/12260529/break-statement-in-javascript-array-map-method) — Jared Smith, Apr 08 '18 at 12:51

score 21 · Answer 1 · answered Apr 08 '18 at 12:56

Using .some you can get iteration functionally similar to .forEach, map or for loop but with the ability to break through return instead.

range.some(function(rangeValue , i) {
  if (rangeValue <= enteredValue) {
    percentages.push(100);
    enteredValue = enteredValue - rangeValue;
    return true
  }
   percentages.push(enteredValue * 100 / (rangeValue));
});

Read more about .some in es6 here

score 7 · Answer 2 · answered Apr 08 '18 at 12:48

Just use a good old for loop:

 const percentages = [];
 let enteredValue = parseInt(event.target.value, 10);

 for(const range of ranges) {
   percentages.push(Math.min(100, (enteredValue / range) * 100));
   enteredValue -= range;
   if(enteredValue <= 0) break;
 }

score 3 · Answer 3 · answered Apr 08 '18 at 13:06

The other answers are perfectly sufficient. However, I would like to add that the map function isn't best used for performing iterations. What the map function does is perform the as argument passed in callback on every element of the array. It then returns the new array. So map is more usefull when you are in need of a mutated copy of the Array (e.g. all the elements multiplied by 10).

For your purposes other logic like a regular for loop will be a more elegant solution.

Alex · Answer 4 · 2021-01-11T15:38:59.640

You can use reduce instead of map. The reduce senses a change in the original array.

let enteredValue = parseInt(event.target.value, 10);

const percentages = range
    .slice(0) // if you don't want to mess up the original array
    .reduce((percentages, rangeValue, _, rangeCopyArray) => {
        if (rangeValue <= enteredValue) {
            percentages.push(100);
            enteredValue -= rangeValue;
        } else {
            percentages.push(enteredValue * 100 / rangeValue);
            rangeCopyArray.length = 0; // the loop ends here
        }
        return percentages;
    }, [])

or shorter but less clear

const percentages = [...range].reduce(({p, eV}, rV, _, arr) => ({
    eV: eV-rV, 
    p: [...p, rV <= eV ? 100 : eV*100/rV + (arr.length = 0)]
}), {p: [], eV: parseInt(event.target.value, 10)}).p;

Break out of map

4 Answers4

Linked