What is the difference between angular.extend and angular.merge?

8

In angular, to extend an object, I usually use 'angular.exted

var obj = {nome: "wallace"}
angular.extend(obj, {idade: 26})

Result:

Object {nome: "wallace", idade: 26}

However, I noticed that when using angular.merge , the result is the same:

angular.merge(obj, {idade: 26})

Result:

Object {nome: "wallace", idade: 26}

What's the difference between the two?

    
asked by anonymous 10.10.2016 / 14:09

2 answers

11

The two functions do the same thing with a subtle difference. Both copy the properties of one or more source objects to a target object.

The difference

angular.merge

Make a "deep" (recursive copy) copy of the properties, that is, properties that are objects will be re-created so that they do not point to the same references to the base (s).

angular.extend

Make a simple (or shallow) copy of the properties, that is, the properties that are objects will point to the same reference of the base (s).

Example:

angular.module('app', []);

angular.module('app').controller('mainController', mainControllerFn);

function mainControllerFn(){
  /* ***** merge ***** */
  
  var mPessoa1 = { nome: 'Joaquim', email: '[email protected]' };
  var mPessoa2 = { sobrenome: 'Soares', usuario: {username: 'joaquim1', isAdmin: false } };
  
  angular.merge(mPessoa1, mPessoa2);
  
  console.log(mPessoa1);
  console.log(mPessoa1.usuario === mPessoa2.usuario); 
  // mPessoa1.usuario e mPessoa2.usuario não apontam para a mesma referência
  
  /* ***** extend ***** */
  
  var ePessoa1 = { nome: 'Joaquim', email: '[email protected]' };
  var ePessoa2 = { sobrenome: 'Soares', usuario: {username: 'joaquim1', isAdmin: false } };
  
  angular.extend(ePessoa1, ePessoa2);
  
  console.log(ePessoa1);
  console.log(ePessoa1.usuario === ePessoa2.usuario); 
  // ePessoa1.usuario e ePessoa2.usuario apontam para a mesma referência
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script><divng-app="app">
  <div ng-controller="mainController as mainCtrl">
  </div>
</div>
    
10.10.2016 / 14:14
3

Extend :

  

angular.extend(dst, src1, src2, ...) is to shallow copy the properties   of the source objects from right to left, all the way to the   destination object.

Translating: angular.extend(dst, src1, src2, ...) is the simple copy of the properties of the source objects from right to left, all the way to the target object.

var src1 = { name: 'David', age: 30 }; // source 1
var src2 = { age: 26, skill: {} }; // source 2
var dst = {}; // destination

console.log(angular.extend(dst, src1, src2));
// Output: { name: 'David', age: 26, skill: {} }

console.log(src2.skill === dst.skill);
// Output: true
// src2 and dst share the same skill object due to shallow copy.


Merge :

  

angular.merge is an Angular 1.4+ API that is to deep (recursively)   copy the properties of the source objects to the destination object.

Translating: angular.merge is deep (recursively), copies the properties of source objects to the target object.

Here's the same example replacing angular.extend with angular.merge :

var src1 = { name: 'David', age: 30 };
var src2 = { age: 26, skill: {} };
var dst = {};

console.log(angular.merge(dst, src1, src2));
// Output: { name: 'David', age: 26, skill: {} }
// It seems to the same result as the previous example's, however, ...

console.log(src2.skill === dst.skill);
// Output: false
// src2.skill and dst.skill point to different skill objects due to deep copy.

Reference: Copy vs. Extend vs. Merge

    
10.10.2016 / 14:24