What is the best way to update an array by inserting the new element in specific index when certain condition is met while looping.

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 6, count: 9}
  {item: 4, count: 5}]

I want to loop the exampleArray while keep track of count and insert new element right after when the count is greater than or equal to 10 and then reset the count to 0 for next loop

so the result I want is

const resultArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 'new item 1 as count is over 10', count: 0},
  {item: 3, count: 10},
  {item: 'new item 2 as count is equal to 10', count: 0}, 
  {item: 6, count: 9},
  {item: 4, count: 5}, 
  {item: 'new item 3 as count is > 10, previous two counts (9 + 5 )', count: 0 }]

I tried this

let count = 0
exampleArray.forEach((item, index) => {
 count += item.count

 if(count >= 10) {
  exampleArray.splice(index + 1, 0, {item: 'item to be added', count: 0}
  count = 0
 }
})

>Solution :

Both of these create a new array – if you want to overwrite, use let and asssign back to the original

TJ Suggested map and flat – that is a flatMap

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 4, count: 5}];
  
let count = 0;  
const resultArray = exampleArray.flatMap(item => {
  count += item.count; 
  if (count >= 10) {
    count = 0
    return [item, {item:"new", count:0}]
  }  
  return item;
});

console.log(resultArray);

Reduce

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 4, count: 5}];
  
let count = 0;
const resultArray = exampleArray.reduce((acc,cur) => {
  count += cur.count; 
  acc.push(cur);
  if (count >= 10) {
    count = 0
    acc.push({item:"new", count:0})
  }  
  return acc;
},[]);

console.log(resultArray);