Is there a way to inline this javascript code?

Question

I am using React framework.

Here is what I have:

const myObject = this.props.objects.find(({id}) => ({id} === this.state.selectedObject.id));
const name = !isEmpty(myObject) ? myObject.name : '';

I avoid doing the following:

const name = !isEmpty(this.props.objects.find(({id}) => ({id} === this.state.selectedObject.id))) ? this.props.objects.find(({id}) => ({id} === this.state.selectedObject.id)).name : '';

because it doesn't make sense to execute find() twice. But I'm just wondering if there's some nice syntax that can make this a one-liner that I'm missing.

really {id} === this.state.selectedObject.id? its never true. — Nina Scholz
– Nina Scholz, Commented May 1, 2020 at 15:11
I mean... you could pass the find result as an argument to an IIFE, but that's arguably even less readable that your second formulation: const name = (o=>!isEmpty(o)?o.name:'')(this.props.objects.find(...)) — apsillers
– apsillers, Commented May 1, 2020 at 15:12

palaѕн · Accepted Answer · 2020-05-01 15:37:26Z

6

You can use a combination of object destructuring and default parameter like:

const {name = ''} = this.props.objects.find(({id}) => id === this.state.selectedObject.id) || {};

In case find() method, does not find anything then undefined is returned and that will set name to an empty string.

edited May 1, 2020 at 15:37

answered May 1, 2020 at 15:18

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

3 Comments

Emile Bergeron Over a year ago

You can't destructure undefined, so you'd have to add a || {} at the end.

ronapple14 Over a year ago

I like this answer, but Nina's solution imo is slightly easier to read. Any advantage here vs the answer below? Or a matter of preference?

ronapple14 Over a year ago

congrats, your answer wins :) there seems to be a bug in babel or webpack that prevents me from using optional operator

Nina Scholz · Accepted Answer · 2020-05-01 15:20:21Z

3

You could take a optional chaining operator ?. with a default of an empty string.

const
    name = this.props.objects
        .find(({ id }) => id === this.state.selectedObject.id)
        ?.name || '';

edited May 1, 2020 at 15:20

answered May 1, 2020 at 15:13

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

Is there a way to inline this javascript code?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related