title: How to merge and replace objects from two arrays based on a key in javascript?
body: <p>I have two array object(arrayList1,arrayList2). Just I am trying to merge those two arrays into one array object.
  The following terms I used.</p>
  
  <ul>
  <li>Both array merged into one array based on key-name is <strong>type</strong>.</li>
  <li>arrayList2 values will be overwrite the arrayList1.</li>
  <li>I Got the expected output but I am worying to do with efficient and performance way..</li>
  </ul>
  
  <p>Can someone please simplify my code..</p>
  
  <p>Note : </p>
  
  <ul>
  <li>It would be great if using Array.reduce function and without use any plugin/library..</li>
  <li>I added the smaple input for understanding. The element order will be change and size of both array's will change.</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const arrayList1 = [
      { type: "A", any: 11, other: "ab", props: "1" },
      { type: "B", any: 22, other: "bc", props: "2" }, // same type
      { type: "C", any: 33, other: "df", props: "3" }
  ];
   
  const arrayList2 = [
      { type: "D", any: 44, other: "aa", props: "11" },
      { type: "B", any: 22, other: "bb", props: "2----2" , x: 10}, // same type
      { type: "E", any: 44, other: "cc", props: "33" }
  ];
  
  result = arrayList2.reduce(function (arr1, arr2) {
    let isMatchFound = false;
    arr1.forEach(function (list) {
      if (arr2.type == list.type) {
        list = Object.assign(list, arr2);
        isMatchFound = true;
      }
    });
    if (!isMatchFound) {
      arr1.push(arr2);
    }
    return arr1;
  }, arrayList1);
  
  console.log('result', JSON.stringify(result));</code></pre>
  </div>
  </div>
  </p>