Is there a way to use map() on an array in reverse order with javascript?

Use math on the index provided to the mapping function in order to access elements in reverse order, rather than using the provided val:

myArray.map((val, index) => myArray[myArray.length - 1 - index]);

This is O(n) and does not mutate nor copy the input array.

The third parameter to the mapping function is the underlying collection, so that can also avoid the need to refer to it via a closure:

myArray.map((val, index, array) => array[array.length - 1 - index]);

You can use Array.prototype.reduceRight()

var myArray = ["a", "b", "c", "d", "e"];
var res = myArray.reduceRight(function (arr, last, index, coll) {
    console.log(last, index);
    return (arr = arr.concat(last))
}, []);
console.log(res, myArray)

With Named callback function

const items = [1, 2, 3]; 
const reversedItems = items.map(function iterateItems(item) {
  return item; // or any logic you want to perform
}).reverse();

Shorthand (without named callback function) - Arrow Syntax, ES6

const items = [1, 2, 3];
const reversedItems = items.map(item => item).reverse();

Here is the result

Another solution could be:

const reverseArray = (arr) => arr.map((_, idx, arr) => arr[arr.length - 1 - idx ]);

You basically work with the array indexes

You just need to add .slice(0).reverse() before .map()

students.slice(0).reverse().map(e => e.id)

I prefer to write the mapReverse function once, then use it. Also this doesn't need to copy the array.

function mapReverse(array, fn) {
    return array.reduceRight(function (result, el) {
        result.push(fn(el));
        return result;
    }, []);
}

console.log(mapReverse([1, 2, 3], function (i) { return i; }))
// [ 3, 2, 1 ]
console.log(mapReverse([1, 2, 3], function (i) { return i * 2; }))
// [ 6, 4, 2 ]

I think put the reverse() key after map is working.

tbl_products
  .map((products) => (
    <div
      key={products.pro_id}
      class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/4 transform transition duration-500 hover:scale-105"
    >
      <article class="overflow-hidden rounded-lg border shadow">
        <a href="#">
          <img
            alt="Placeholder"
            class="block h-auto w-full px-5 pt-3"
            src={products.product_img}
          />
        </a>
      </article>
    </div>
  ))
  .reverse();

In my case, it is working

You can do myArray.reverse() first.

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
    console.log(el + " ")
});

Here is my TypeScript solution that is both O(n) and more efficient than the other solutions by preventing a run through the array twice:

function reverseMap<T, O>(arg: T[], fn: (a: T) => O) {
   return arg.map((_, i, arr) => fn(arr[arr.length - i - 1]))
}

In JavaScript:

const reverseMap = (arg, fn) => arg.map((_, i, arr) => fn(arr[arr.length - 1 - i]))

// Or 

function reverseMap(arg, fn) {
    return arg.map((_, i, arr) => fn(arr[arr.length - i - 1]))
}

First, you should make a shallow copy of the array, and then use that function on the copy.

[...myArray].reverse().map(function(...

function mapRevers(reverse) {
    let reversed = reverse.map( (num,index,reverse) => reverse[(reverse.length-1)-index] );
    return reversed;
}

console.log(mapRevers(myArray));

I You pass the array to map Revers and in the function you return the reversed array. In the map cb you simply take the values with the index counting from 10 (length) down to 1 from the passed array

If you are using an immutable array from let's say a redux reducer state, you can apply .reverse() by first making a copy like this:

const reversedArray = [...myArray].reverse();
//where myArray is a state variable

//later in code
reversedArray.map((item, i)=>doStuffWith(item))

Add reverse() into your code snippet:

YourData.reverse().map(...)

Be aware that this will mutate the original array, which can be an issue.

An old question but for new viewers, this is the best way to reverse array using map

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());