JS map return object
JavascriptDictionaryJavascript Problem Overview
I got this array,
var rockets = [
{ country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launches:4 },
{ country:'Japan', launches:3 }
];
What do I need to do to return an array mapped, that adds 10 to each
> launches
value, here my first approach,
var launchOptimistic = rockets.map(function(elem){
// return elem.launches+10;
return (elem.country, elem.launches+10);
});
console.log(launchOptimistic);
Javascript Solutions
Solution 1 - Javascript
Use .map without return in simple way. Also start using let and const instead of var because let and const is more recommended
const rockets = [
{ country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launches:4 },
{ country:'Japan', launches:3 }
];
const launchOptimistic = rockets.map(elem => (
{
country: elem.country,
launches: elem.launches+10
}
));
console.log(launchOptimistic);
Solution 2 - Javascript
You're very close already, you just need to return the new object that you want. In this case, the same one except with the launches value incremented by 10:
var rockets = [
{ country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launches:4 },
{ country:'Japan', launches:3 }
];
var launchOptimistic = rockets.map(function(elem) {
return {
country: elem.country,
launches: elem.launches+10,
}
});
console.log(launchOptimistic);
Solution 3 - Javascript
If you want to alter the original objects, then a simple Array#forEach
will do:
rockets.forEach(function(rocket) {
rocket.launches += 10;
});
If you want to keep the original objects unaltered, then use Array#map
and copy the objects using Object#assign
:
var newRockets = rockets.map(function(rocket) {
var newRocket = Object.assign({}, rocket);
newRocket.launches += 10;
return newRocket;
});
Solution 4 - Javascript
The cleanest solution is destructuring.
const rockets = [
{ country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launche`enter code here`s:4 },
{ country:'Japan', launches:3 }
];
const updated = rockets.map(rocket=>{
return {...rocket,launches:rocket.launches+10}
});
Solution 5 - Javascript
map
rockets and add 10 to its launches:
var rockets = [
{ country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launches:4 },
{ country:'Japan', launches:3 }
];
rockets.map((itm) => {
itm.launches += 10
return itm
})
console.log(rockets)
If you don't want to modify rockets
you can do:
var plusTen = []
rockets.forEach((itm) => {
plusTen.push({'country': itm.country, 'launches': itm.launches + 10})
})
Solution 6 - Javascript
Considering objects can have many properties, It would be better to spread the object's content and to reassign specific properties, to achieve code that is more succinct.
const rockets = [
{ country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launches:4 },
{ country:'Japan', launches:3 }
];
const launchOptimistic = rockets.map(function(elem) {
return {
...elem,
launches: elem.launches+10,
}
});
console.log(launchOptimistic);
Solution 7 - Javascript
Solution (One Liner) With a Fresh Example
Suppose the clients in your bank (including you, of course) got a bonus.
let finance = [
{funds:10050, client_id: 1020},
{funds:25000, client_id: 77},
{funds:90000, client_id: 442}
];
finance = finance.map(({funds, client_id}) => {funds = funds + 2000; return {funds, client_id}});
↑ Test & copy as is to Chrome / Firefox / Edge DevTools console ↑
This technique called Destructuring Assignment
> The destructuring assignment syntax is a JavaScript expression that > makes it possible to unpack values from arrays, or properties from > objects, into distinct variables.