I have an array of objects, similar to this:
fruits = [
{ name: apple, color: red }, {name: lemon, color: yellow } etc.
]
I'm trying to use map to get a new array of just the colors, such as
fruitColors = ['red', 'yellow']
I'm kinda new to ES6, what's the syntax for this?
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'lemon', color: 'yellow' }
];
console.log(fruits.map(fruit => fruit.color));
// OR EVEN SHORTER USING DESTRUCTURING
console.log('USING DESTRUCTURING');
console.log(fruits.map(({color}) => color));
You can just return the .color property from the map:
const fruitColors = fruits.map(f => f.color);
Also using lodash or underscore you can achieve the same by:
const fruitColors = _.map(fruits, 'color');
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
So, basically it goes like this:
let colorsArray = fruits.map( (obj) => {
return obj.color;
}
in es6, when you have an annonymous function with only a return statement you can omit the function square brackets, omit the arguments normal brackets (assuming you have only one argument, which u do in this case) and the return statement, which also makes it possible to write it all on the same line without losing readability, so it becomes:
let colorsArray = fruits.map( obj => obj.color );
If you're not familiar with the arrow function syntax, I advise reading more about it (here is a nice start).
