0

I've noticed that [].concat() performs similarly to angular.copy() with arrays. For instance,

var x = [5, 2];
var y = [].concat(x);
// y = [5, 2]

x = [2, 3];
// y = [5, 2]

var z = angular.copy(x);
// z = [2, 3];

x = [6, 9];
// z = [2, 3];

Is there a key difference between [].concat() and angular.copy(src,[dest])?

1
  • They are not the same. angular.copy performs a deep copy.. Commented Sep 8, 2014 at 3:35

2 Answers 2

2

angular.copy performs a deep copy of the source and places it on the destination (Both the arrays of source and dest and its contents, even reference types, points to different reference location). But when you do [].concat (Both the arrays of source and dest points to different reference and its reference type contents points to the same reference), it just returns a new array, so only think that is similar in using both angular.copy and [].concact in your example is that it assigns a new reference of the array object to the lhs variable.

But consider the situation where you have array of objects.

  $scope.arr = [{name:'name1'}, {name:'name2'}, {name:'name3'}, {name:'name4'}];
  $scope.arrConcat = [].concat($scope.arr); //Get a new array
  $scope.arrCopy = angular.copy($scope.arr); //Get a new copy

 //Now change the name property of one of the item

  $scope.arr[3].name="Test";

 //Now see who all have been changed

 console.log($scope.arr[3].name); //Of course will output "Test"

 console.log($scope.arrConcat[3].name); //Will also output "Test" because the new array items still holds the same reference of the objects.

 console.log($scope.arrCopy[3].name); //Will output name4 because this contains another reference which holds the copy of the value of the object at index 3 from source array



//Push something on to the original array 
  $scope.arr.push({name:'name5'});

  //You will see that new item is not available here, which is exactly the behaviour that you are seeing in your case because both the arrConcat and arrCopy holds its own version of array through the items in arrConcat and arr are from the same reference.
  console.log($scope.arrConcat);
  console.log($scope.arrCopy);

So only thing is that in your case [].concat is kind of a convenient method to get a copy of the source array since your array just has primitives, so no issues.

Example - Demo

Sign up to request clarification or add additional context in comments.

1 Comment

Angular's copy method leads to some annoying behavior when you are dealing with http requests. I had a function which used angular copy on the response data from a post request then pushed the object to an array. Every time a new item was pushed to the array it copied over the other items so I would end up with multiple entries of the most recent response data. I suppose this is because the array only stored the reference location of each item.
0

http://plnkr.co/edit/06zLM8g34IDBLUmPtwV2?p=preview

var x = [5, 2];
var y = [].concat(x);
// y = [5, 2]


var x = [5, [5, 2]];
var y = [].concat(x);
// y = [5, 2]

Check this out, [].copy() never does a deep copy unlike angular.copy()

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.