Sunday, September 22, 2024
Google search engine
HomeLanguagesJavascriptReverse an array in JavaScript

Reverse an array in JavaScript

In this article, we will try to understand how we can reverse an array using several methods in JavaScript. We will use the below syntax to declare an array. After declaring the array, we will use different approaches to reverse the array.

Syntax:

let array_name = [];

Approach 1: Using reverse() method.

This approach is the simplest as well as the native approach which marks the usage of the reverse() method available under arrays in JavaScript. First, we will declare an array with certain values and then we will apply the reverse() method to it to print the reversed array.

Example: This example describes the above-explained approach.

Javascript




<script>
    let numbers_array = [1, 2, 3, 4, 5];
     
    console.log("Original Array: ");
    console.log(numbers_array);
     
    numbers_array.reverse();
     
    console.log("Reversed Array: ");
    console.log(numbers_array);
</script>


Output:

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

Approach 2: Using reverse for() loop.

In this approach, we will use the for() loop to reverse an array. First, we will create an array and then use the for loop to print the array elements in reverse order.

Example: This example describes the above-explained approach.

Javascript




<script>
    let original_array = [1, 2, 3, 4];
 
    let reversed_array = [];
 
    console.log("Original Array: ");
    console.log(original_array);
 
    for (let i = original_array.length - 1; i >= 0; i--) {
        reversed_array.push(original_array[i]);
    }
 
    console.log("Reversed Array: ");
    console.log(reversed_array);
</script>


Output:

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

Approach 3: Using unshift() method.

This approach uses the JavaScript unshift() method. This method adds elements at the beginning of the array itself. We will use the forEach() loop that will perform operations on each element of the array. We will use a newly created array in which we will add the elements from the previous array but in reversed manner itself.

Example: This example describes the above-explained approach.

Javascript




<script>
    let original_array = [1, 2, 3, 4, 5, 6];
 
    let reversed_array = [];
 
    console.log("Original Array: ");
    console.log(original_array);
 
    original_array.forEach((element) => {
        reversed_array.unshift(element);
    });
 
    console.log("Reversed Array: ");
    console.log(reversed_array);
</script>


Output:

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

Approach 4: Using reduce() method.

In this approach, we reduce the function which applies the callback function on each element and gets a summarized result of all items in the accumulator. First, we will use reduce method on the array and take empty as an accumulator and append each element at the beginning of the array. In the end, we get the reverse of the original array. 

Example: This example describes the above-explained approach.

Javascript




<script>
    let original_array = [1, 2, 3, 4];
 
    let reversed_array = [];
 
    console.log("Original Array: ");
    console.log(original_array);
 
    reversed_array = original_array.reduce((acc, item)=> [item].concat(acc), [])
 
    console.log("Reversed Array: ");
    console.log(reversed_array);
</script>


Output:

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

Approach 5: Using map() function.

  • Initialize the test array. 
  • Use the map function on the test array which creates a new array with an element of the test array in reverse order. 
  • Print result. 

Example: This example describes the above-explained approach.

Javascript




let array = [1, 2, 3, 4, 5];
 
console.log("Original Array: ");
console.log(array);
 
reverse_array = array.map((item, idx) => array[array.length - 1 - idx])
 
console.log("Reversed Array: ");
console.log(reverse_array);


Output:

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

RELATED ARTICLES

Most Popular

Recent Comments