Eloquent JavaScript reversing an array in place explanation

Question

I am working through the exercises in Eloquent JavaScript by Marijn Haverbeke and am working on the following problem:

"Write a function reverseArrayInPlace that modifies the array given as an argument in order to reverse its elements. Do not use the standard reverse method"

The solution given is as follows:

function reverseArrayInPlace(array) {
   for (var i = 0; i < Math.floor(array.length / 2); i++) {
      var old = array[i];
      array[i] = array[array.length - 1 - i];
      array[array.length - 1 - i] = old;
   }
   return array;
}

The test case given is as follows:

var arrayValue = [1, 2, 3, 4, 5];
reverseArrayInPlace(arrayValue);
console.log(arrayValue);
// → [5, 4, 3, 2, 1]

I understand that it is using the midpoint of the array as a rotation point, but can someone please give me a step by step explanation?

All you need to know is what is [`Math.floor()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), [the `for` loop](https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Statements/for) and [`array.length`](https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/length) in JS and the rest is like a pseudo code. BTW you can always reverse an array with the [`Array.prototype.reverse()`](https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) built in array method. — Redu, Dec 29 '16 at 22:32
Possible duplicate of [How do I reverse an int array in Java?](http://stackoverflow.com/questions/2137755/how-do-i-reverse-an-int-array-in-java) — Jmills, Dec 30 '16 at 01:19

score 4 · Answer 1 · answered Dec 29 '16 at 22:13

function reverseArrayInPlace(array) {
  //iterate thru half of original array
  for (var i = 0; i < Math.floor(array.length / 2); i++) {
    var old = array[i]; //cache original i value
    array[i] = array[array.length - 1 - i]; //set i value to its "opposite" from end of array
    array[array.length - 1 - i] = old; //set "opposite" to be original i value
  }
  return array;
}

As you iterate thru 1/2 of the array, you swap the 2 values that are equal in distance from the front and end of the arrays. For example:

Original Array: [1, 2, 3, 4, 5]

Step i = 0: [5, 2, 3, 4, 1] (1 and 5 are swapped)

Step i = 1: [5, 4, 3, 2, 1] (2 and 4 are swapped)

score 4 · Accepted Answer · answered Dec 29 '16 at 22:23

Taking line by line:

for (var i = 0; i < Math.floor(array.length / 2); i++) {

loops the array from 0 to the half of the array (rounded to lower number), increases i by one each time.

var old = array[i];

temporarely stores the current value of the array at the position i in the variable old.

array[i] = array[array.length - 1 - i];

sets the value of the i position to the value of the last element of the array minus the current i.

array[array.length - 1 - i] = old;

sets the value of the last element of the array minus the current i to the previous value (stored in the old variable).

In a nutshell, here is what's happening in a practical situation:

old will store the current looped value. Such value will be replaced to the last value MINUS the current index. Basically, when i is 0, array[0] becomes array[4] and vice-versa. when i is 1 array[1] will become array[3] and vice versa. the [array.length - 1 - i] is necessary because indexes in array starts from 0, so array.length - 1 is the last element of array, while -i moves the offset by i, which makes it possible to switch the value of the first element with the last one and vice-versa.

So where is the deal instead of doing a regular for loop?

Well, the trick is that it will take half the time and will replace two values at a time instead of looping the whole array and replacing the values one at a time.

Eloquent JavaScript reversing an array in place explanation

2 Answers2