use of angular.copy

Question

I am Using angular.copy but also it works well on looping the object and assigning the variable.

What is the use of angular.copy than looping the variable which need to get assign?

Answer 1

angular.copy() creates a new object as a deep copy, which means that the 2 objects would be independent of each other.

Doing the regular looping and assigning, I assume you are using the = operator, which would mean that changing a property of the original object would change the corresponding property of copied object or vice versa.

For Example, consider an object:

let obj1 = {something};

let obj2; //you want to copy obj1 into obj2

//case 1: using angular.copy
obj2 = angular.copy(obj1);  

//case 2: using =
obj2 = obj1;

In case 1: if you change, obj1 or obj2 or both, it doesn't affect the other.

But in case 2: if you change either obj1 or obj2, that change is reflected in the other object.

Hence, using angular.copy() the two objects would remain separate and changes would not reflect on each other.

Answer 2

Use angular.copy, when assigning value of object or array to another variable and that object value should not be changed.

Without deep copy or using angular.copy, changing value of property or adding any new property update all object referencing that same object.

Angular: js file

var app = angular.module('copyExample', []);
app.controller('ExampleController', ['$scope',
  function($scope) {
    $scope.printToConsole = function() {
      $scope.main = {
        first: 'first',
        second: 'second'
      };

      $scope.child = angular.copy($scope.main);
      console.log('Main object :');
      console.log($scope.main);
      console.log('Child object with angular.copy :');
      console.log($scope.child);

      $scope.child.first = 'last';
      console.log('New Child object :')
      console.log($scope.child);
      console.log('Main object after child change and using angular.copy :');
      console.log($scope.main);
      console.log('Assing main object without copy and updating child');

      $scope.child = $scope.main;
      $scope.child.first = 'last';
      console.log('Main object after update:');
      console.log($scope.main);
      console.log('Child object after update:');
      console.log($scope.child);
    }
  }
]);

// Basic object assigning example

var main = {
  first: 'first',
  second: 'second'
};
var one = main; // same as main
var two = main; // same as main

console.log('main :' + JSON.stringify(main)); // All object are same
console.log('one :' + JSON.stringify(one)); // All object are same
console.log('two :' + JSON.stringify(two)); // All object are same

two = {
  three: 'three'
}; // two changed but one and main remains same
console.log('main :' + JSON.stringify(main)); // one and main are same
console.log('one :' + JSON.stringify(one)); // one and main are same
console.log('two :' + JSON.stringify(two)); // two is changed

two = main; // same as main

two.first = 'last'; // change value of object's property so changed value of all object property 

console.log('main :' + JSON.stringify(main)); // All object are same with new value
console.log('one :' + JSON.stringify(one)); // All object are same with new value
console.log('two :' + JSON.stringify(two)); // All object are same with new value

HTML corresponding Code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="copyExample" ng-controller="ExampleController">
  <button ng-click='printToConsole()'>Explain</button>
</div>