0

Estava vendo uma aula sobre esse assunto e fui reproduzir o código, mas com arrow function.

Estava assim:

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"]

E resolvi tentar colocar com arrow function, pensando que iria ter o mesmo resultado, naquela parte coloquei desse jeito:

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

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

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

Mas o resultado deu diferente, printou name e realName, o objeto inteiro dos dois.

4
  • 4
    Então Rayane, sua dúvida é a mesma que tive há um bom tempo, então provavelmente vai ser marcado como pergunta repetida. Você pode encontrar o post em pt.stackoverflow.com/questions/472205/…
    – t_carvalho
    Commented 9/07/2021 às 23:27
  • 2
    @t_carvalho e @Augusto, não creio ser duplicada porque as funções não estão sendo usadas como métodos e nem sequer fazem uso do this. Na verdade o problema foi usar destructuring assignment na function e não usar na arrow function (conforme resposta abaixo)
    – hkotsubo
    Commented 10/07/2021 às 0:02
  • 2
    Eu queria mesmo é ter votado para reabrir, mas o meu voto é martelado em JavaScript, então acabou reabrindo a pergunta de uma vez. Concordo com o @hkotsubo que a pergunta não é duplicada. Commented 10/07/2021 às 0:24
  • Realmente @hkotsubo, devo ter me enganado quando entendi a dúvida sendo relacionada à questão do escopo, e não do destructuring em si. Obrigado pela correção!
    – t_carvalho
    Commented 11/07/2021 às 13:13

1 Resposta 1

3

O problema não é ter mudado de function para arrow function. O problema é a forma que cada uma está recebendo os argumentos.

Na primeira você fez:

function({ name })

Repare nos colchetes em volta de name. Esta é a sintaxe de destructuring assignment (mais especificamente, veja a seção "Unpacking fields from objects passed as a function parameter").

Neste caso, significa que se eu passar um objeto como argumento da função, a variável name receberá o valor do atributo de mesmo nome daquele objeto. Por isso que ele pega somente o name de cada objeto.

Na arrow function você não colocou os colchetes, ou seja, o parâmetro name acabará recebendo todo o objeto, por isso ele acaba imprimindo todos os seus atributos.

Para resolver, basta usar o destructuring assignment na arrow function (ou seja, ({ name }) em vez de (name)):

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

Ou então, faça do jeito mais "tradicional", sem o destructuring assignment, recebendo todo o objeto e retornando o atributo desejado:

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

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

Lembrando que há diferenças entre function e arrow function (que neste caso específico não se aplica, mas é importante saber para não usá-las quando não for adequado), saiba mais aqui, aqui e aqui.

1
  • Obrigada! Me ajudou muito Commented 10/07/2021 às 1:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .