I've been saving all the data received from services direct to local variable, controller, or scope. What I suppose would be considered a shallow copy, is that correct?
Example:
DataService.callFunction()
.then(function(response) {
$scope.example = response.data;
});
Recently I was told to use angular.copy in order to create a deep copy.
$scope.example = angular.copy(response.data);
However, the deep copy information seems to be working in the same way when used by my Angular application. Are there specific benefits to using a deep copy (angular.copy) and can you please explain them to me?
This question is related to
javascript
angularjs
deep-copy
shallow-copy
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.
var app = angular.module('copyExample', []);_x000D_
app.controller('ExampleController', ['$scope',_x000D_
function($scope) {_x000D_
$scope.printToConsole = function() {_x000D_
$scope.main = {_x000D_
first: 'first',_x000D_
second: 'second'_x000D_
};_x000D_
_x000D_
$scope.child = angular.copy($scope.main);_x000D_
console.log('Main object :');_x000D_
console.log($scope.main);_x000D_
console.log('Child object with angular.copy :');_x000D_
console.log($scope.child);_x000D_
_x000D_
$scope.child.first = 'last';_x000D_
console.log('New Child object :')_x000D_
console.log($scope.child);_x000D_
console.log('Main object after child change and using angular.copy :');_x000D_
console.log($scope.main);_x000D_
console.log('Assing main object without copy and updating child');_x000D_
_x000D_
$scope.child = $scope.main;_x000D_
$scope.child.first = 'last';_x000D_
console.log('Main object after update:');_x000D_
console.log($scope.main);_x000D_
console.log('Child object after update:');_x000D_
console.log($scope.child);_x000D_
}_x000D_
}_x000D_
]);_x000D_
_x000D_
// Basic object assigning example_x000D_
_x000D_
var main = {_x000D_
first: 'first',_x000D_
second: 'second'_x000D_
};_x000D_
var one = main; // same as main_x000D_
var two = main; // same as main_x000D_
_x000D_
console.log('main :' + JSON.stringify(main)); // All object are same_x000D_
console.log('one :' + JSON.stringify(one)); // All object are same_x000D_
console.log('two :' + JSON.stringify(two)); // All object are same_x000D_
_x000D_
two = {_x000D_
three: 'three'_x000D_
}; // two changed but one and main remains same_x000D_
console.log('main :' + JSON.stringify(main)); // one and main are same_x000D_
console.log('one :' + JSON.stringify(one)); // one and main are same_x000D_
console.log('two :' + JSON.stringify(two)); // two is changed_x000D_
_x000D_
two = main; // same as main_x000D_
_x000D_
two.first = 'last'; // change value of object's property so changed value of all object property _x000D_
_x000D_
console.log('main :' + JSON.stringify(main)); // All object are same with new value_x000D_
console.log('one :' + JSON.stringify(one)); // All object are same with new value_x000D_
console.log('two :' + JSON.stringify(two)); // All object are same with new value<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
_x000D_
<div ng-app="copyExample" ng-controller="ExampleController">_x000D_
<button ng-click='printToConsole()'>Explain</button>_x000D_
</div>