Map Index in JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Map Index in JavaScript
Muhammad Muzammil Hussain Oct 12, 2023
JavaScript JavaScript Map
Map Index in JavaScript

The JavaScript map method is pretty easy to implement, and we will discuss its different parameters and how they are used in different scenarios.

Using the array.map() Method in JavaScript

The JavaScript array.map() method calls a specific function for every element of the array and, as a result of this, returns a new array.

The important thing is that the method does not change the original array. It returns a new processed array.

Syntax:

array.map(call_Back_Function(element, index, arr) {
  // Code to perform operation on array
}, this)

the Different Parameters of array.map() Method Are

  • The call_Back_Function is a specific function that produces new array elements after performing the defined operation on the old array.
  • The element is the current element of the original array on which we will operate.
  • The index is the index of the current element on which we will perform a specific operation.
  • The arr is the original array on which we will perform the required operation to get a new processed array. Here its value is optional.
  • The this during the execution of the callback function’s value is used as this. Its value is also optional.

Return

As a result of the array.map() method, we get a new array whose every element is generated from a call_Back_Function.

The following are the array.map() method is not called which are:

  • Indexes that have never been set.
  • All those indexes have been deleted.

When Not to Use array.map()

We must not use the array.map() method in the following circumstances:

  • Don’t use the array.map() method if there isn’t an array to which we need to perform the required operation.
  • Avoid using the array.map() method if you need your array elements to remain the same without performing any operation.

In the following lines of code, we will map an array of numbers to an array of square roots.

var numbers = [1, 4, 9];
var square_roots = numbers.map(function(numbers) {
  return Math.sqrt(numbers)
})
                   // So, orignal array remained the same, numbers = [1, 4, 9]
                   // new processed array as output is, square_roots = [1, 2, 3]

In the following, the array.map() method returns a new processed array of whole numbers after operating on an array of decimal numbers.

var orignal_array = [1.5, 4.3, 6.4, 8.7];
var new_array = orignal_array.map(Math.round);
document.writeln(new_array);

// Here orignal_array will remain same [1.5, 2.3, 5.4]
// new processed array output is [2, 4, 6, 9]

Similarly, we can use the array.map() method to reformat array objects.

var array =
    [{id: 1, name: 'owais'}, {id: 2, name: 'ali'}, {id: 3, name: 'ahmed'}]

array.map(function(obj) {
  console.log(obj.id)
  console.log(obj.name)
})

// console output
1
'owais'
2
'ali'
3
'ahmed'

Further, the following examples demonstrate where and how we can use the JavaScript array.map() method.

Example 1:

<html>
    <head>
        <title>
            JS map() method explanation
        </title>
    </head>

    <body>
        <h2>
            JavaScript array map() method demonstration
        </h2>
        <!-- javascript array map method -->
        <script>
            let employees = ["Owais", "Ahmad","Hassan", "Mughira", "Wasim"];
            
            employees.map((emp, index) => 
            {
                alert("Greetings__Mr. " + emp + "\n");
                index++;
                alert("On employee rank, You have got Position : " + index + "\n");
            });
        </script>
    </body>

</html>

Output:

Greetings__Mr. Owais 
On employee rank, You have got position : 1
Greetings__Mr. Ahmad 
On employee rank, You have got position : 2
Greetings__Mr. Hassan 
On employee rank, You have got position : 3
Greetings__Mr. Mughira 
On employee rank, You have got position : 4
Greetings__Mr. Wasim 
On employee rank, You have got position : 5

Example 2:

<html>
    <head>
        <title> JavaScript map method demonstration </title>
    </head>

    <body>

        <h1 style="color: brown;"> <u> map index in javascript array </u></h1>

        <p><b> Here we have a word "DELFTSTACK" and by using JavaScript 
            map index we will identify element on every index.</b> </p>

        <script>
            const name = [ 'D', 'E', 'L', 'F', 'T', 'S','T','A','C','K'];
            name.map((element, index) => {
                document.write("Iteration no : " + index);
                document.write("<br>");
                document.write("Element = " + element);
                document.write("<br>");
                document.write("<br>");
                return element; 
            });
        </script>

    </body>
</html>

Output:

map index in javascript array
Here we have the word "DELFTSTACK," and we will identify elements on every index using JavaScript map index.

Iteration no : 0
Element = D

Iteration no : 1
Element = E

Iteration no : 2
Element = L

Iteration no : 3
Element = F

Iteration no : 4
Element = T

Iteration no : 5
Element = S

Iteration no : 6
Element = T

Iteration no : 7
Element = A

Iteration no : 8
Element = C

Iteration no : 9
Element = K

The above examples described the array.map() method in JavaScript and the indexing method as an argument in the callback function.

Related Article - JavaScript Map