title: Merge two objects, but explicitly define the keys that can be set
body: <p>I want to merge two objects into a new object, with one object overwriting properties if both have them. </p>
  
  <p>This is very easy to do with ES6 spreads, but in this particular case I would like to use a method that still defines what keys can be set. Basically create a "white list" of properties that are allowed on my final object.  (With spreads, any property would be merged into the new object).</p>
  
  <p>Is there a method that uses ES6+ to do this?</p>
  
  <p><strong>Two objects:</strong></p>
  
  <pre><code>var o1 = { 
    a: 'foo',
    b: 'bar',
    c: 'baz'
  }
  
  var o2 = { 
    a: 'pop',
    bad_property: 'dont copy me'
  }
  
  var oMerged = {
    a: 'pop', // I came from obj_2
    b: 'bar',
    c: 'baz'
  }
  </code></pre>
  
  <p><strong>Merge methods:</strong></p>
  
  <pre><code>// Method 1: Use spreads, problem is this hides the keys.
  var oMerged = { 
    ...o1,
    ...o2
  };
  
  // Method 2: Shows each key, but requires a ternary to check if obj_2 has the key.
  var oMerged = {
    a: (o2.a !== undefined) ? o2.a : o1.a,
    b: (o2.b !== undefined) ? o2.b : o1.b,
    c: (o2.c !== undefined) ? o2.c : o1.c
  }
  
  // Method 3: Define what keys can be merged, but use a more concise syntax / possibly an ES6+ feature.
  ??? 
  </code></pre>
  
  <p>Edit: Explicitly said that the object should have a white list of acceptable properties. There are good answers but they require black lists of unacceptable properties. The reason for the 'white list' is it shows other developers the shape of the final object. </p>