Question

61

Javascript passing arrays to functions by value, leaving original array unaltered

rated 0 times [ 64] [ 3] / answers: 1 / hits: 72488 / 12 Years ago, wed, january 23, 2013, 12:00:00

I've read many answers here relating to 'by value' and 'by reference' passing for sending arrays to javascript functions. I am however having a problem sending an array to a function and leaving the original array unaltered. This example llustrates the problem:

function myFunction(someArray)

{

// any function that makes an array based on a passed array;

// someArray has two dimensions;

// I've tried copying the passed array to a new array like this (I've also used 'someArray' directly in the code);



funcArray = new Array();

funcArray = someArray;



var i = 0;



    for(i=0; i<funcArray.length; i++)

    {

    funcArray[i].reverse;

    }



return funcArray;



}

I can't understand why anything in this function should alter the original array.

calling this function directly changes the original array if the function call is assigned to a new array:

myArray = [[A,B,C],[D,E,F],[G,H,I]];

anotherArray = new Array();



anotherArray = myFunction(myArray);

// myArray gets modified!;

I tried using .valueOf() to send the primitive:

anotherArray = myFunction(myArray.valueOf());

// myArray gets modified!;

I have even tried breaking the array down element by element and sub-element by sub-element and assigning all to a new 2-d array and the original array still gets modified.

I have also joined the sub-elements to a string, processed them, split them back into arrays and the original array still gets modified.

Please, does any one know how I can pass the array values to a function and not have the passed array change?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristineterrak

Add To Favorites

Follow

Total Points: 74

Total Questions: 109

Total Answers: 115

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

answered 12 Years ago sonja · Accepted Answer

Inside your function there's this:

funcArray = new Array();

funcArray = someArray;

This won't actually copy someArray but instead reference it, which is why the original array is modified.

You can use Array.slice() to create a so-called shallow copy of the array.

var funcArray = someArray.slice(0);

Modern versions of ES also support destructuring expressions, which make it look like this:

const funcArray = [...someArray];

The original array will be unaltered, but each of its elements would still reference their corresponding entries in the original array. For "deep cloning" you need to do this recursively; the most efficient way is discussed in the following question:

What is the most efficient way to deep clone an object in JavaScript?

Btw, I've added var before funcArray. Doing so makes it local to the function instead of being a global variable.