Say I have the following array, and I want to change the value of a property inside one of the objects:

var array = [{id: 1, exampleBoolean: false}, {id: 2, exampleBoolean: false}];

I've always used map for something like this, but I saw someone use find instead and am curious if that is a legitimate way to do it? The following functions both technically work (at least in Chrome), but I want to know if they're both technically "correct". Reading docs, my interpretation is that you should use map, but it isn't 100% clear to me whether or not I am right.

With find:

changeValueWithFind(id: number) {
  array.find(item => item.id === id).exampleBoolean = true;
}

With map:

changeValueWithMap(id: number) {
    array = array.map(item => {
      if (item.id === id) {
        return {
          ...item,
          exampleBoolean: true,
        }
      }
      return item;
    });
  }

Say I have the following array, and I want to change the value of a property inside one of the objects:

var array = [{id: 1, exampleBoolean: false}, {id: 2, exampleBoolean: false}];

I've always used map for something like this, but I saw someone use find instead and am curious if that is a legitimate way to do it? The following functions both technically work (at least in Chrome), but I want to know if they're both technically "correct". Reading docs, my interpretation is that you should use map, but it isn't 100% clear to me whether or not I am right.

With find:

changeValueWithFind(id: number) {
  array.find(item => item.id === id).exampleBoolean = true;
}

With map:

changeValueWithMap(id: number) {
    array = array.map(item => {
      if (item.id === id) {
        return {
          ...item,
          exampleBoolean: true,
        }
      }
      return item;
    });
  }

• javascript
• arrays

• 5 .map() goes through all entries then creates a new array using the function supplied. .find() locates a specific entry by a predicate and returns it. They are both "legitimate" in the sense that these are both things that the methods are supposed to do. Which one is more appropriate depends on what result you're after. – VLAZ Commented Apr 7, 2021 at 18:40
• So if your goal is to merely change one property in one object, find probably makes more sense? – Bryan Commented Apr 7, 2021 at 18:41
• 1 Yes, most likely. Unless you want to avoid mutating the array or the objects. But most of the time it's going to be fine. – VLAZ Commented Apr 7, 2021 at 18:42

2 Answers 2

Actually using map() in this case would be an anti-pattern. map() is intended to be used to generate a new array processing individually each of the elements in the original one, and not modifying them. In order to go through the elements modifying them I'd remend forEach instead.

The solution with find() in this case is cleaner, but also take into account that find() could return undefined in case the element is not found.

That way, your example could be modified to:

changeValueWithFind(id: number) {
  const myElem = array.find(item => item.id === id);
  if (myElem) {
    myElem.exampleBoolean = true
  }
}

In my opinion in that case you need use the find(). Doesn’t see any reason to use map() here.

When to use map? .map() when you want to transform elements in an array. When to use find? .find() When you want to select a single element from an array.

More essential info:

https://medium./@JeffLombardJr/understanding-foreach-map-filter-and-find-in-javascript-f91da93b9f2c