Let's assume I have two simple objects and I want to create a third one that will be joining their properties. This works perfectly:
(()=>{
const a1 = {a: 2, b: 3}
const b1 = {a: 100, c: 5}
return {...a1, ...b1}
})()
// { a: 100, b: 3, c: 5 }
But it stops working once I try to create a new object derived from b1 using .reduce. For a sake of simplicity let's create a reduce function that simply makes a shallow copy of the b1 object:
let r = (()=>{
const a1 = {a: 2, b: 3}
const b1 = {a: 100, c: 5},
b2 = Object.entries(b1).reduce((acc, [key, value])=>Object.defineProperty(acc, key, {value}), {})
console.log(b2) // {a: 100 c: 5}
return {...a1, ...b2}
})()
console.log(r);// { a: 2, b: 3 }
I have a feeling that there is something about .reduce function that I just don't understand. What can I do to fix this?
By default, properties created with defineProperty are not enumerable, so they won't be included with a spread.
To fix:
b2 = Object.entries(b1).reduce((acc, [key, value]) =>
Object.defineProperty(acc, key, {value, enumerable: true})
, {})
You should mark the property as enumerable
Object.defineProperty(acc, key, {value, enumerable: true});
Why not just using the function Object.assign instead, it's straightforward.
let r = (()=> {
const a1 = {a: 2, b: 3};
const b1 = {a: 100, c: 5};
const b2 = Object.entries(b1).reduce((acc, [key, value]) => Object.assign(acc, {[key]: value}), {})
console.log(b2); // {a: 100 c: 5}
return {...a1, ...b2}
})()
console.log(r); // { a: 2, b: 3 }
One fix could be to use Object.assign to create a copy of b1 like:
let r = (()=>{
const a1 = {a: 2, b: 3}
const b1 = {a: 100, c: 5}
const b2 = Object.assign({}, b1)
console.log(b2) // {a: 100 c: 5}
return {...a1, ...b2}
})()
console.log(r); // { a: 100, b: 3, c: 5 }
Related
Say I have the following array:
let arr = [{a: 1, b: 2}, {a: 2, b: 4}, {a: 8, b: -1}]
I would like to compute the cumulative sum of each key, but I would also like the output to be an array of the same length with the cumulative values at each step. The final result should be:
[{a: 1, b: 2}, {a: 3, b: 6}, {a: 11, b: 5}]
My issue is that I am not able to obtain the array as desired. I only get the final object with this:
let result = arr.reduce((accumulator, element) => {
if(accumulator.length === 0) {
accumulator = element
} else {
for(let i in element){
accumulator[i] = accumulator[i] + element[i]
}
}
return accumulator
}, [])
console.log(result); // {a: 11, b: 5}
What you're after sounds like the scan() higher-order function (borrowing the idea from ramda.js), which allows you to return an accumulated result for each element within your array. The scan method is similar to how the .reduce() method behaves, except that it returns the accumulator for each element. You can build the scan() function yourself like so:
let arr = [{a: 1, b: 2}, {a: 2, b: 4}, {a: 8, b: -1}];
const scan = ([x, ...xs], fn) => xs.reduce((acc, elem) => {
return [...acc, fn(acc.at(-1), elem)];
}, xs.length ? [x] : []);
const res = scan(arr, (x, y) => ({a: x.a+y.a, b: x.b+y.b}));
console.log(res);
You might consider further improvements such as providing an initial value to the scan method (similar to how reduce accepts one). Also, if you need better browser support the .at() method currently has limited browser support, so you may instead consider creating your own at() function:
const at = (arr, idx) => idx >= 0 ? arr[idx] : arr[arr.length + idx];
You can easily achieve the result using reduce as
let arr = [
{ a: 1, b: 2 },
{ a: 2, b: 4 },
{ a: 8, b: -1 },
];
const result = arr.reduce((acc, curr, i) => {
if (i === 0) acc.push(curr);
else {
const last = acc[i - 1];
const newObj = {};
Object.keys(curr).forEach((k) => (newObj[k] = curr[k] + last[k]));
acc.push(newObj);
}
return acc;
}, []);
console.log(result);
Something like this:
const arr = [{a: 1, b: 2}, {a: 2, b: 4}, {a: 8, b: -1}]
const result = arr.reduce((accumulator, element, index) => {
if(accumulator.length === 0) {
accumulator.push(element)
} else {
const sum = {};
for(let i in element) {
sum[i] = element[i] + (accumulator[index - 1][i] || 0)
}
accumulator.push(sum)
}
return accumulator
}, [])
console.log(result);
Another option is keep sum result using a Map, it helps if keys in elements of the array are not always same.
const arr = [{a: 1, b: 2}, {a: 2}, {a: 8, b: -1}];
const map = new Map();
const result = arr.map((element) => {
const sum = {};
for (let i in element) {
sum[i]= element[i] + (map.get(i) || 0);
map.set(i, sum[i]);
}
return sum;
});
console.log(result);
Here is a bit more concise reduce, probably not as readable as a consequence...
array.reduce((y,x,i) => ( i===0 ? y : [...y, {a: x.a + y[i-1].a, b: x.b + y[i-1].b}]),[array[0]])
let array = [{a: 1, b: 2}, {a: 2, b: 4}, {a: 8, b: -1}]
let culm = array.reduce((y,x,i) => ( i===0 ? y : [...y, {a: x.a + y[i-1].a, b: x.b + y[i-1].b}]),[array[0]])
console.log(culm)
Given:
const xs =
[ {a: 1, b: 2}
, {a: 2, b: 4}
, {a: 8, b: -1}];
Define a function sum such as:
const sum = ([head, ...tail]) =>
tail.reduce((x, y) =>
({a: (x.a+y.a), b: (x.b+y.b)}), head);
sum(xs);
//=> {a: 11, b: 5}
Then apply that function in a map on larger slices of xs:
xs.map((_, i, arr) => sum(arr.slice(0, i+1)));
//=> [ {a: 1, b: 2}
//=> , {a: 3, b: 6}
//=> , {a: 11, b: 5}]
function extend(obj1, obj2) {
var obj2Keys = Object.keys(obj2);
var obj2Values = Object.values(obj2);
var obj1Keys = Object.keys(obj1);
var obj1Values = Object.keys(obj1);
var newObj = {};
for(var i=0; i<obj1Keys.length; i++) {
if(obj1Keys[i] !== obj2Keys[i]) {
}
}
}
var obj1 = {
a: 1,
b: 2
};
var obj2 = {
b: 4,
c: 3
};
extend(obj1, obj2);
console.log(obj1); // --> {a: 1, b: 2, c: 3}
console.log(obj2); // --> {b: 4, c: 3}
/*
1. Add any keys that are not in the 1st object.
2. If the 1st object already has a given key, ignore it (do not
overwrite the property value).
3. Do not modify the 2nd object at all.
*/
Hey guys, trying to figure this one out. I'm sure i'm doing this the most inefficient way. I'm struggling to compare indexes of these objects.. Any help?? I was using for in loops originally but I couldn't conceptually understand what I was doing lol. Kinda stuck at this point.
const firstObject = {a:1,b:2,c:3}
const secondObject = {a:11,b:22,c:33,d:44}
var newObject = {...secondObject,...firstObject}
console.log(newObject)
result:
{"a":1,"b":2,"c":3,"d":44}
Get keys of obj2
Iterate over them using the for-loop
In each iteration, if obj1 does not have this key, and the record to it from obj2
function extend (obj1, obj2) {
const obj2Keys = Object.keys(obj2);
for(let i = 0; i < obj2Keys.length; i++) {
const currentKey = obj2Keys[i]
if(!obj1[currentKey]) {
obj1[currentKey] = obj2[currentKey];
}
}
}
const obj1 = { a: 1, b: 2 }; const obj2 = { b: 4, c: 3 };
extend(obj1, obj2);
console.log(obj1); // --> {a: 1, b: 2, c: 3}
console.log(obj2); // --> {b: 4, c: 3}
Another way using .forEach:
function extend (obj1, obj2) {
Object.keys(obj2).forEach(currentKey => {
if(!obj1[currentKey]) {
obj1[currentKey] = obj2[currentKey];
}
});
}
const obj1 = { a: 1, b: 2 }; const obj2 = { b: 4, c: 3 };
extend(obj1, obj2);
console.log(obj1); // --> {a: 1, b: 2, c: 3}
console.log(obj2); // --> {b: 4, c: 3}
Use the spread syntax to combine the objects. The spread syntax basically inserts the objects key/value pairs wherever you write it, so you're creating a new object with {...obj1, ...obj2}. If there are pairs with duplicate keys, the pair from the second object will be selected.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
let obj1 = {a: 1, b: 2}
let obj2 = {b: 4, c: 3}
let obj3 = {...obj2, ...obj1}
console.log(obj3)
As always I will explain my problem by example (that I solved but its a lot of code and its ugly, that's why I'm looking for a better solution). I'm trying to look at an object like this:
const object1 = {
a: {a:1},
b: 2,
c: 3,
d: 4,
};
I want to check if this object has any of the following properties [a,f] and if have one of them to create a new object with these properties
const object2 = {
a: {a:1},
};
const object1 = {
a: {a:1},
b: 2,
c: 3,
d: 4,
}
const arrOfItem = ['a', 'd']
const newObj = {}
for(let item in object1) {
if(arrOfItem.includes(item)) {
newObj[item]= object1[item]
}
}
console.log(newObj)
see if this works for you,
function makeObject (properties) {
const originalObject = {
a: {a:1},
b: 2,
c: 3,
d: 4,
};
let newObject = {}
properties.forEach(property => {
if(originalObject.hasOwnProperty(property)) {
newObject[property] = originalObject[property];
}
});
return newObject;
}
pass the properties as an array of strings to makeObject function
const d = ['a', 'f', 'd']
const object1 = {
a: {a:1},
b: 2,
c: 3,
d: 4,
};
const object2 = d.reduce((acc, ele) => {
if(object1[ele] !== undefined) acc[ele] = object1[ele];
return acc;
}, {});
console.log(object2);
How to fully copy / overwrite an object using Object.assign()?
If there would be another approach, it would be highly appreciated. :)
The purpose is to update the existing object to its new value.
Below is my code snippet and the expected result should be the same as the value of object2 only.
Expected result: { a: 8, b: 7 }
const object1 = {
a: 1,
b: 2,
c: {
d: 3
}
};
const object2 = {
a: 8,
b: 7
};
Object.assign(object1, object2);
console.log(object1);
For keeping the same object reference, you could remove all properties in advance and then assign the wanted properties with Object.assign.
const object1 = { a: 1, b: 2, c: { d: 3 } };
const object2 = { a: 8, b: 7 };
Object.assign(
Object.keys(object1).reduce((o, k) => (Reflect.deleteProperty(o, k), o), object1),
object2
);
console.log(object1);
IE
var object1 = { a: 1, b: 2, c: { d: 3 } },
object2 = { a: 8, b: 7 };
Object.keys(object2).reduce(
function (object, key) {
object[key] = object2[key];
return object;
},
Object.keys(object1).reduce(function (object, key) {
delete object[key];
return object;
}, object1)
);
console.log(object1);
If you want to override the object1 properties with those from object2, you need to do it like this:
object1 = Object.assign({}, object2);
But with this you need to declare object1 with var keyword so you can assign a new value to it.
Demo:
var object1 = {
a: 1,
b: 2,
c: {
d: 3
}
};
const object2 = {
a: 8,
b: 7
};
object1 = Object.assign({}, object2);
console.log(object1);
I'm new to using Ramda.js and am wondering how I can filter an object based on specified properties.
Looking at R.filter, it seems that _.filter only passes the object value and not the property. For instance, the example given in the REPL:
var isEven = (n, prop) => {
console.log(typeof prop);
// =>
// undefined
// undefined
// undefined
// undefined
return n % 2 === 0;
}
R.filter(isEven, {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, d: 4}
If I have the following object:
const obj = {a: 1, b: 2, c: 3};
My desired result would be:
const filterProp = (x) => /* some filter fn */;
filterProp('b')(obj);
// => {a: 1, c: 3};
How can I use Ramda to filter the properties of an object?
After digging through the Ramda docs, I found R.omit which satisfies my particular use case.
const obj = {a: 1, b: 2, c: 3};
R.omit(['b'], obj);
// => {a: 1, c: 3};
Use the pickBy method which allows you to filter a collection based on the keys.
const obj = {a: 1, b: 2, c: 3};
var predicate = (val, key) => key !== 'b';
R.pickBy(predicate, obj);
// => {a: 1, c: 3}