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;
});
}
Share
Improve this question
asked Apr 7, 2021 at 18:36
BryanBryan
3,00914 gold badges67 silver badges105 bronze badges
3
-
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
Reset to default 4Actually 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