Object.assign vs $.extend

Given that I am using an immutable object, I want to clone or copy an object in order to make changes.

Now I have always been using javascript's native Object.assign but stumbled upon the JQuery $.extend.

I was wondering what is the better way to do this and what exactly the difference is between both? Looking at the documentation I cannot seem to really find a mentionable difference concerning why to choose either one.

The two key differences are the optional boolean for deep merge which is recursive on the jQuery $.extend method (where false is not supported?!) ...

let object1 = {
  id: 1,
  name: {
    forename: 'John',
    surname: 'McClane'
  },
};

let object2 = {
  id: 2,
  name: {
  }
};

// merge objects
let objExtend = $.extend(true, {}, object1, object2);
let objAssign = Object.assign({}, object1, object2);

// diff
console.log(objExtend.name.forename); // "John"
console.log(objAssign.name.forename); //  undefined

> Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

Example: [JsFiddle][3]

The second is the $.extend method ignores undefined ...

let object1 = {
  id: 1,
  name: 'hello world'
};

let object2 = {
  id: 2,
  name: undefined
};

// merge objects
let objExtend = $.extend({}, object1, object2);
let objAssign = Object.assign({}, object1, object2);

// diff
console.log(objExtend.name); // "hello world"
console.log(objAssign.name); //  undefined

Example: [JsFiddle][4]

Docs

MDN: [Object.assign(target, ...sources)][1]

jQuery: [jQuery.extend([deep], target, object1 [, objectN])][2]

Additionally:

If you are looking for a way to deep merge objects without jQuery, this answer is excellent:

https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge

Example: [JsFiddle][5]

How to deep merge using Object.assign with ES6:

function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

function mergeDeep(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return mergeDeep(target, ...sources);
}

[1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign "Object.assign(target, ...sources)" [2]: https://api.jquery.com/jQuery.extend/ "jQuery.extend( [deep ], target, object1 [, objectN ] )" [3]: https://jsfiddle.net/0ku54jn1/ "JsFiddle" [4]: https://jsfiddle.net/78qn6a9y/ "JsFiddle" [5]: https://jsfiddle.net/o59s01az/1/ "JsFiddle"