ECMAScript 2018 Standard Method
You would use object spread:
let merged = {...obj1, ...obj2};
merged
is now the union of obj1
and obj2
. Properties in obj2
will overwrite those in obj1
.
/** There's no limit to the number of objects you can merge.
* Later properties overwrite earlier properties with the same name. */
const allRules = {...obj1, ...obj2, ...obj3};
Here is also the MDN documentation for this syntax. If you're using babel you'll need the babel-plugin-transform-object-rest-spread plugin for it to work.
ECMAScript 2015 (ES6) Standard Method
/* For the case in question, you would do: */
Object.assign(obj1, obj2);
/** There's no limit to the number of objects you can merge.
* All objects get merged into the first object.
* Only the object in the first argument is mutated and returned.
* Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);
(see MDN JavaScript Reference)
Method for ES5 and Earlier
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
Note that this will simply add all attributes of obj2
to obj1
which might not be what you want if you still want to use the unmodified obj1
.
If you're using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty
, but that code will work for 99% of cases.
Example function:
/**
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
* @param obj1
* @param obj2
* @returns obj3 a new object based on obj1 and obj2
*/
function merge_options(obj1,obj2){
var obj3 = {};
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
return obj3;
}
Modern browsers have Array#includes
, which does exactly that and is widely supported by everyone except IE:
console.log(['joe', 'jane', 'mary'].includes('jane')); //true
You can also use Array#indexOf
, which is less direct, but doesn't require polyfills for outdated browsers.
console.log(['joe', 'jane', 'mary'].indexOf('jane') >= 0); //true
Many frameworks also offer similar methods:
- jQuery:
$.inArray(value, array, [fromIndex])
- Underscore.js:
_.contains(array, value)
(also aliased as _.include
and _.includes
)
- Dojo Toolkit:
dojo.indexOf(array, value, [fromIndex, findLast])
- Prototype:
array.indexOf(value)
- MooTools:
array.indexOf(value)
- MochiKit:
findValue(array, value)
- MS Ajax:
array.indexOf(value)
- Ext:
Ext.Array.contains(array, value)
- Lodash:
_.includes(array, value, [from])
(is _.contains
prior 4.0.0)
- Ramda:
R.includes(value, array)
Notice that some frameworks implement this as a function, while others add the function to the array prototype.
Best Answer
After the first iteration your're returning a number and then trying to get property
x
of it to add to the next object which isundefined
and maths involvingundefined
results inNaN
.try returning an object contain an
x
property with the sum of the x properties of the parameters:Explanation added from comments:
The return value of each iteration of
[].reduce
used as thea
variable in the next iteration.Iteration 1:
a = {x:1}
,b = {x:2}
,{x: 3}
assigned toa
in Iteration 2Iteration 2:
a = {x:3}
,b = {x:4}
.The problem with your example is that you're returning a number literal.
Iteration 1:
a = {x:1}
,b = {x:2}
,// returns 3
asa
in next iterationIteration 2:
a = 3
,b = {x:2}
returnsNaN
A number literal
3
does not (typically) have a property calledx
so it'sundefined
andundefined + b.x
returnsNaN
andNaN + <anything>
is alwaysNaN
Clarification: I prefer my method over the other top answer in this thread as I disagree with the idea that passing an optional parameter to reduce with a magic number to get out a number primitive is cleaner. It may result in fewer lines written but imo it is less readable.