We will get to know how to iterate over a Map in reverse order using JavaScript with some methods. Each way is rather straightforward, and you can choose whichever you like.
Iterate over a Map in reverse order using JavaScript
Using reverse() with spread syntax
You can read about the spread syntax here.
Syntax:
reverse()
Return: the array which calls the method, in reversed order.
The following example will traverse a Map inside a for loop by using a spread syntax inside the brackets to create an array and then call the reverse() function:
var map = new Map();
map.set("learn","LEARN")
map.set("share","SHARE")
map.set("it","IT")
//iterate over the reverse of an array of maps’ elements
for (i of [...map].reverse())
console.log(i)Output:
(2) ['it', 'IT']
(2) ['share', 'SHARE']
(2) ['learn', 'LEARN']
The below example used a spread syntax to create a new array which contains all the elements of the map. And then we call the reverse() method to get those elements in reversed order so that we can loop through it in the loop. If you don’t understand the spread syntax then you can use the following solution instead.
Using Array.from() with reverse()
This approach may resemble the previous solution. We will use Array.from() to create a new array which includes all the elements in the map.
Syntax:
Array.from(object)
Parameter:
- object: the object (in this case is a map) that you want to get an array from.
First, we need an example to know exactly what the function will return:
var map = new Map();
map.set("learn","LEARN")
map.set("share","SHARE")
map.set("it","IT")
//crate an array of maps’ elements using Array.from()
var array = Array.from(map)
//iterate over the reverse of an array of maps’ elements
for (i of array.reverse())
console.log(i)Output:
(2) ['it', 'IT']
(2) ['share', 'SHARE']
(2) ['learn', 'LEARN']
As you can see, this method will produce the same result as the previous one. If you don’t want to create a new array of all elements, then you can follow the next solution of creating a new array of all iterables..
Using unshift() with iterable
This approach may create a new array, but it will consume less memory as the element in the array is an iterable object, which is smaller in memory size than the objects in the maps.
Syntax:
array.unshift()
Let’s see an example to know exactly what the function will return:
var map = new Map();
map.set("learn","LEARN")
map.set("share","SHARE")
map.set("it","IT")
//initialize an iterable of the map at the beginning
var iterable = map[Symbol.iterator]()
//create a new array to push iterable
var array = [];
//push iterables at the first index of the array using unshift
for (i of map)
array.unshift(iterable.next())
//iterate over the array of maps’ iterable in reversed order
for (i = 0 ; i<array.length; i++)
console.log(array[i].value)Output:
(2) ['it', 'IT']
(2) ['share', 'SHARE']
(2) ['learn', 'LEARN']
The logic behind this solution is very easy to understand. Because we want to iterate over a map, we then keep those iterables in an array so that we can access any iterable at any given index in a map by accessing the corresponding array element. However, if we want to iterate in the reverse order, we can reverse() the array just like the first two solutions. Or we can use the unshist() method to add the iterable to the first index of the array, as a result, the array we receive is already in the reversed order.
Summary
We have shown you how to iterate over a Map in reverse order using JavaScript using three different methods. It would help if you considered that the first solution is what most programmers use.
Maybe you are interested:
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
