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

JavaScript
1 
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
2

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
3

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
4

Good point. Thanks Jeremy

1 Like
5

Thank you, sanity .!

1 Like
6

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
7

Which tutorials are teaching that? It’s backwards.

1 Like
8

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
9

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
10

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
11

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
12 
.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
13

Thank you for your help. That’s perfect.

2 Likes
14

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
15

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
16

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
17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.