How to get current index in Array prototype map?

Question

I'm using Array.prototype.map.call to store in an array a bunch of node list objects:

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e) {
         return {
             rectangle: e.getBoundingClientRect();
         }
    }
}

However, I also want to store the order in which this elements appear in the DOM, and I don't know how to do that.

I know that I'm storing this in an array, and the order would be the index of the array. For example:

var listings = getListings();
console.log(listings[0]); // rank #1
console.log(listings[1]); // rank #2
// etc...

but I'm inserting the json object in a database, and the easiest way to store the "rank" information is by creating a property "rank" in my object, but I don't know how to get the "index" of the current array.

Something like:

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e) {
         return {
             rectangle: e.getBoundingClientRect(),
             rank: magicFunctionThatReturnsCurrentIndex() // <-- magic happens
         }
    }
}

Any help pointing me to the right direction will be greatly appreciated! Thanks

Answer 1

The MDN documentation says:

callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.

So

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e, rank) { // magic 
         return {
             rectangle: e.getBoundingClientRect(),
             rank: rank // <-- magic happens
         }
    }
}