jQuery map() function

The jQuery map() function translates all items in an object or in array to a new array of items. It applies a function to each item of the object or array and maps the results into a new array.

Syntax

Parameter values

The map() function accepts two parameters that are defined as follows.

array/object: It is the array/object to translate.

callback: It is the function to be called for every item in the current set of matched elements. This function can return an array of values, null or undefined. The null or undefined values are used for removing the items.

Let's understand the working of the map() function by using some illustrations.

Example1

In this example, we are using jQuery.map() function to map the original array to a new one and add a value 5 to each item of the original array.

On clicking the button, the function will return the new array with the updated values.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery map() function

After clicking the given button, the output will be -

jQuery map() function

Example2

In this example, we are using the map() function to concatenate a new character J to the every element of the existing array.

On clicking the button, the function will return the new array with the updated values.

Test it Now

Output

After the execution of above code, the output will be -

jQuery map() function

After clicking the given button, the output will be -

jQuery map() function

Example3

In this example, we are using the map() function to remove some items from the array. The function will map the original array to a new one, and add the value 7 to the item if the item is greater than 10, else the function will remove the element if it is smaller than the value 10.

Here, we are using the null parameter of the callback function that removes the elements not satisfying the condition. On clicking the button, the function will return the new array with the updated values.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery map() function

After clicking the given button, the output will be -

jQuery map() function

In the output, we can see the elements smaller than 10 are removed, and the elements larger than 10 are increased by the value 7.






Contact US

Email:[email protected]

jQuery map() function
10/30