Dev.to

How Arrays are actually reversed in Javascript

In this article, we will discuss what happens behind the scenes when reversing an array in Javascript. Note: This article aims to help Javascript programmers and prepare computer science undergrads for future exams. Before we proceed, you are expected to have a very good knowledge of Javascript Arrays. How can we reverse an array in JavaScript? Before we explain the steps involved in reversing an array, we need to create an array and then reverse it. Take the code below as an example; //Array of numbers const fruits = ["Mango", "Orange", "Apple", "Pineapple", "Guava"]; const fruits2 = fruits.reverse() The output of the code above will reverse the array, and you'll have the output below; ["Guava", "Pineapple", "Apple", "Orange", "Mango", ] The array has been successfully reversed, but what happened is not as straightforward as it looks. Why did the above array switch positions and what exactly made this happen? How did the reversal happen? The first thing you have to note is that the arrays didn't just magically switch places, what happened was that opposite indexes swapped positions after every iteration. Let's say you have the array. const fruits = ["Mango", "Orange", "Apple", "Pineapple", "Guava"]; The swapping creates a loop, and after every iteration, the indexes in the array get swapped. Let's take a closer look at the following steps; Iteration 1: The first element with an index of [0], takes the position of the last index of [4], and vice versa. We now have; const fruits = ["Guava", "Orange", "Apple", "Pineapple", "Mango"]; Iteration 2: The element with an index of [1], takes the position of the last index of [3], and vice versa. We now have; const fruits = ["Guava", "Pineapple", "Apple", "Orange", "Mango"]; Iteration 3: The element with the index of 2 remains the same since it's not going to get swapped with any other element. This explains the science and the concept behind reversing arrays in JavaScript.

Apr 2, 2025 - 02:46

How Arrays are actually reversed in Javascript

In this article, we will discuss what happens behind the scenes when reversing an array in Javascript.

Note: This article aims to help Javascript programmers and prepare computer science undergrads for future exams.

Before we proceed, you are expected to have a very good knowledge of Javascript Arrays.

How can we reverse an array in JavaScript?

Before we explain the steps involved in reversing an array, we need to create an array and then reverse it.

Take the code below as an example;

//Array of numbers
const fruits = ["Mango", "Orange", "Apple", "Pineapple", "Guava"];
const fruits2 = fruits.reverse()

The output of the code above will reverse the array, and you'll have the output below;

["Guava", "Pineapple", "Apple", "Orange", "Mango", ]

The array has been successfully reversed, but what happened is not as straightforward as it looks.
Why did the above array switch positions and what exactly made this happen?

How did the reversal happen?

The first thing you have to note is that the arrays didn't just magically switch places, what happened was that opposite indexes swapped positions after every iteration.

Let's say you have the array.

const fruits = ["Mango", "Orange", "Apple", "Pineapple", "Guava"];

The swapping creates a loop, and after every iteration, the indexes in the array get swapped.

Let's take a closer look at the following steps;

Iteration 1: The first element with an index of [0], takes the position of the last index of [4], and vice versa.
We now have;

const fruits = ["Guava", "Orange", "Apple", "Pineapple", "Mango"];

Iteration 2: The element with an index of [1], takes the position of the last index of [3], and vice versa.
We now have;

const fruits = ["Guava", "Pineapple", "Apple", "Orange", "Mango"];

Iteration 3: The element with the index of 2 remains the same since it's not going to get swapped with any other element.

This explains the science and the concept behind reversing arrays in JavaScript.