Use the filter Method to Extract Data from an Array (doubt)

var filteredList = watchList
  .map(movie => {
    return {
      title: movie.Title,
      rating: movie.imdbRating
    };

The code above is the solution presented on fCC for the challenge in the topic’s title.

Why are the curly braces followed by “return” and another set of curly braces necessary in the callback function both in the .map, as in .filter? Why not the below?

const filteredList = watchList
.map(movie => ({title: movie["Title"], rating: movie["imdbRating"]}))
.filter(movie => movie.rating >= 8)
1 Like

Return and another set of braces aren’t necessary per se, that version is just using explicit return. While second code uses implicit return.

2 Likes

As a note, it’s generally a best practice to filter first when chaining methods. It means that overall you are doing fewer computations when you filter first.

2 Likes

Good point. Thanks Jeremy

1 Like

Thank you, sanity .!

1 Like

I am having a hard time understanding why the alias destructuring sequence of
({title: movie[‘Title’]})

is reversed from every tutorial I’ve seen which shows:

({movie[‘Title’]: title})

1 Like

Which tutorials are teaching that? It’s backwards.

1 Like

are you maybe thinking of something like
movie['Title'] = title?

it wouldn’t work, you need to create the object here, that is to give a new property to an existing object

2 Likes

How to Use Object Destructuring in JavaScript (dmitripavlutin.com)

const hero = { name: 'Batman', realName: 'Bruce Wayne' };

const { realName: secretName } = hero;
secretName; // => ‘Bruce Wayne’

I think I understand that the syntax is just backward when using an arrow function, but anything you have to add would be appreciated. Thanks for replying.

1 Like

The syntax works roughly the same in both cases:

Making an object in the challenge:

// { propertyName: propertyValue }
{ title: movie[‘Title’] }

Destructuring an object in the linked tutorial:

// { propertyName: variableToBindToPropertyValue }
{ realName: secretName }

The property name always goes on the left. When creating an object, the value to assign to that property for the object goes on the right. When destructuring an object, the variable to bind to the value of that property goes on the right. (i.e. the variable you want to save the value of the property into)

1 Like

Respectfully, I believe title: in the challenge is the alias we are giving the value from movie[‘Title’], and we could make it anything we wish. I’m sorry but it still seems backwards to me.

1 Like
.map(movie => ({title: movie["Title"], rating: movie["imdbRating"]}))

I think your understanding of this line is backwards. This line is making new objects, not destructuring old objects.

The .map() method takes a function as the argument. The input of this function is the original entries of the array that is being mapped. The output is the new array entries.

In this case, we are taking each movie from the old array and making a new object that only has a title and rating.

So the callback function for the map is equivalent to

function transformMovie(oldMovieEntry) {
  const newMovieEntry = {
    title: oldMovieEntry['Title'],
    rating: oldMovieEntry["imdbRating"],
  };
  return newMovieEntry;
};

const filteredList = watchList
  .map(transformMovie)
  .filter(movie => movie.rating >= 8);
1 Like

Thank you for your help. That’s perfect.

2 Likes

Happy to help. Sometimes the terse arrow function notation inside a high order method can be a bit tricky to parse and understand.

2 Likes

I went back and have been doing every single “Basic Data Structures” assignment using arrow functions and callback functions. I definitely have a gap in my knowledge that needs to be closed.

1 Like

I think that’s a good way to practice. My first real programming was in C, so it took me lots of practice to get used to fancy stuff like arrow functions and high order methods.

2 Likes