JavaScript map index: The Complete Guide

0
1337
JavaScript Map Index - How to Use Index Inside Map

To access the index of the array map() method, use the second argument of the callback function. The array map() method creates the new array populated with the results of calling the provided function on every item in the array.

JavaScript map index

To find an index of the current iterable inside the JavaScript map() function, use the callback function’s second parameter. An index used inside the JavaScript map() method is to state the position of each item in an array, but it doesn’t modify the original array.

Syntax

array.map(function(currentItem, index, arrayobj), thisValue)

Parameters

The array map() method accepts the first parameter as a function, and that function accepts the following three parameters.

  1. currentItem: The currentItem is a required argument in the map(), which is the value of the current item.
  2. index: The index is the optional parameter, which is the array index of the provided current item.
  3. arrayobj: The arrayobj is an optional parameter in the callback, the array object where the current item belongs.

The array.map() function accepts thisValue as a second parameter, and it is optional. It is a value to be passed to the function as its “this” value. If the parameter is empty, the value “undefined will be passed as its “this” value.

Return Value

JavaScript map() function returns a new array, with each item being the result of the callback function.

Example

Create a file called app.js and add the following code.

// app.js

let ceos = ['Sundar', 'Mark', 'Tim', 'Jeff'];

ceos.map((ceo, index) => console.log(`The ${index} is ${ceo}`));

In this example, first, we defined an array of CEOs.

Then use the map() function to print the index of each element and CEO.

Let’s see the output.

The 0 is Sundar
The 1 is Mark
The 2 is Tim
The 3 is Jeff

You can see that we have used ES6 features like template literals and arrow function.

Let’s see a scenario where we square every number in the array using the map() function.

// app.py

let nums = [11, 18, 19, 21];

cal = nums.map(x => x * x);

console.log(cal);

Output

[ 121, 324, 361, 441 ]

You can see that the map() function returns a new array with squared elements.

The map() method calls the provided function once for each item in an array, in order.

Pass the second argument of Array.map() method

The second argument of Array.map() is an object which will be this value for the callback function.

Remember that you have to use the regular function keyword to declare the callback since an arrow function doesn’t have its binding to this keyword.

So, if you are planning to use the thisValue parameter in the map() function, then don’t use the arrow function as a callback function; use the regular function keyword. If you are not, then feel free to use an arrow function.

See the following code with the third argument and a normal callback function.

// app.js

const array = [11, 21, 19, 18];

const thisObj = { key: 46 };

const map = array.map(function (x, index, array) {
  console.log('The array is: ', array);
  console.log('The value of "this" is', this);
  console.log('The index is: ', index);
}, thisObj);

Output

The array is:  [ 11, 21, 19, 18 ]
The value of "this" is { key: 46 }
The index is:  0
The array is:  [ 11, 21, 19, 18 ]
The value of "this" is { key: 46 }
The index is:  1
The array is:  [ 11, 21, 19, 18 ]
The value of "this" is { key: 46 }
The index is:  2
The array is:  [ 11, 21, 19, 18 ]
The value of "this" is { key: 46 }
The index is:  3

You can see that we have logged the array, thisValue, and index inside the map() function.

That is it for this tutorial.

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.