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

31 Dec, 2019
Given a JavaScript array and the task is to apply the map() method but on the reverse of the array efficiently. Here are a few approaches discussed. If you don’t want to change the original array then you can create a shallow copy of the array after that you can perform the task.
Approach 1: The idea is to use .reverse() method just after applying .slice() method. Then use the .map() method on the reversed array to perform the task.
Example: This example implements the above approach.<!DOCTYPE HTML><html>  <head>    <title>        How to use map() on an array in        reverse order with JavaScript ?    </title>      <style>        body {            text-align: center;        }        h1 {            color: green;        }        #geeks {            font-weight: bold;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <p>        Click on the button to use        <b>map()</b> on array in         <b>reverse</b> order<br>        Array = [1, 3, 5, 7, 9, 10];    </p>          <button onclick="gfg_Run()">        Click Here    </button>          <p id="geeks"></p>          <script>        var el_down = document.getElementById("geeks");        var arr = [1, 3, 5, 7, 9, 10];          /* Main function */        function gfg_Run() {            newArr = arr.slice(0).reverse().map(                function(val, index) {                    return val * 2;                }            );                          el_down.innerHTML = "New Array = ["                                + newArr + "]";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to use map() on an array in        reverse order with JavaScript ?    </title>      <style>        body {            text-align: center;        }        h1 {            color: green;        }        #geeks {            font-weight: bold;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <p>        Click on the button to use        <b>map()</b> on array in         <b>reverse</b> order<br>        Array = [1, 3, 5, 7, 9, 10];    </p>          <button onclick="gfg_Run()">        Click Here    </button>          <p id="geeks"></p>          <script>        var el_down = document.getElementById("geeks");        var arr = [1, 3, 5, 7, 9, 10];          /* Main function */        function gfg_Run() {            newArr = arr.slice(0).reverse().map(                function(val, index) {                    return val * 2;                }            );                          el_down.innerHTML = "New Array = ["                                + newArr + "]";        }    </script></body>  </html>
Output:
Approach 2: In this approach we will use the .map() method and call a function inside this method with 2 arguments (value, index). Now we need to access the value, we will access it from reverse side (eg.. arr[arr.length – 1 – index]), this is immutable operation (It doesn’t change the original array).
Example: This example implements the above approach.<!DOCTYPE HTML><html>  <head>    <title>        How to use map() on an array in        reverse order with JavaScript ?    </title>          <style>        body {            text-align: center;        }        h1 {            color: green;        }        #geeks {            font-weight: bold;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <p>        Click on the button to use         <b>map()</b> on array in         <b>reverse</b> order<br>        Array = [8, 5, 15, 70, 9, 10];    </p>          <button onclick="gfg_Run()">        Click Here    </button>          <p id="geeks"></p>          <script>        var el_down = document.getElementById("geeks");        var arr = [8, 5, 15, 70, 9, 10];                  /* Main function */        function gfg_Run() {            newArr = arr.map((val, index, array) =>                     1/2*arr[arr.length - 1 - index]);                          el_down.innerHTML = "New Array = ["                                + newArr + "]";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to use map() on an array in        reverse order with JavaScript ?    </title>          <style>        body {            text-align: center;        }        h1 {            color: green;        }        #geeks {            font-weight: bold;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <p>        Click on the button to use         <b>map()</b> on array in         <b>reverse</b> order<br>        Array = [8, 5, 15, 70, 9, 10];    </p>          <button onclick="gfg_Run()">        Click Here    </button>          <p id="geeks"></p>          <script>        var el_down = document.getElementById("geeks");        var arr = [8, 5, 15, 70, 9, 10];                  /* Main function */        function gfg_Run() {            newArr = arr.map((val, index, array) =>                     1/2*arr[arr.length - 1 - index]);                          el_down.innerHTML = "New Array = ["                                + newArr + "]";        }    </script></body>  </html>
Output:
javascript-array
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?