JavaScript map with index [SOLVED]

Introduction

Higher-order functions take other functions as arguments and/or return a function value, and in JavaScript, we have built-in higher-order functions such as filter, reduce, and map which are available based on the array prototype.

However, our focus is on the map function which allows us to create a new array by applying a callback function on every element in the array it’s called on. In this article, we will discuss how map works and how to work with map with index.

How JavaScript Map Works

As stated, map creates or returns a new array after the effects of a callback function have been done on an array’s elements.

Let’s illustrate how map works by changing the elements of an array by either multiplying them or adding the string “added” if the element is a Number or String. In the illustration, the map function takes a single callback function (an arrow function), and this arrow function takes one argument (the element at every iterative instance) and as within its function body the conditional logic that applies the necessary action on the element depending on their type.

const arr = [12, 34, "one", "two", 56, "four"];

const arrOptimized = arr.map((x) => {
    if (typeof x === "string") {
        return x + "added";
    } else if (typeof x === "number") {
        return x * 2;
    }
});

console.log(arrOptimized);

Output

[ 24, 68, 'oneadded', 'twoadded', 112, 'fouradded' ]

Also, remember that the map function doesn’t change the content of the array it is applied on, it only returns a new array.

JavaScript Map With Index

Now, if we need to have access to the index of each element when using the map function, it is fairly easy to access it. For the example in the previous section, the callback function took only one argument - the element - which is required. We can take other arguments which are optional, and the index argument is one such.

Therefore, if we need the index, we can add a new argument to our callback function and make use of the argument. Using the same illustration as in the previous section, we can log an updated statement with the index position.

const arr = [12, 34, "one", "two", 56, "four"];

const arrOptimized = arr.map((x, y) => {
    if (typeof x === "string") {
        console.log(`Element "${x}" of the index ${y} has been optimized`);
        return x + "added";
    } else if (typeof x === "number") {
        console.log(`Element "${x}" of the index ${y} has been optimized`);
        return x * 2;
    }
});

console.log(arrOptimized);

Output

Element 12 of the index 0 has been optimized
Element 34 of the index 1 has been optimized
Element "one" of the index 2 has been optimized
Element "two" of the index 3 has been optimized
Element 56 of the index 4 has been optimized
Element "four" of the index 5 has been optimized
[ 24, 68, 'oneadded', 'twoadded', 112, 'fouradded' ]

The x and y bindings represent the element and the index of the said element at every iterative instance.

Summary

To work with map is an interesting approach, especially with composability, and if you need access to the index of the element within the map, you can make use of the second argument that’s optional for your callback function. With that, map with index is possible and easy to use.

References

Array.prototype.map() - JavaScript | MDN (mozilla.org)