Argument's scope and object mutability in javascript

Question

I've been given the following dummy assignment to learn about scope and mutability in JavaScript:

For this exercise, write two functions, reverseArray and reverseArrayInPlace. The first, reverseArray, takes an array as argument and produces a new array that has the same elements in the inverse order. The second, reverseArrayInPlace, does what the reverse method does: it modifies the array given as argument in order to reverse its elements. Neither may use the standard reverse method.

I coded the reverseArray function successfully and wanted to reuse it for the reverseArrayInPlace function. I coded 3 versions of the function and I really don't understand why some work, and some others don't. I would appreciate any explanation about this javascript behavior. (I know there are other ways to solve the reverseArrayInPlace but I want to know why my approach is not working).

// Reverses an array given as argument and returns it as a NEW array.
function reverseArray(myArray){
 var reversedArray = [];
 for(var i=0; i<myArray.length; i++){
 reversedArray.unshift(myArray[i]);
 }
 return reversedArray;
}
/*
 Reverse the original array in place
*/
// DOESN'T WORK
function reverseArrayInPlace1(myArray){
 myArray = reverseArray(myArray);
}
// DOESN'T WORK
function reverseArrayInPlace2(myArray){
 var original = [];
 for (var i=0; i<myArray.length; i++) {
 original[i]=myArray[i];
 }
 myArray = reverseArray(original);
}
// WORKS
function reverseArrayInPlace3(myArray){
 var original = [];
 for (var i=0; i<myArray.length; i++) {
 original[i]=myArray[i];
 }
 var newArray = reverseArray(original);
 for (var i=0; i<myArray.length; i++) {
 myArray[i]=newArray[i];
 }
}
miArreglo = ["a", "b", "c", "d" ];
console.log("MyArray: ", miArreglo);
arregloRever=reverseArray(miArreglo);
console.log("Reversed using reverseArray: ", arregloRever);
reverseArrayInPlace1(miArreglo);
console.log("Reversed using reverseArrayInPlace1: ",miArreglo);
reverseArrayInPlace2(miArreglo);
console.log("Reversed using reverseArrayInPlace2: ",miArreglo);
reverseArrayInPlace3(miArreglo);
console.log("Reversed using reverseArrayInPlace3: ",miArreglo);

• slebetman: See this for an explanation of why the "doesn't work" parts don't work: stackoverflow.com/questions/13506398/…

Answer 1

Your reverseArrayInPlace1 and reverseArrayInPlace2 don't work because arguments are passed by value in JavaScript. myArray is local to the function and reassigning it does not affect the caller.

You could take the opposite approach to your code reuse and implement reverseArray in terms of reverseArrayInPlace. You would copy the input array, reverse the copy in place, and return it. (You can copy an array by calling arr.slice())

• Sergio Rodriguez: This doesn't explain why the 3rd approach works. If arguments where passed by value, the global object wouldn't be modified using the argument "myArray".
• dwickern: The argument is passed by value. That doesn't mean the array is copied. Both values still reference the original array, so myArray[i] modifies the array's contents.

Answer 2

Inside your function, myArray is a variable that refers to the original array, so any changes you make to the elements, for example

myArray[i] = x;

will change the original. But if you set the myArray variable to something, then the original array is taken out of scope, and you are only setting the local variable to the reversed array. @dwickern's answer gives you the right idea for fixing your code.