const items = [{
  id: 1,
  name: 'ball'
},{
  id: 2,
  name: 'axe'
}]

//says I want to update item 2
let input = 'laptop', id = 2

updated_item = items.map(o => o.id === id ? ({ ...o, name: input }) : o) });

console.log(updated_item) // worked

but just curious I also know that reduce is the base for map, foreEach and filter, I would want to try to implement above logic using reduce

const updated_item_using_reduce = items.reduce((accum, o, i) => {
  if(o.id === id) {
    //what to do here? change value of name put o into accum? by using push?
  }
  //else have to assign o to accum, but can't use push I think
}, [])

const items = [{
  id: 1,
  name: 'ball'
},{
  id: 2,
  name: 'axe'
}]

//says I want to update item 2
let input = 'laptop', id = 2

updated_item = items.map(o => o.id === id ? ({ ...o, name: input }) : o) });

console.log(updated_item) // worked

but just curious I also know that reduce is the base for map, foreEach and filter, I would want to try to implement above logic using reduce

const updated_item_using_reduce = items.reduce((accum, o, i) => {
  if(o.id === id) {
    //what to do here? change value of name put o into accum? by using push?
  }
  //else have to assign o to accum, but can't use push I think
}, [])

• javascript
• ecmascript-6

• 1 So why exactly can't you use push? – JJJ Commented May 7, 2018 at 5:48
• I don't think reduce is a base for forEach as there is no value returned. It's plain old iteration – Phil Commented May 7, 2018 at 5:49
• @xianshenglu forEach iterates one-by-one as well. – CertainPerformance Commented May 7, 2018 at 5:53

4 Answers 4

Similar to other's answers just more succinct:

items.reduce((accum, o, i) => {
  return [...accum, (o.id === id) ? {...o, name: input} : o];
}, []);

This implementation of Array.map() using Array.reduce() demonstrates how it works. As you can see the reduce only responsibility is to push (or concat) items that the callback returns:

const items = [{
  id: 1,
  name: 'ball'
},{
  id: 2,
  name: 'axe'
}]

//says I want to update item 2
let input = 'laptop', id = 2

const map = (arr, cb) => arr.reduce((r, o, i, a) => {
  r.push(cb(o, i, a));
  
  return r;
}, []);

const updated_item = map(items, (o) => o.id === id ? ({ ...o, name: input }) : o);

console.log(updated_item) // worked

You can use push, but like with most reduce functions, you have to make sure to return the accumulator:

const items = [{
  id: 1,
  name: 'ball'
}, {
  id: 2,
  name: 'axe'
}]

//says I want to update item 2
const input = 'laptop';
const id = 2;

const updated_items = items.reduce((accum, item) => {
  accum.push(item.id !== id
    ? item
    : ({ ...item, name: input })
  );
  return accum;
}, []);

console.log(updated_items)

You can try the following:

const items = [{
  id: 1,
  name: 'ball'
},{
  id: 2,
  name: 'axe'
}]

let input = 'laptop', id = 2
const updated_item_using_reduce = items.reduce((accum, o, i) => {
  if(o.id === id) {
    o.name = input;
    accum[i] = o;
  }
  else{
    accum[i] = o;
  }
  return accum
  
}, []);

console.log(updated_item_using_reduce)