JavaScript Object Merging | Programming Tutorial

Introduction

In this lab, we will be exploring the process of merging objects in JavaScript. The lab will walk you through the steps of creating a new object by combining two or more objects. You will learn how to use Array.prototype.reduce() and Object.keys() to iterate over objects and keys, and Object.prototype.hasOwnProperty() and Array.prototype.concat() to merge values for existing keys.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} javascript/data_types -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} javascript/arith_ops -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} javascript/comp_ops -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} javascript/array_methods -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} javascript/higher_funcs -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} javascript/destr_assign -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} javascript/spread_rest -.-> lab-28495{{"`Merging JavaScript Objects with Reduce and Concat`"}} end

Object Merge Function

To merge two or more objects, follow the given steps:

Open the Terminal/SSH and type node to start coding.
Use Array.prototype.reduce() along with Object.keys() to iterate over all objects and keys.
Use Object.prototype.hasOwnProperty() and Array.prototype.concat() to append values for keys existing in multiple objects.
Use the given code snippet to create a new object from the combination of two or more objects.

const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

For example, consider the following objects:

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

When you merge these two objects using the merge() function, you get the following result:

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

Summary

Congratulations! You have completed the Merge Objects lab. You can practice more labs in LabEx to improve your skills.

Merging JavaScript Objects with Reduce and Concat

Introduction

Skills Graph

Object Merge Function

Summary

Other JavaScript Tutorials you may like