# .map method in JavaScript

### <mark>Let’s start with .map inBuilt function.</mark>

> ***The*** `map()` method is used to iterate through the array and complete the function by creating a new array, without changing the given parameter Array
> 
> ### \*\*\*//SYNTAX
> 
> [`arr. map`](http://arr.map)`(callback(currentValue), thisArg)***`

Let’s see an example of Why MAP is used:

```jsx
// Add 2 to each array element
let array = [1,2,3,4]
let result = []
for(let i = 0;i<array.length ; i++){
    result.push(array[i]+2)
}
console.log(result) // output = [ 3, 4, 5, 6 ]
```

* ***<mark>Explanation of code</mark>***
    
    *Let’s take the* `array with 4 Elements`
    
    ```jsx
    //Here is an Array 
    let array = [1,2,3,5]
    ```
    
    *Then Again* `FOR Loop`, which iterates through the array and takes each `array[i]` value and push it into a new variable array by adding it to the result.
    
    ```jsx
    let result = []
    for(let i = 0;i<array.length ; i++){
        result.push(array[i]+2)
    }
    ```
    
* *Above Example, Here for adding the 2 to each element of the array. We used for loop to iterate in each and take an extra variable called result to give output.*
    
* *But the coder becomes efficient when he solves the problem in a shorter and smart way*
    
* *so, just can't we do it better? YES OR NO!!!!!*
    

<mark>💡 </mark> ***<mark>YES!!!!! For better use and efficient work, MAP was made as an inbuilt function. So, let’s see What it is!!!!</mark>***

```jsx
let array = [1,2,3,4]
const addElementWith2 = (array) =>array.map(num => num + 2)
console.log(addElementWith2(array)) // output = [ 3, 4, 5, 6 ]
```

* ***<mark>Explanation of code</mark>***
    
    ***Let’s take the*** `array with 4 Elements`
    
    ```jsx
    //Here is an Array 
    let array = [1,2,3,5]
    ```
    
    * ***When we use the Map function,***
        
    * ***We take a new variable function with*** `Const` then we pass the argument as `Array`.
        
    * ***Then*** `.map` takes the action of `For` loop and takes `Array[i] as an argument with name num`
        
    * ***And then*** `call back of function` continues and gives the `result`
        
    
    ```jsx
    const addElementWith2 = (array) =>array.map(num => num + 2)
    console.log(addElementWith2(array))
    ```
    

![https://media.tenor.com/SyptFPsptzoAAAAC/wow-oh-my-god.gif](https://media.tenor.com/SyptFPsptzoAAAAC/wow-oh-my-god.gif align="center")

<mark>💡 </mark> ***<mark>YES!!!!! Just in one line, we have finished the array problem. By using Map Function</mark>***

### ***Key Points of the MAP method***

1. *.map inBuilt Function accepts only function.*
    
2. *Either write the function at the same pace or just create a function and call back it from .map*
    
3. *This method accepts two parameters*
    

* *function(currentValue, index, arr)*
    
    * ***currentValue****: It is a required parameter and it holds the value of the current element.*
        
    * ***index****: It is an optional parameter and it holds the index of the current element.*
        
    * ***arr****: It is an optional parameter and it holds the array.*
        

1. *Gives a new array as output with the filtered condition*
    
2. *we can use objects inside the list and destruct while writing the function*
    

💡 ***Can we use the objects????***

> ***Yes!!! we can but objects should be encoated within the List***