Reverse array with for loops

Question

Quick JavScript question. In the following pieces of code I'm reversing the array arr that's being passed to the function reverseArray.

In the first piece of code, it looks like that the local variable arr keeps changing even though inside the loop I am operating on the variable newArr which hold the initial value of arr. Hence the loop fails when arr.length reaches the values 3.

function reverseArray (arr) {
    var newArr = [];
    var inArr = arr;
    console.log(inArr);
    for (i = 0; i < arr.length; i++) {      
        newArr[i] = inArr.pop(i);       
    }   
    return newArr;
}
reverseArray(["A", "B", "C", "D", "E", "F"]);

// OUTPUT: ["F", "D", "E"]

On the other hand, if I store arr.length on local variable numArr, then it works perfectly and reverses the array.

function reverseArray (arr) {
    var numArr = arr.length;    
    var newArr = [];    
    for (i = 0; i < numArr; i++) {      
        let inArr = arr;
        newArr[i] = inArr.pop(i);       
    }
    return newArr;
}

reverseArray(["A", "B", "C", "D", "E", "F"]);

// OUTPUT: ["F", "E", "D", "C", "B", "A"]

What am I missing?

Solution 1

pop (MDN, spec) is a mutator method: It changes the state of the array you call it on. So naturally, inArr.pop(1) modifies arr (in your first example), since inArr and arr both refer to the same array.

Probably worth noting as well that pop doesn't accept any parameters, so that 1 doesn't do anything.

In your first example, your best bet is to just assign another variable (say, j) the initial value arr.length - 1 and use arr[j] to get the value, then decrease j as you increase i. (Also, no point to inArr, and you need to declare i to avoid what I call The Horror of Implicit Globals:

function reverseArray (arr) {
    var newArr = [];
    for (var i = 0, j = arr.length - 1; i < arr.length; i++, j--) {      
        newArr[i] = arr[j];
    }   
    return newArr;
}
console.log(reverseArray(["A", "B", "C", "D", "E", "F"]));

You can also just use arr[arr.length - i - 1] rather than a second variable:

function reverseArray (arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {      
        newArr[i] = arr[arr.length - i - 1];
    }   
    return newArr;
}
console.log(reverseArray(["A", "B", "C", "D", "E", "F"]));

Solution 2

You could take a copy of the array and use the length of the copy for checking the next pop/push command.

function reverseArray(array) {
    var newArr = [],
        inArr = array.slice();    // take copy of primitive values

    while (inArr.length) {        // check decrementing length
        newArr.push(inArr.pop());
    }
    return newArr;
}

console.log(reverseArray(["A", "B", "C", "D", "E", "F"]));

To fullfill the condition, you could use a for statement as well.

function reverseArray(array) {
    var newArr = [],
        inArr = array.slice();    // take copy of primitive values

    for(; inArr.length; ) {       // check decrementing length
        newArr.push(inArr.pop());
    }
    return newArr;
}

console.log(reverseArray(["A", "B", "C", "D", "E", "F"]));

Comments

[Ry-]

pop() doesn’t take any arguments.

[Nina Scholz]

why do you have three arrays? the assingment of an array assigns the object reference. the handed over array is mutated, too.

[leonardofed]

@Ry- you're right but in this case, that doesn't make any difference.

[leonardofed]

Makes sense, but then why when (in the second snippet) I assign numArr = arr.length, numArr doesn't keep changing while arr decreases.

[T.J. Crowder]

@leonardofed - Because numArr has no connection whatsoever to arr. numArr = arr.length copies the value of length into numArr. There's no ongoing link after that.

[T.J. Crowder]

The OP could do that, but it's pointless to modify the source array (or a copy of it) when building the reversed array.

[T.J. Crowder]

What purpose does using a for where a while is appropriate serve?

[Inus Saha]

@T.J.Crowder i have updated my answer. thanks for pointing out.

[Amit Verma]

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn and eventually apply that knowledge to their own code. You are also likely to have positive feedback/upvotes from users, when the code is explained.

[Aditya Bhadoria]

just ignore variables c and a