Object Destructuring and Map - Doubt with Arrow Function

Asked

Viewed 53 times

-1

I was watching a lecture on this subject and went to reproduce the code, but with Arrow Function.

It was like this:

const heroes = [
  { name: 'Batman', realName: 'Bruce Wayne' },

  { name: 'Joker', realName: 'Arthur Fleck'}
];

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

console.log (names) // ["Batman","Joker"]

And I decided to try to put with Arrow Function, thinking that it would have the same result, in that part I put this way:

const heroes = [
  { name: 'Batman', realName: 'Bruce Wayne' },

  { name: 'Joker', realName: 'Arthur Fleck'}
];

const names = heroes.map( (name) => {
   return name;
 });
 
console.log(names)

But the result came out different, printou name and realName, the whole object of the two.

javascript
  • 4

    So, Rayane, your question is the same one I had a long time ago, so it’s probably gonna be marked as a repeat question. You can find the post at https://answall.com/questions/472205/diff%C3%a7as-entre-definam%C3%a9todos-de-objects-using-Arrow-Function-e-function

  • 2

    @t_carvalho and @Augusto, I do not believe it is duplicated because the functions are not being used as methods and do not even make use of the this. Actually the problem was using destructuring assignment in function and not use in Arrow Function (as answered below)

  • 2

    I wish I had voted to reopen, but my vote is hammered into Javascript, so it ended up reopening the question at once. I agree with @hkotsubo that the question is not duplicated.

  • Really @hkotsubo, I must have been mistaken when I understood the doubt being related to the question of scope, not destructuring itself. Thanks for the correction!

1 answer

3


The problem isn’t that I’ve changed function for Arrow Function. The problem is the way each one is getting the arguments.

At first you did:

function({ name })

Notice the brackets around name. This is the syntax of destructuring assignment (more specifically, see the section "Unpacking Fields from Objects passed as a Function Parameter").

In this case, it means that if I pass an object as a function argument, the variable name will receive the value of the attribute of the same name of that object. That’s why it only takes the name of each object.

In the Arrow Function you did not put the brackets, ie the parameter name will eventually receive the whole object, so it ends up printing all its attributes.

To solve, just use the destructuring assignment in Arrow Function (that is to say, ({ name }) instead of (name)):

const names = heroes.map( ({ name }) => {
   return name;
 });

Or do it the "traditional" way, without the destructuring assignment, receiving the entire object and returning the desired attribute:

// com arrow function
const names = heroes.map( (obj) => {
   return obj.name;
 });

// ou com function
const names = heroes.map(
  function(obj) {
    return obj.name;
  }
);

Remembering that there are differences between function and Arrow Function (which in this specific case does not apply, but it is important to know not to use them when it is not appropriate), learn more here, here and here.

  • Thank you! You helped me so much

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.