Youn

Posted on Nov 13

JavaScript Array map() Function

#javascript #function #array #map

😄 This post is based on the content from coding.courses.

Definition and Usage

The map() function applies a given callback function to each element of an array and returns a new array.
The original array remains unchanged during this process.

The callback function passed to the map() function transforms each element and returns a new array with these transformed values.
This process is called "mapping", which is why the function is named map() — it maps original values to new ones.
Mapping refers to the process of associating one value with another.
This concept is used in various fields such as mathematics, computer science, and geographic information systems (GIS).

Why Use the map() Function?

The map() function is used to transform each element in an existing array according to a specific rule or logic defined in the callback function, and then creates a new array composed of the transformed elements.

Creating a new array of squared values from a number array
Converting all strings in an array to lowercase
Extracting only specific properties from objects when the array elements are objects
Changing the values of array elements based on conditions using conditional statements

Simple Example to Understand the Concept

The following example demonstrates how to use the map() function to create a new array by doubling each number in a numeric array.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
    return number * 2; // Returns a new mapped array
});

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

// The original array remains unchanged.
console.log(numbers); // Output: [1, 2, 3, 4, 5]

# How to Use the map() Function

Visually, the usage of map() can be understood as follows:

/* The map() function is
   used to transform each element of an array. */

// In the following example, the goal is to convert all lowercase letters to uppercase.
[a, b, c, d].map(lowercase → uppercase) 👉 [A, B, C, D]

# Key Point!

The map() function iterates over each element and collects the values returned by the callback function, creating a new (mapped) array. Therefore, the callback function must return the transformed or processed result for each corresponding element.

Syntax

arr.map(callbackFn)
arr.map(callbackFn, thisArg)

arr is the array that the map() function is called on.

Parameters

# callbackFn

The callback function applied to each element of the array arr.
It accepts up to three arguments:

currentValue (required): The current element being processed.
index (optional): The index of the current element.
array (optional): The original array on which map() was called.

# thisArg

An object to use as this when executing the callbackFn.
This parameter is optional and rarely needed.

Callback Function Syntax

Here are the common ways to write the callback function (callbackFn) for map():

// Arrow function with only current value:
map((element) => { /* … */ })

// Arrow function with current value and index:
map((element[, index]) => { /* … */ })

// Arrow function with current value, index, and original array:
map((element[, index[, array]]) => { /* … */ })

// Using a named callback function:
map(callbackFn)
// or with thisArg:
map(callbackFn[, thisArg])

// Inline anonymous function:
arr.map(function(element) { /* ... */ })
arr.map(function(element, index) { /* ... */ })
arr.map(function(element, index, array) { /* ... */ }, thisArg)

The map() function calls the callback once for each element in the array arr in order. It collects the return values of the callback and creates a new array from them. Importantly, the original array is not modified during this process.

Return Value

Returns a new array containing the results of applying the callback function to each element of the original array.

References