How to write arguments in Array map method?

[fluffer]

Hello there, I tried doing this task and my answer was similar to the first solution on FCC. Can somebody explain to me the second solution? Just out of curiousity.

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

Can somebody explain why is it Title: title instead of title: Title?
Or does it mean for each Title equals title and imdbRating equals rating and then return title, rating?

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15

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

Link to the challenge:

freeCodeCamp.org

[staranbeer]

Hi! object destructuring is a way to unpack or retrieve values from an object and assign them to distinct variables.

@fluffer

({ Title: title, imdbRating: rating})

in the statement above, we’re taking an object as an argument into the callback function passed to the map method.

Then looking for a property “Title” which exists within the object, and assigning it to a variable named title and doing the same thing with the imdbRating property.

@fluffer

Can somebody explain why is it Title: title instead of title: Title?

If you do this, the compiler will look for a property named title inside the object and it would result in a reference error.

Here’s an awesome resource if you want to learn more about array or object destructuring.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Hope this helped!

[MatchaCrisp]

Array.map takes in a callback function as its argument, here it is: ({ Title: title, imdbRating: rating }) => ({title, rating}).

Or if you ignore all the words and stuff and look at the curly brackets, which can only mean it defines an object, then you can see it is (obj)=>obj, where it takes in an object, and returns an object.

Now to take a closer look at the object used as the parameter for the callback: { Title: title, imdbRating: rating }. What it means is even though you get a object with however many keys passed in, it only looks for two keys: Title, and imdbRating, and their value which gets assigned to the variable names title and rating respectively. Here is what I mean:

const arrOfObj=[
   {A:'valA1',
    B:'valB1'
    C:'valC1'},
   {A:'valA2',
    B:'valB2',
    C:'valC2'}];

arrOfObj.map(({A:a,B:b})=> console.log(a,b));
//will print 'valA1 valB1' and 'valA2 valB2' and ignore the key C

note how i also assigned the value of key A to the variable a, and value of key B to the variable b. That’s how the console.log know what to print.

now onto the returned object {title, rating}, which looks probably a little odd, since objects are supposed to have key:value pairs and this looks like its only got values. Well in cases where you directly return a numbe of variables within curly brackets, JS actually assigns keys to the values based on their variable name. Here is what I mean.

let num1 = 3;
let num2 = 4;
const toObj=(a,b)=>{
   return {a,b};
}
console.log(toObj(num1,num2));
//prints {a:3,b:4}

This entire thing is called object destructuring and is immensely useful and convenient once you learn it.

[fluffer]

Hi thank you so much! Your explanation is very clear!

[fluffer]

Hi, thanks for your explanation, your example is also very helpful!

[staranbeer]

Don’t mention it! let me know if you need help with anything else

[lasjorg]

Renaming is often used to take less descriptive property names (keys) and give them better names for the context they are used in. Sometimes you also just get poorly named properties from external APIs.

Here is another super simple example.

const user = {
  name: 'John',
  mail: 'john@test.com',
};

function logUser({ name: userName, mail: userEmail }) {
  console.log(`New user ${userName}, signed up with ${userEmail}`); // New user John, signed up with john@test.com
}

logUser(user);