6

Estou tentando criar uma função map, cujo array e propriedade a ser retornada sejam dinâmicas, isto é, possam ser passadas como parâmetro de uma função. Vamos tomar o array abaixo como caso de uso.

const students = [
    { name: 'Anna', grade: 6 },
    { name: 'John', grade: 4 },
    { name: 'Maria', grade: 9 }
];

Minha primeira tentativa foi tornar apenas o array dinâmico, através de uma closure. Cheguei a este resultado, que funcionou:

let teste = array => array.map(({ name }) => name);

Nesse caso, eu posso passar qualquer array que tenha a propriedade name que ela será retornada.

Agora, eu preciso que a propriedade também seja dinâmica e possa ser chamada a partir do parâmetro da função. Algo mais ou menos assim: getProperties(students, 'name').

Fiz o seguinte código, mas não funcionou:

const getProperties = (array, prop) => array.map(({ prop }) => prop);

O retorno foi [ undefined, undefined, undefined ]. Podem me ajudar a resolver esse problema de como tornar a propriedade dinâmica também?

1
  • Apenas um adendo, vc poderia declarar como function getProperties(array, prop) { return array.map(etc...); } - não há nenhuma vantagem em usar arrow function nesse caso (e na minha opinião, o código fica até um pouco mais difícil de ler, e sem nenhum ganho de fato): stackoverflow.com/q/34361379 | stackoverflow.com/a/33040926
    – hkotsubo
    Commented 14/04/2020 às 13:59

3 Respostas 3

5

Com este código que você tentou utilizar:

const getProperties = (array, prop) => array.map(({ prop }) => prop);

Você está mapeando o array do primeiro parâmetro para um outro array que irá ser formado através da propriedade prop do array que você passar. Da forma como você fez a desestruturação, ela não é dinâmica, mas sim estática.

Veja, se todos os objetos tivessem a propriedade prop, o seu código funcionaria normalmente:

const students = [
  { prop: 'Anna', grade: 6 },
  { prop: 'John', grade: 4 },
  { prop: 'Maria', grade: 9 }
];

const getProperties = (array) =>
  array.map(({ prop }) => prop);
  
console.log(getProperties(students));

Nesse caso, então, o parâmetro prop nem faz diferença, tanto é que eu o removi.

Se você quiser acessar a propriedade dinamicamente, pode utilizar a notação de colchetes, que te permite esse acesso dinâmico.

Algo assim:

const students = [
  { name: 'Anna', grade: 6 },
  { name: 'John', grade: 4 },
  { name: 'Maria', grade: 9 }
];

const getProperties = (array, prop) =>
  array.map((obj) => obj[prop]);
  
console.log(getProperties(students, 'name'));

Note no código acima que a desestruturação não foi mais utilizada como antes, já que era estática na forma como havia sido utilizada. Você tinha colocado a propriedade prop de forma "hard-coded" no código.

Como alternativa, você ainda pode utilizar a desestruturação utilizando propriedades computadas. Eu expliquei melhor sobre isso nesta resposta.

const students = [
  { name: 'Anna', grade: 6 },
  { name: 'John', grade: 4 },
  { name: 'Maria', grade: 9 }
];

const getProperties = (array, prop) =>
  array.map(({ [prop]: value }) => value);
  //            ↑↑↑↑
  
console.log(getProperties(students, 'name'));

Note, no código acima, que a desestruturação é dinâmica, já que estamos utilizando propriedades computadas.

Eu pessoalmente prefiro a primeira opção — me parece mais clara. Mas como tudo na programação, existem diversas formas para se atingir o mesmo objetivo. Quis demonstrar duas delas. :)

3
  • Obrigado pela resposta. Mas me ajuda a entender porque a notação de ponto não funciona no seu primeiro exemplo. Commented 14/04/2020 às 16:14
  • 1
    Não funciona porque a notação de ponto é estática, mas não dinâmica, compreende? :) Commented 14/04/2020 às 16:34
  • Agora entendi. Obrigado. Commented 14/04/2020 às 17:33
4

Você pode acessar a propriedade da maneira objeto[prop].

Ao tentar usar o ({ prop }) você estará procurando por um atributo chamado prop. Então, como a prop é uma variável, o melhor caminho seria:

  1. Receber como parâmetro do map o objeto inteiro (obj)
  2. Acessar a prop em questão com obj[prop].

const students = [
    { name: 'Anna', grade: 6 },
    { name: 'John', grade: 4 },
    { name: 'Maria', grade: 9 }
];

const getProperties = (array, prop) => array.map((obj) => obj[prop]);

console.log(getProperties(students, 'name'))

console.log(getProperties(students, 'grade'))

3
  • Obrigado. Me ajuda a entender porque a notação de ponto não funcionaria nesse exemplo. Commented 14/04/2020 às 16:14
  • 1
    Conforme documentação, a notação de ponto acessa objeto.nomeDoAtributo, então ao usar o .prop, ele interpretará como prop sendo o nome do atributo, enquanto objeto[nomeDoAtributo] pode receber uma string: objeto['nome'] ou uma variável objeto[prop] Commented 14/04/2020 às 16:33
  • Muito obrigado. Entendi. Commented 14/04/2020 às 17:34
0

O problema do seu exemplo é que o prop como é uma string não referencia diretamente a um nome de atributo do objeto. Você pode tentar fazer assim:

const getProperties = (array, prop) => array.map((element) => element[prop]);
console.log(getProperties);

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 .