How to use map() on an array in reverse order with JavaScript?

Javascript Web Development Front End Technology

We have given the array of elements and need to use the map() on the array in reverse order with JavaScript.

The map() method maps the new element related to a particular array element in the resultant array. Sometimes, we require to map the elements in reverse order. There can be many ways to use map() on an array in reverse order. We will see all approaches one by one.

Introduction to map() method

Syntax

Follow the syntax below to use the map() method.

array.map((ele, ind, array) => {
   return ele + 20;
})

Parameters

ele – It is an array element.
ind – It is an index of the current element.
array – It is an array on which we have used the map() method.

Reverse the array and use the map() method after that

To use map() on the array in reverse order, we can reverse the array first using the reverse() method of JavaScript. After that, we can use the map() method with the reversed array.

Syntax

Users can follow the syntax below to reverse the array and use the map() method afterwards.

let reversedArray = [...numbers].reverse();
let resultant_array = reversedArray.map((element, index) => { 
})

In the above syntax, we have used the spread operator and reverse() method to reverse the numbers array. After that, we use the map() method with the reversed array.

Example 1

In this example, we have created an array of numbers containing different numbers. Next, we reversed the numbers array using the reverse() method and stored it in the reversed array variable. In the output, users cans see the reversed array.

After that, we multiplied every element of the reverseArray using the map() method, which users can observe in the output.

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numbers = [10, 20, 5, 3, 2, 6, 8, 532, 7, 45, 2, 54, 76, 789];
      let reversedArray = [...numbers].reverse();
      output.innerHTML += "The original array is " + numbers + "<br/>";
      output.innerHTML += "The reversed array is " + reversedArray + "<br/>";
      let resultant_array = reversedArray.map((element, index) => {
         return element + index;
      })
      output.innerHTML += "After using the map() method in reverse order on numbers array is " + resultant_array + "<br/>"
   </script>
</body>
</html>

Access the elements in the reverse order in the callback function of the map() method

To use the map() method in the reverse order on the array, we can access the array elements in reverse order rather than reversing the array. We can pass the current index, the array itself, in the map() method's callback function and use it to access elements in reverse order.

Syntax

Users can follow the syntax below to access the elements in reverse order inside the map() method.

let resultant_array = array.map((element, index, array) => {
   array[array.length - index - 1];
})

In the above syntax, array.length – index -1 index gives an array element from the last.

Example 2

In the example below, we used the map() method with the numbersArray. In the map() method, we access the element from the end of the array using the array length and index of the current element and multiply it with two before returning it.

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output'); 
      let numbersArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      let resultant_array = numbersArray.map((element, index, array) => {
         
         // access elements in reverse order and return after multiplying with two
         return array[array.length - index - 1] * 2;
      })
      output.innerHTML += "The original array is " + numbersArray + "<br/>";
      output.innerHTML += "After using the map() method in reverse order on numbers array is " + resultant_array + "<br/>";
   </script>
</body>
</html>

Use the map() method first, and reverse a resultant array

In this approach to map array elements in reverse order, we will first use the map() method and the reverse () method. We can reverse the resultant mapped array using the slice() and reverse() methods.

Syntax

Users can follow the syntax below to use the map() method first and the reverse() method afterwards.

Let new_array = strings.map((element) => {
   
   // return element
});
new_array.reverse();

In the above syntax, new_array contains the mapped values, and we used the reverse() method with the new_array.

Example 3

In the example below, we created the array of strings. We used the map() method to capitalize the first character of every string element. After that, we used the reverse() method to reverse-mapped elements. In such a way, we have mapped string elements in reverse order.

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let strings = ["hello", "hi", "javascript", "typescript", "tutorialspoint"];
      
      // use map() method first
      let capitalized = strings.map((element) => {
         return element.substring(0, 1).toUpperCase() + element.substr(1);
      });
      
      // reverse the array
      capitalized.reverse();
      output.innerHTML += "The original array is " + strings + "<br/>";
      output.innerHTML += "The resultant array is " + capitalized + "<br/>";
   </script>
</body>
</html>

We learned three approaches to using map() in reverse order on the array with JavaScript. The best way is the second approach, accessing array elements in the reverse order inside the map() method, as it is more time efficient than others and takes less memory.