Simplify JavaScript map function

Question

Is there a way that I can simplify this code?

I was thinking if there is a way to set { ...filterItem, type: 'chip' } as the parameter in map function instead of creating a const that will be returned in each state.

Is this type of syntax possible to do? If so, is there a specific term for it?

filtersToUse = filtersToChip.map((filterItem) => {
    const filterItem2 = { ...filterItem, type: 'chip' }

    if (filterItem.id === '12345') {
      return { ...filterItem2, labelOverride: 'new-label' }
    } else if (filterItem.id === '67890') {
      return { ...filterItem2, labelOverride: 'new-label' }
    }

    return filterItem2
})

0stone0 · Accepted Answer · 2022-09-15 16:02:16Z

1

Seems like you want to:

Add type: 'chip' too all the elements
Add labelOverride: 'new-label' if id is 12345 OR 67890

You could do something like:

filtersToUse = filtersToChip.map((filterItem) => ({ 
    ...filterItem, 
    type: 'chip',
    ...([ '12345', '67890'].includes(filterItem.id) ? { labelOverride: 'new-label' } : {}) 
});

Where we use object spreading to add the desired options, if needed

edited Sep 15, 2022 at 16:02

answered Sep 15, 2022 at 15:55

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

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

Comments

Xavier Garnier · Accepted Answer · 2022-09-15 15:57:49Z

0

Couldn't you do this:

filtersToUse = filtersToChip.map((filterItem) => ({
  ...filterItem,
  type: 'chip',
  labelOverride: ['12345', '67890'].includes(filterItem.id)
    ? 'new-label'
    : undefined,
}));

answered Sep 15, 2022 at 15:57

Xavier Garnier

1482 gold badges2 silver badges13 bronze badges

2 Comments

jarmod Over a year ago

May be acceptable though labelOverride: undefined is not strictly the same as the absence of labelOverride.

Xavier Garnier Over a year ago

Yes, you're right. It depends on what the OP wants but I believe it fulfills 99% of the needs and is way more understandable/short than anything else.

Vincent Rouilhac · Accepted Answer · 2022-09-15 15:58:23Z

0

I don't know if that is what you're searching for but i would optimize like that.

const newLabelItemIds = ['12345', '67890'];

const filtersToUse = filtersToChip.map((filterItem) => {
    const label = newLabelItemIds.include(filterItem.id) ? { label: 'new-label' } : {};

    return {
        ...filterItem,
        ...label,
        type: 'chip',
    };
});

answered Sep 15, 2022 at 15:58

Vincent Rouilhac

1556 bronze badges

Collectives™ on Stack Overflow

Simplify JavaScript map function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related