Object.assign() vs. angular.extend()

Question

Is there any difference in behavior between the angularjs angular.extend(src, dst) and the javascript Object.assign(src, dst) functions?

Using the test from https://stackoverflow.com/a/36828514, they both seem identical.

If they really are, is there any difference in performance? What are pros and cons for using one over the other?

`Object.assign` is a standard function built into browsers, so there is a potential it will be faster. An advantage of `extend` is if running on older browsers you won't need a polyfill, but I'd personally still go for a polyfill.. — Keith, Apr 01 '19 at 13:10
I am drawn towards `Object.assign()` simply because of it being a standard thing. I just don't currently get what `angular.extend()` is meant for that `Object.assign()` does not cover — Jargo, Apr 01 '19 at 13:13

score 2 · Accepted Answer · answered Apr 01 '19 at 13:17

Looking at the source of angular.extend (baseExtend actually, angular.extend is a few lines below it and uses baseExtend), it's simply a shallow copy. The one exception is that it copies a $$hashKey property, which is used by AngularJS to do object tracking.

I would suggest using Object.assign for code that's not AngularJS-specific, while using angular.extend if you're dealing with objects used by AngularJS controllers (such as scope variables).

score 1 · Answer 2 · answered Apr 01 '19 at 13:20

For starters, angular.extend has an option to do a "deep" clone, so there is that...

If performance is truly a consideration for you then, yes, angular.extend is definitely a "slower" process, but really that shouldn't matter unless you are calling this on large data sets.

Bottom line, angular.extend is there for three reasons. 1) a replacement for Object.assign in the case of old browsers, 2) a way to do a "deep" copy, 3) ensure that an angular-managed object doesn't break if used as the target of an assign call. That is to say, its $$hashKey property does not get overridden.

If you're really curious, have a look at the source code :-)

function baseExtend(dst, objs, deep) {
  var h = dst.$$hashKey;

  for (var i = 0, ii = objs.length; i < ii; ++i) {
    var obj = objs[i];
    if (!isObject(obj) && !isFunction(obj)) continue;
    var keys = Object.keys(obj);
    for (var j = 0, jj = keys.length; j < jj; j++) {
      var key = keys[j];
      var src = obj[key];

      if (deep && isObject(src)) {
        if (isDate(src)) {
          dst[key] = new Date(src.valueOf());
        } else if (isRegExp(src)) {
          dst[key] = new RegExp(src);
        } else if (src.nodeName) {
          dst[key] = src.cloneNode(true);
        } else if (isElement(src)) {
          dst[key] = src.clone();
        } else {
          if (!isObject(dst[key])) dst[key] = isArray(src) ? [] : {};
          baseExtend(dst[key], [src], true);
        }
      } else {
        dst[key] = src;
      }
    }
  }

  setHashKey(dst, h);
  return dst;
}

Object.assign() vs. angular.extend()

2 Answers2