Functional Programming - Use the map Method to Extract Data from an Array

Tell us what’s happening:

I’m really confused as to how this all works. I’ve looked at the solution and I still don’t get it. In the example, it looks fairly straightforward, but in the actual exercise, its completely different as we’re using strings instead object names, there are two things to iterate rather than on, and needing curly braces to map objects instead of dot notation which I just about understood in the example.

Can anyone break down what is happening or give me clue as to what is going as I’m really struggling to see what is going on

Your code so far


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


// Only change code above this line

Your browser information:

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

Challenge Information:

Functional Programming - Use the map Method to Extract Data from an Array

The map method allows you to iterate over an array and do whatever you want on each item in that array and creates a new array with the desired output without modifying the original array.

So the first question here, how can i write what i want to do on each item ?

The answer is simple, the map method takes a function as a parameter called callback function this function is executed on each item of the array and the resulting output of that function is stored in the new array that map creates.

Now, let’s take a closer look at that function called callback function.
like any function, it can take parameters.

So, what parameters can this callback function have?
Logically, you say that this function is executed on each item of the array. So how does it know the value of that item ?

Here comes the first parameter this function can have: THE ITEM VALUE
( or the item in general cause it can be an object for example )

It can have more parameters related to this item, which i will put the MDN documentation link at the bottom so you can read more.

For Example:

const arr1 = [2, 3, 4, 9];
const arr2 = arr1.map((item) => {
      return item * 2;
});
console.log(arr2);          // output:  [4, 6, 8, 18]
console.log(arr1);          // output:  [2, 3, 4, 9]

As you can see, the arr1 didn’t change at all. Instead, we used the map function to take each item on the arr1 array and then doubled its value and return which indicate that this is the final result that should be stored in the new array arr2 for this item.

Last Example to help you on your issue:

const arrOfObjects = [
    {
     "Title": "Inception",
     "Runtime": "148 min",
     "imdbRating": "8.8"
    }, 
    {
     "Title": "Interstellar",
     "Runtime": "169 min",
     "imdbRating": "8.6"
    }
]

Now I have an array containing two objects. So what if i want to create a new array also with two objects but with the Title and Runtime properties only but with different names for example the Title is name and Runtime is duration ?

Well, as long as it’s an array I can use the map array method as I think now we know how to use it.

const newArr = arrOfObjects.map((movie) => {
     return { 
             "name": movie["Title"],
             "duration": movie["Runtime"]
            }
})
console.log(newArr);      

// output: 
[
  {
    "name": "Inception",
    "duration": "148 min"
  },
  {
    "name": "Interstellar",
    "duration": "169 min"
  }
]

Now you are taking each item in that array which is an object this time not a number.

Read more: MDN documentation

Thanks. I was struggling to work out how to iterate everything into an object, but it seems like the second part of callback function is similar to declaring an normal object (ie using curly braces), just with item["property"] instead of the where the value would usually be. I didn’t know you could do that, as I thought you could only use the parts relevant to the callback, so that’s where I was getting stuck.