Chaining on an Array.find() in JavaScript

Question

I am getting into the habit of, depending on the context, converting some of my for loops to use array.find(). In so doing, I'm wondering if there's a way I can chain another operator on after the .find() in order to limit how much I grab from the object.

For instance, see the following:

currentStage = customerDoc.history.find(h => h.completed === false);
currentStageName = currentStage.name;

Since all I really want from here is the value for "currentStage.name", is there a way I can get this by chaining on after my find(), to specify I just want this property? If not, is there another way to do this in one line?

@epascarello As much as I agree, an exception would be thrown if find() doesn't find anything. — zero298
– zero298, Commented Jul 25, 2019 at 19:07

Code Maniac · Accepted Answer · 2019-07-25 19:10:22Z

5

Yes you can like this, notice the use of || {} to avoid exception in case the find returns undefined

currentStage = (customerDoc.history.find(h => h.completed === false) || {}).name

But IMO you should keep it like you have right now, it's readable and easy to maintain

currentStage = customerDoc.history.find(h => h.completed === false);
currentStageName = currentStage && currentStage.name;

edited Jul 25, 2019 at 19:10

answered Jul 25, 2019 at 19:07

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan Over a year ago

Given that .find returns undefined if it can't match anything, it would be good to ensure that currentStage is not undefined. This can be as simple as currentStageName = currentStage && currentStage.name;

Muirik Over a year ago

Thanks, and yes, that's a fair point. Sometimes clarity beats out being hyper-terse.

trincot · Accepted Answer · 2024-11-15 20:47:55Z

5

You could use optional chaining (which was introduced with ECMAScript 2020):

const currentStageName = customerDoc.history.find(h => !h.completed)?.name;

edited Nov 15, 2024 at 20:47

trincot

357k38 gold badges282 silver badges338 bronze badges

answered Jul 25, 2019 at 19:11

Alexandre Lafond

513 bronze badges

Comments

Ori Drori · Accepted Answer · 2019-07-25 19:08:08Z

3

Use short-circuit evaluation to have a default object in case nothing if found, and destructuring to get the property you want. If nothing is found, the result would be undefined:

const { name: currentStageName } = customerDoc.history.find(h => h.completed === false) || {};

answered Jul 25, 2019 at 19:08

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

1 Comment

Nathan Over a year ago

I like the destructuring method better because it keeps it all on one line, the disadvantage is makes for a longer and more complex line of code.

djwx · Accepted Answer · 2021-02-13 02:18:35Z

1

you could also chain a .map onto the find results in order to limit and/or reshape what gets returned by wrapping it in an array (and using filter if no results are found), e.g.

currentStage = [customerDoc.history.find(h => h.completed === false)].filter(h => h != undefined).map(h => ({'name':h.name}))[0]

answered Feb 13, 2021 at 2:18

djwx

111 bronze badge

Collectives™ on Stack Overflow

Chaining on an Array.find() in JavaScript

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related