Map() vs for() in Javscript for looping reversely

Hi everyone,

I have an array like following:
let array = [1,2,3,4,5];

I want to loop over this array in a reverse manner and return a new array. So, my first guess was to use map(). But, I don’t know how iterate this array reversely using map(). There is a solution to this is that I have to map() by using array.reverse(). I guess, reverse() must be also looping and reversing in its logic. So, I thought I should use for() loop here where I will only be looping once(let i = array.length -1; i>=0; i++) through the array whereas if I am using map(), I have to loop twice(1. for the reverse() and 2. the map() itself).

My question is, which method is efficient and should I use map() or for() ? If someone can suggest me iterating array reversely in map() ?

Here’s how you do it:

array.reverse().map(function(...

If you don’t want to reverse the original array, you can make a shallow copy of it then map of the reversed array,

array.slice(0).reverse().map(function(...

Is there any benefit of using slice(0) over slice()?
And the second version could avoid the slice by reversing after the map. Unless the order is important for the mapping.

The argument is required for the slice method.

@GhostRoboXt, I already mentioned this method that using reverse() then map() will loop it twice. Shouldn’ t I be using for() by looping it reversely ?

Actually, the first and second arguments are optional. If the first argument is omitted, the slice starts from index 0.

@Blauelf, Yes, the order is important as I have to print it reversely. So, what is your take on map() and for() ?

Other than changing the order of the elements in the original array, what transformation are you making to its elements?

@RandellDawson, I just want to print it. I don’t want to make any changes.

Then you would not use the map method at all. It is for creating a new array with transformed elements of the original array.

In this case, you would slice (to create a new array without changing this original one) and then reverse the new array.

const array = [1, 2, 3, 4, 5];
const reversedArray = array.slice().reverse();

@RandellDawson, So if I will reverse it and then I will print it by looping over it. Doesn’t this method loops twice ? I guess reverse() must be also looping over it as well and then we will print the values again by looping after doing reverse() ? Is it efficient ? Whereas, in for() I could only loop it once by iterating reversely ?

Regarding whether to use a for loop vs slice().reverse(), that is more to do with how big the array would be. In general, when we can write code that is readable and accomplishes the task in a “reasonable” time, then we go with the more readable/concise version. Though the for loop might technically be a little faster, it would also be less readable and more code to write.

What actually would you want to display in each iteration? And by display do you mean to the console or to the browser?

Generally 2 linear operation vs 1 linear operation is considered to be the same in programming, so you don’t have to worry about number of operations.

There is no way map() should be used to print values in any order

@RandellDawson, I am creating a simple todo app without any backend. I wanted to display the recently added task in the top rather than at the last which is a default action. So, whenever, I add a task, I will push it to the array which will add the task at the bottom of the list. But, if i use unshift(), then it will add at the top of the list, but I guess, internally JS also shift the indexes so that the new item would be adjustable in the array. This action is inefficient I guess. So, I thought why not I push it in the array but display the list reversely which can actually be efficient. So, this is what I wanted to do. Please, suggest me a better approach.

Are you using React or vanilla JavaScript?

@snigo, Methods:

  1. reverse() and then map()
  2. using for() reversely

So, according to you, both the methods are same. But map() cannot be used to print values in any order.

But, doesn’t the first method is loped twice but second isn’t. Doesn’t this affect the performance ?

@RandellDawson

React

You’ll be fine with this:

[...tasks].reverse().map(render);
// it will actually traverse tasks 3 times and that's totally fine

*By print I meant console.log, to render task you would use map to map task to it’s HTML element

@snigo, Can you please suggest any answers to this ?

I think, I will be using this.