Combining objects using mathematical operations for identical properties in JavaScript

Question

Combining objects using mathematical operations for identical properties in JavaScript

Imagine I have two sets of data:

const obj1 = {
  CRITICAL: 0,
  ERROR: 1,
  INFO: 0,
  WARNING: 0,
};

const obj2 = {
  CRITICAL: 0,
  ERROR: 0,
  INFO: 0,
  WARNING: 1,
};

I'm looking to merge them into a single object with the summed values for each property:

{
      CRITICAL: 0,
      ERROR: 1,
      INFO: 0,
      WARNING: 1,
    };

The method I've used so far is:

Object.keys(obj1).reduce((prev, curr) => {
  prev[curr] = obj1[curr] + obj2[curr];
  return prev;
}, {});

However, I believe there may be more efficient ways to achieve this. Any suggestions on alternative approaches would be greatly appreciated.

javascript ecmascript-6 frontend

Answer 1

Answer №1

This version is quite similar to your original one, but it appears to be a bit more organized and streamlined.

It also guarantees that the resulting object will contain all keys from both objects, setting the value of the missing key in obj2 to 0 when it does not exist in obj.

const obj = {
  CRITICAL: 0,
  ERROR: 1,
  INFO: 0,
  WARNING: 0,
  OBJECT1: 1
}

const obj2 = {
  CRITICAL: 0,
  ERROR: 0,
  INFO: 0,
  WARNING: 1,
  OBJECT2: 1
}

console.log(
  Object.entries(obj).reduce(
    (prev, [key, value])=> {
      prev[key] = value + (prev[key] || 0)
      return prev
    },
    { ...obj2 } // use spread operator for immutability
  )
)

Explanation: In this code snippet, I have initialized the accumulator (prev) as a shallow copy of obj2. This ensures that all properties present in obj2 are retained in the final object, maintaining their values even if they do not match with any property in obj.

I have also set a default value of zero for obj2[key] in case the key is not found, ensuring that all properties in obj are included in the output object with their original values when there is no corresponding property in obj2.

To enhance safety, you could consider adding type checks for the values to ensure they are numbers. Overall, though, the implementation seems robust enough.

Answer 2

This version is quite similar to your original one, but it appears to be a bit more organized and streamlined.

It also guarantees that the resulting object will contain all keys from both objects, setting the value of the missing key in obj2 to 0 when it does not exist in obj.

const obj = {
  CRITICAL: 0,
  ERROR: 1,
  INFO: 0,
  WARNING: 0,
  OBJECT1: 1
}

const obj2 = {
  CRITICAL: 0,
  ERROR: 0,
  INFO: 0,
  WARNING: 1,
  OBJECT2: 1
}

console.log(
  Object.entries(obj).reduce(
    (prev, [key, value])=> {
      prev[key] = value + (prev[key] || 0)
      return prev
    },
    { ...obj2 } // use spread operator for immutability
  )
)

Explanation: In this code snippet, I have initialized the accumulator (prev) as a shallow copy of obj2. This ensures that all properties present in obj2 are retained in the final object, maintaining their values even if they do not match with any property in obj.

I have also set a default value of zero for obj2[key] in case the key is not found, ensuring that all properties in obj are included in the output object with their original values when there is no corresponding property in obj2.

To enhance safety, you could consider adding type checks for the values to ensure they are numbers. Overall, though, the implementation seems robust enough.

Combining objects using mathematical operations for identical properties in JavaScript

Answer №1

Similar questions

There was an issue with the JSON parsing process due to an unexpected token 'o' at position

How can I add content using HTML or JavaScript?

Rendering a component and updating state with inline onClick event handlers

The Intricacies of Next.js Design

JavaScript Challenge: Calculate the Number of Visible Characters in a Div

What is the best way to automatically select options in a dynamic dropdown menu

Using jQuery and JavaScript to swap images depending on the option chosen in a dropdown menu

Position does not exist

JQuery is blocking the submission of an HTML form

What could be causing this JavaScript to output undefined?

Looking for subsequence in dropdown choices with no assigned values

Save pictures in MongoDB using GridFS or BSON format

Spinner displayed upon task completion

ReactJS: Unable to navigate to a new page when moving from a page with automatic refresh

Discovering the method to incorporate a data-icon attribute within select options using vue.js

Having trouble with a Reactjs Facebook login library - update the componentClicked function to be async

Having trouble with babel-loader, encountering an issue with UglifyJS (ES6) causing errors

Tips for adding images using v-for in Vue 3

Retrieve a single element from each array stored in MongoDB

Using Websockets in combination with AngularJS and Asp.net