Why does changing an Array in JavaScript affect co

Question

I've written the following JavaScript:

var myArray = ['a', 'b', 'c'];
var copyOfMyArray = myArray;
copyOfMyArray.splice(0, 1);
alert(myArray); // alerts ['b','c']
alert(copyOfMyArray); // alerts ['b','c']

var myNumber = 5;
var copyOfMyNumber = myNumber;
copyOfMyNumber = copyOfMyNumber - 1;
alert(myNumber); // alerts 5
alert(copyOfMyNumber); // alerts 4        

This code declares a variable myArray and sets it to an array value. It then declares a second variable copyOfMyArray and sets it to myArray. It performs an operation on copyOfMyArray and then alerts both myArray and copyOfMyArray. Somehow, when I perform an operation on copyOfMyArray, it appears that the same operation is performed on myArray.

The code then does the same thing with a number value: It declares a variable myNumber and sets it to a number value. It then declares a second variable copyOfMyNumber and sets it to myNumber. It performs an operation on copyOfMyNumber and then alerts both myNumber and copyOfMyNumber. Here, I get the expected behavior: different values for myNumber and copyOfMyNumber.

What is the difference between an array and a number in JavaScript that it seems changing an array changes the value of a copy of the array, where as changing a number does not change the value of a copy of the number?

I'm guessing that for some reason, the array is referred to by reference and the number by value, but why? How can I know what behavior to expect with other objects?

Answer 1

Everything is copied by reference except primitive data types (strings and numbers IIRC).

Answer 2

Create a filter of the original array in the arrayCopy. So that changes to the new array won't affect original array.

var myArray = ['a', 'b', 'c'];
var arrayCopy = myArray.filter(function(f){return f;})
arrayCopy.splice(0, 1);
alert(myArray); // alerts ['a','b','c']
alert(arrayCopy); // alerts ['b','c']

Hope it helps.

Answer 3

In JS, operator "=" copy the pointer to the memory area of the array. If you want to copy an array into another you have to use the Clone function.

For integers is different because they are a primitive type.

S.

Answer 4

Another approach for copying array into temporary variable can be typecasting/changing your array into string and then retrieving it.

E.g.

var a = [1,2,3];
typeof(a) (this will give "object")
var b = JSON.stringify(a);
typeof(b) (this will give "string");
b = JSON.parse(b);
typeOf(b) (this will give "object")

and now chnage in value of b will not be reflected on a

Answer 5

Your answer is here

var myArray = ['a', 'b', 'c'];
var copyOfMyArray = myArray.slice();

Basically, the slice() operation clones the array and returns a shallow copy.

copyOfMyArray.splice(0, 1);
alert(myArray); // alerts ['a', 'b', 'c']
alert(copyOfMyArray); // alerts ['b','c']

A clear Documentation can be found in the following link: Array.prototype.slice()

Answer 6

      var myArray = ['a', 'b', 'c'];
      var copyOfMyArray = JSON.parse(JSON.stringify(myArray));
      copyOfMyArray.splice(0,1);
      
      console.log('orginal Array',myArray)
      console.log('After Splic of copyOfMyArray',copyOfMyArray);
      //If not using the JSON.parse(JSON.stringify (array)) at the time of assign the array change of the one array will affect another because of the reference.