Extract first object from array with es6 array methods

Question

I have this code to get an array of one object:

let selectedShop = initialResultsState.get('products')
        .filter(product => product.shop.selected)

console.log(selectedShop)

result:

Can I extract the object from the array in the same operation by stringing another es6 array method to the end of filter, rather than doing let newVariable = selesctedShop[0]?

I tried to string this to it:

.map(x => {return { shop: x.shop, products: x.products }})

but it is still an array of one object because map always returns a new array.

"rather than doing let newVariable = selesctedShop[0]" --- what's wrong with doing that? — evolutionxbox
– evolutionxbox, Commented Jun 22, 2017 at 8:46

Daniel Mizerski · Accepted Answer · 2017-06-22 09:14:58Z

7

Two basic ways:

First way is shift'ing:

Array method, you can use Array.prototype.shift().

let selectedShop = initialResultsState.get('products')
    .filter(product => product.shop.selected)
    .shift();

Second way is an assignment:

You can do this, by destructuring assignment. In your case:

let [selectedShop] = initialResultsState.get('products')
    .filter(product => product.shop.selected);

This is available in ES6, supported in major browsers without transpiling.

But you could see another approach, in answers (Mikael Lennholm's answer) is Array.prototype.find(). This can be more performance-effective.

edited Jun 22, 2017 at 9:14

answered Jun 22, 2017 at 8:51

Daniel Mizerski

1,1311 gold badge8 silver badges24 bronze badges

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

5 Comments

Werner Over a year ago

pop() returns (and removes) the last and not the first item. shift gets (and removes) the first one.

Thomas Urban Over a year ago

I'd actually advise to use find() instead as this approach tends to waste time and memory on filtering all matching elements first to deliver only one of them. Those iterator methods are fancy, but they tend to ignore frequent waste of memory and time.

Daniel Mizerski Over a year ago

@cepharum yes, but question was Extract first object from array with es6 array methods so I did not recommended Array.prototype.find()

Thomas Urban Over a year ago

@DanielMizerski no problem, your approach is fine, but if someone's reading your answer (the preferred one) it would be helpful to see downsides of this approach and get a hint to stick with the one given by mikael-lennholm below.

Daniel Mizerski Over a year ago

@cepharum I will reference MikaelLennholm approach

Lennholm · Accepted Answer · 2017-06-22 09:09:22Z

5

How about using the find() method instead of filter()? find() always return a single item, not wrapped in an array, unless it doesn't find any item, in which case it returns undefined

let selectedShop = initialResultsState.get('products')
    .find(product => product.shop.selected)

It's also a lot more efficient since it actually stops iterating over the array as soon as it has found an item. filter() will always iterate over the entire array which is a waste if you're only interested in the first relevant item anyway.

edited Jun 22, 2017 at 9:09

answered Jun 22, 2017 at 8:51

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

Collectives™ on Stack Overflow

Extract first object from array with es6 array methods

2 Answers 2

Two basic ways:

First way is shift'ing:

Second way is an assignment:

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Two basic ways:

First way is shift'ing:

Second way is an assignment:

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related