Map with dynamic array and property

Question

I’m trying to create a function map, whose array and property to be returned are dynamic, that is, can be passed as a function parameter. Let’s take the array below as a use case.

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

My first attempt was to make only the array dynamic, through a closure. I arrived at this result, which worked:

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

In this case, I can pass any array that has the property name that she will be returned.

Now, I need the property to also be dynamic and can be called from the function parameter. Something like this: getProperties(students, 'name').

I made the following code, but it didn’t work:

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

The return was [ undefined, undefined, undefined ]. Can help me solve this problem of how to make the property dynamic too?

Answer 1

With this code you tried to use:

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

You are mapping the array from the first parameter to another array which will be formed through ownership prop of array that you pass. The way you did the de-structuring, it is not dynamic, but static.

See, if all objects had the property prop, your code would work normally:

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));

In this case, then, the parameter prop it doesn’t even matter, so much that I removed it.

If you want to access the property dynamically, you can use the bracket notation, that allows you this dynamic access.

Something like that:

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 in the above code that the breakdown was no longer used as before, as it was static in the way it had been used. You had placed the property prop so "hard-coded" in the code.

Alternatively, you can still use de-structuring using computed properties. I explained it better in this reply.

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, in the code above, that structuring is dynamic, since we are using computed properties.

I personally prefer the first option - it seems clearer to me. But like everything else in programming, there are several ways to achieve the same goal. I wanted to demonstrate two of them. :)

Answer 2

You can access the property the way objeto[prop].

When trying to use the ({ prop }) you will be looking for an attribute called prop. So as the prop is a variable, the best way would be:

1. Receive as parameter of map the whole object (obj)
2. Access to prop at issue with 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'))

Answer 3

The problem with your example is that prop as a string does not directly reference an object attribute name. You can try to do so:

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