Map method to extract data from an array

JavaScript
1

I was working on the “Functional Programming: Use the map Method to Extract Data from an Array” part


const ratings = watchList.map(movie=>({"title":movie.Title,"rating":movie.imdbRating}));

This works and I have completed the exercise. Out of curiosity, I checked the solution in the FCC hint section and came across this code:


const ratings = watchList.map(({ Title: title, imdbRating: rating }) => ({title, rating}));

Can someone explain to me or point me in the relevant direction what the shorthand code means and how it gives me the answer needed?

Thanks.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Use the map Method to Extract Data from an Array

Link to the challenge:

2

I think that’s passing in an object as the arguments and returning just the property values (leaving off the key).

So the callback function inside map() expects something that looks like this {Title: title, imdbRating: rating} and builds up an array of things that look like this: {title, rating}

3

that’s object destructuring

that’s not an array, it’s an object, but if you put a variable inside an object, you will get a key-value pair with key equal the name of thr variable and value equal to value of the variable

4

Hi,

What does the argument {Title: title, imdbRating: rating} mean?

Is it assigning Title & imdbRating values to title & rating for each instance? If so, how am I getting this as the output?

[{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]

I mean how am I getting the paired values like this : {"title":"Inception", "rating":"8.8"}

Why not just Title and imdbRating as args?

5

Yes, exactly this. Title is extracted from each object, and assigned (attached) to a variable title.

Let us expand what the shorthand is doing:

const ratings = watchList.map(myMapFunction);

function myMapFunction(watchListObject) {
  const title = watchListObject.Title;
  const rating = watchListObject.imdbRating;

  return { title: title, rating: rating };
}

**Note: ** { title: title, rating: rating } === { title, rating } (this is another form of destructuring, but in the other way)

Hope this helps

6

Yes. I understand it now.

Thanks for all the help @Sky020, @ilenia, and @CactusWren2020.