Using destructuring in .map

Hej!

Just passed the below challange, but:

I find the included solution #2 from the .map challange challanging to understand. I don’t understand how it evaluates and wanted to see whether there’s anyone that can help me understand it better.

solution #2:

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

I’ve re-read and re-done the destructuring challange from ES6 chapter, but it still doesnt make sense to me unfortunately.

This part says to remove the Title and imbdRating properties from the current object in the array and call them title and rating.

This part says to make a new object with properties that match the title and rating variables.


The () to return an object literal from an arrow function is a bit of notation to be aware of.

5 Likes

Sorry still doesn’t make sense to me im afraid.

How can it remove the Title and imdbRating properties? what does it mean?
How can we use both Title & imdbRating as parameters?

I would like to understand the process and how .map works with the input in a process-like mannar if possible.

The destructing syntax ‘removes’ the values for you. How it works internally isn’t really important. It’s important that the syntax

let { someProperty: someVariable} = myObject

is the same as

let someVariable = myObject.someProperty

This works the same in a function argument

function myCoolFunc({ someProperty: someVariable}) {
  // Code to use someVariable
}

You can do this with multiple properties at once

let { someProperty: someVariable, thisOtherProperty: thatOtherVariable} = myObject
3 Likes

I understand that the syntax you’ve written is the same, what i dont understand is the added complexity which this challange is providing with presenting destructuring to be used as an argument, and effectively providing the .map method with two arguments? or ?

ususally what I’ve seen before in previous challanges is something simple e.g

myArray.map( element => element * 2)

now, we’re suddenly using:

myArray.map(({Title: title, imdbRating: rating}) = ({title,rating}))

I don’t understand how it works and the fact that we’re now using 2 arguments (or parameters? not sure) in the .map function.

the argument is still one, the parameter is still one too, it’s an object, so it can be destructured, instead of bringing the whole object in the function only the two properties that we are interested in are used inside the function

it’s not added complexity, it’s just sintactic sugar to write this in less chracters:

myArray.map(obj => {
   let title = obj.Title;
   let rating = obj.imdbRating;
   return {title, rating}
}

the first three lines become just myArray.map({Title: title, imdbRating: rating}) =>

3 Likes

Map is a method for making a new array from an old one by ‘mapping’ old array elements to new values.

Map takes a function is its argument. This function receives an array element as its argument and returns a new array element.

In this case, the function is written in arrow notation.

So here, the function inside of map takes the old array element, which is an object, destructures it to remove the two desired properties, uses these two properties to make a new object, and returns that new object as the new array element.

3 Likes

I struggled a lot with arrow notation in the ES6 module. Would it be possible for someone to explain to me what the solution for this looks like without arrow notation. The non-compact way, presumably.

Sure. Make a post with your code and I can help you convert it to non-arrow notation.


If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

Reviving because I’m still confused about something else. I understand that we’re using destructuring, but shouldn’t { Title: title, imdbRating: rating } be { title: Title, rating: imdbRating } instead? It’s { property: variable } after all right?

It is {property: variable}. On the left is the name of the property you want to retrieve and on the right is the name of the variable you want to put that value into.