AppDividend
Latest Code Tutorials

JavaScript Map Index: How to Use Index Inside Map

0

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

JavaScript Map Index

To find index of the current iterable inside the JavaScript map() function, you have to 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, which is 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 to be used 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 in which we square every number in the array using 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 JavaScript map index example.

Leave A Reply

Your email address will not be published.

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