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

Asked

Viewed 2,062 times

8

At the angle, to extend an object, I usually use `angular.exted

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

Upshot:

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

However, I realized that by using angular.merge, the result is the same:

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

Upshot:

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

What’s the difference between the two?

angularjs

  • http://davidcai.github.io/blog/posts/copy-vs-extend-vs-merge/

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 properties, i.e., properties that are objects will be re-created in a way that does not point to the same base(s) references(s).

angular extend.

Make a simple (or shallow) copy of properties, i.e., properties that are objects will point to the same reference(s) 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>

<div ng-app="app">
  <div ng-controller="mainController as mainCtrl">
  </div>
</div>

  • Dude, so the choice of which one to use is very serious. The framework I use works on relationships as "subobjects" (objects within each other). So in some cases, it will be preferable to use merge, to have no problem with object references.

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 (recursive), copies the properties of the source objects to the target object.

Here we use same example replacing angular.extend for 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

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.