Confusion with - Use the map Method to Extract Data from an Array

JavaScript
1

Tell us what’s happening:

Bit confused on the structure of this .map method. May be I don;t fully understand how arrow functions work but can someone explain what exactly is happening in this function? I understand that the ratings array will take information from watchlist, and the function will iterate over every item of the watchlist array, but what is the function doing?

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

the one below, I also am confused about.

const names = users.map(user => user.name);
console.log(names);

Thanks in advance!

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

Link to the challenge:

2 Likes
2

Remember that arrow function is just another way to define function.

Code above is equivalent of the one below:

const ratings = watchList.map(function (item) {
  return {
    title: item["Title"],
    rating: item["imdbRating"]
  };
});

const names = users.map(function(user) { 
  return user.name;
});

Some confusion might be added when arrow function is using implicit return, like in those two examples.

2 Likes
3

First, I think the title is not good. I think they use the same title for the filter function. The better title would be “Use the map Method to transform an Array into another Array.”

Suppose you want to transform a given array of numbers so a new array has all elements doubled. For example, transform [1, 2, 3, 4, 5] to [2, 4, 6, 8, 10].

const source = [1, 2, 3, 4, 5] //imagine a large array retrieved from a file or fetch request
const dest = source.map(doubleIt)

This map says “apply the function doubleIt to every element and return a new array.” For this map to work correctly, you must pass a compatible function that takes one argument and return a value. You can define the function traditionally like

function doubleIt(x) {
  return x * 2
}

Using an arrow function, we write

const doubleIt = (x) => {
  return x * 2
}

Some there’s one argument and one statement, we can shorten it to

const doubleIt = x => x * 2

Instead of giving a name to a function, we can define anonymous function directly in the map like

source.map(function(x) { return x *2})

or

source.map(x => x*2)

Can you see why we like an arrow function?

Now, an array element could be any valid value, such as an object. So, the users array element could be a user with name, age, address, and phone values.

users = [{'Abe', 20, '123 Maple St', '444-223-9999, {...}, {...}, ...]

If I want to convert this array of objects to an array of just names only, then I can map it with a function that that takes an object and return the name property. So you have

const names = users.map(user => user.name)

Because the users array is an array of object, each element is an object. Here we are use the variable ‘user’ to refer to this one element. You can use any name you want, of course, because it is just the parameter of a function.

const names = users. map(x => x.name)

The first example is slightly more involved, but not much. Instead of simply returning a single value, we want to return each object in watchList to an object of different key name and value. We want to return {title: “The Movie”, rating: 8} from an item. Logically, the converter function would be

item => {title: item['Title'], rating: item['imdbRating']}

but this cause a problem. The braces look like we’re defining a regular function. To make it work, we add parentheses to adhere to the single line arrow function syntax.

2 Likes
4

I see, I guess I need more practice with the arrow function. Thank you!

5

Thank you for the detailed reply! It makes sense now, I just need more practice with arrow functions.

6

thank you. I have just learned that we should add parenthesis when returning literal objects from arrow functions.

7

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