JavaScript reversing array

Question

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


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

I am working on the Data Structures of the book Eloquent JavaScript. I mostly understand how this loop works which is cutting the array in half and then start swapping elements at the opposite sides. but here my problem: the first round of the loop my understanding of "array[i]" is at index 0 and "Math.floor(array.length / 2)" is at index 1. So, we set old = index 0 and then override it to "array[array.length - 1 - i]". the question is first what exactly does -i part mean and what index does this "array[array.length - 1 - i]" located at at the first round of the loop. please someone explain it to I am very visual and I can't pass it if I don’t see each statement in action.

Benjamin · Accepted Answer · 2022-09-25 21:54:09Z

2

array.length - 1 - i is at the first round array.length - 1 - 0 which is the last element in the array. So the loop swaps the first and the last element, then increments i. Next round the 2nd and the value before the last one is going to be swapped and so on.

Array:             1234567890
1st Iteration i=0: ^        ^
2nd Iteration i=1:  ^      ^
3rd Iteration i=2:   ^    ^
4th Iteration i=3:    ^  ^
5th Iteration i=4:     ^^

answered Sep 25, 2022 at 21:54

Benjamin

5745 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kienaan Abdi Over a year ago

This is really helpful. The -i wasn’t clicking for me but I see it now clearly where it starts and what happens every time that it increments by 1. Thank you legend.

Mister Jojo · Accepted Answer · 2022-09-25 22:16:41Z

2

easier to understand, and without the problem with odd arr.length

function reverseArrayInPlace(arr)
  {
  for (let i= 0, j= arr.length -1; i < j; i++, j--) 
    {
    // swapp values of arr[i] and arr[j]
    [ arr[i], arr[j] ] = [ arr[j], arr[i] ];  
    }
  return arr;
  }


let arrayValues = [1, 2, 3, 4, 5];

reverseArrayInPlace( arrayValues );

document.write( JSON.stringify( arrayValues ));

answered Sep 25, 2022 at 22:16

Mister Jojo

22.9k6 gold badges27 silver badges45 bronze badges

2 Comments

Kienaan Abdi Over a year ago

This totally a new way to look at it. can you please explain what these three steps (i < j; i++, j--) do in the first iteration and second?

Mister Jojo Over a year ago

@KienaanAbdi this is not new in JS syntax, you can use a comma to separate different parts of code, just like this sentence uses 2 commas to separate the 3 sintagmas here.

Kinglish · Accepted Answer · 2022-09-25 21:56:44Z

An array is zero-indexed. Meaning, the first item in an array is at the [0] position. When you use array.length, it returns a total of array elements which can be confusing to you because an array of length 5 will have it's last element located at array[4] (because zero is the first).

For each iteration in your function, it uses the counter i to find the position at the end of the array that matches the iteration.

array.length - 1 - i

The -1 part is explained above. When using array.length, you have to subtract 1 to get the actual position.

user3425506 · Accepted Answer · 2022-09-25 22:20:53Z

I find the following approach helpful for working out what a loop is doing. You start with the array 1,2,3,4,5. Each iteration of the loop has two steps which change the array. The result of each step acting on the array are shown under 1st Step and 2nd Step below. Also shown is the value of i for the loop and the value of old for the loop.

i  old   1st Step    2nd Step
0  1     5,2,3,4,5   5,2,3,4,1
1  2     5,4,3,4,1   5,4,3,2,1

1st Step: array[i] = array[array.length - 1 - i];

2nd Step: array[array.length - 1 - i] = old;

danh · Accepted Answer · 2022-09-25 22:26:37Z

Using two indexes into the array, one increasing from 0, the other decreasing from array.length-1, and with a destructuring swap, reverse can be stated a little more concisely like this...

function reverseArrayInPlace(array) {
  for (let i=0, j=array.length-1; i<j; i++, j--)
    [array[i], array[j]] = [array[j], array[i]]; 
  return array;
}

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

Collectives™ on Stack Overflow

JavaScript reversing array

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Related