Write a program to reverse an array in JavaScript?

JavascriptObject Oriented ProgrammingProgramming

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.


Following is the syntax of this method −



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. 


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--)

You can understand better with the program below −


<!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.


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.


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.


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 29-Aug-2022 08:19:42