Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use map() on an array in reverse order with JavaScript?
The map() method creates a new array by transforming each element. Sometimes you need to process array elements in reverse order. Here are three effective approaches to achieve this.
Introduction to map() Method
Syntax
array.map((element, index, array) => {
return element + 20;
})
Parameters
element - The current array element being processed
index - The index of the current element
array - The original array being mapped
Method 1: Reverse Array Then Map
First reverse the array using reverse(), then apply map() to the reversed array.
Syntax
let reversedArray = [...numbers].reverse();
let resultArray = reversedArray.map((element, index) => {
// transformation logic
})
Example
<html>
<body>
<h3>Using array.reverse() and array.map() methods</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let numbers = [10, 20, 5, 3, 2, 6, 8, 532, 7, 45];
// Create reversed copy using spread operator
let reversedArray = [...numbers].reverse();
output.innerHTML += "Original array: " + numbers + "<br/>";
output.innerHTML += "Reversed array: " + reversedArray + "<br/>";
// Apply map to reversed array
let resultArray = reversedArray.map((element, index) => {
return element + index;
});
output.innerHTML += "Mapped in reverse order: " + resultArray + "<br/>";
</script>
</body>
</html>
Method 2: Access Elements in Reverse Order (Recommended)
Access array elements from the end using array.length - index - 1 inside the map callback. This is the most efficient approach.
Syntax
let resultArray = array.map((element, index, array) => {
let reverseElement = array[array.length - index - 1];
// process reverseElement
})
Example
<html>
<body>
<h3>Accessing elements in reverse order within map()</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let numbersArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let resultArray = numbersArray.map((element, index, array) => {
// Access elements from end and multiply by 2
return array[array.length - index - 1] * 2;
});
output.innerHTML += "Original array: " + numbersArray + "<br/>";
output.innerHTML += "Mapped in reverse order: " + resultArray + "<br/>";
</script>
</body>
</html>
Method 3: Map Then Reverse Result
Apply map() to transform elements, then use reverse() on the resulting array.
Syntax
let newArray = strings.map((element) => {
// transformation logic
return transformedElement;
});
newArray.reverse();
Example
<html>
<body>
<h3>Using map() first, then reverse()</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let strings = ["hello", "hi", "javascript", "typescript", "tutorialspoint"];
// First apply map() to capitalize first letter
let capitalized = strings.map((element) => {
return element.charAt(0).toUpperCase() + element.slice(1);
});
// Then reverse the result
capitalized.reverse();
output.innerHTML += "Original array: " + strings + "<br/>";
output.innerHTML += "Capitalized and reversed: " + capitalized + "<br/>";
</script>
</body>
</html>
Comparison
| Method | Performance | Memory Usage | Best For |
|---|---|---|---|
| Reverse then Map | Slower | Extra array copy | Simple cases |
| Access in Reverse Order | Fastest | Minimal | Most scenarios (recommended) |
| Map then Reverse | Slower | Extra operations | When you need the mapped array first |
Conclusion
Method 2 (accessing elements in reverse order within map) is recommended as it's most efficient. Use Method 1 or 3 when you need intermediate arrays for other operations.
4K+ Views
