Reverse an Array in JavaScript

Reversing an array means that we are reversing the order of elements present in the array, but not the array itself. In simpler terms, the element at 0th index will be shifted to the last index of the array and vice versa.

There are various ways to reverse an array in JavaScript in this article, we will look into these in detail ?

Using the reverse() method()

The reverse() method in JavaScript reverses the order of the array elements. The first element in the array is swapped with the last element, the second element is swapped with the second last element? and so on.

Syntax

Following is the syntax of this method ?

arr.reverse();

Example

In the program below, we use the reverse() method on an array color with different colours as and print the reversed elements of the array as the output.


<!DOCTYPE html><html lang="en"><head>
   <title>Reverse Method</title>
</head>


<body>
   <script>
      var color = ['Red','Black','Pink','Gray','Yellow'];
      var revarr = color.reverse();
      document.write(color);
   </script>
</body>
</html>

Using the push() method

We can also use push() method for reversing an array in JavaScript. For that, we need to create two arrays; in which one array has some values and another array left empty. 

Syntax

Following is the syntax of this method ?

var arr1 = [value1,value2,value3,?..];
var arr2 = [];

Fetch the first array value at the last index using for loop.

for(let i = arr.length-1; i>=0; i--)
   arr.push(arr[i])

You can understand better with the program below ?

Example


<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reverse Array</title>
</head>
<body>
   <script>
      var arr = [1,2,3,4,5];
      var revarr = [];
      let i;
      for(i = arr.length-1; i>=0; i--){
         revarr.push(arr[i]);
      }
      for(let i = 0; i<revarr.length; i++){
         document.write(revarr[i] + " ");
      }
   </script>
</body>
</html>

By swapping the elements

Using swap method, we can change the value of any variable. you can see the syntax below.

Syntax

var temp = a;
a = b;
b = temp;

But here we are going to use swap logic for changing the array index values.

Let's understand with the help of the program.

Example

In the given program, we use for loops and the swapping method to change the array index values, and through the swapping method, we can change the value of any variable.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Reverse Array</title>
</head>
<body>
   <script>
      var arr = [1,2,3,4,5];
      var r;
      var len = arr.length;
      document.write("Original array: ");
      for(let i = 0; i<arr.length; i++){
         document.write(arr[i] + " ");
      }
      for(let i = 0; i<len/2; i++){
         r = arr[i];
         arr[i] = arr[len-i-1];
         arr[len-i-1] = r;
      }
      document.write("<br>After reverse array: ");
      for(let i = 0; i<len; i++){
         document.write(arr[i] + " ");
         console.log(arr[i]);
      }
   </script>
</body>
</html>

Using for loop

We can use for loop and some basic logic for fetching the array value at last index.

Example

As you can see in the program below, we have used for loop to fetch all the array elements' values and inside the for loop, we reverse an array.


<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reverse Array</title>
</head>
<body>
   <script>
      var arr = [1,2,3,4,5];
      var len = arr.length;
      document.write("Original array:");
      for(let i = 0; i<len; i++) {
         document.write(arr[i] + " ");
      }
      document.write("<br>Reverse array : ");
      for(let i = len-1; i>=0; i--){
         document.write(arr[i] + " ")
      }
   </script>
</body>
</html>
Updated on: 2022-08-29T08:19:42+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements