The map() function in JavaScript is a higher-order function that operates on arrays. Higher-order functions in JavaScript are a type of function that either accept functions as an argument or return functions.
The map() function allows you to transform each element of an array and create a new array based on the transformation. Creating a new array from the function is a benefit of the map() function and allows for non-destructive manipulation of the original array. The resulting array will have the same length as the original array, but with each element modified according to the transformation provided.
The syntax of the map() function is:
const newArray = array.map((element, index, array) => {
// Transformation logic
return transformedElement;
});array — The original array on which you want to apply the transformation.
element — The current element being processed.
index — The index of the current element being processed.
array — The original array itself.
Here are some examples to show how the map() function works:
Example 1: Doubling Numbers
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => {
return num * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]In this example, the map() function takes each number in the ‘numbers’ array, multiplies it by 2, and returns the transformed element, resulting in a new array with doubled numbers.
Example 2: Converting Strings to Uppercase
const names = ['john', 'jane', 'jack'];
const capitalizedNames = names.map((name) => {
return name.toUpperCase();
});
console.log(capitalizedNames); // Output: ['JOHN', 'JANE', 'JACK']The map() function converts each name in the ‘names’ array to uppercase using the toUpperCase() method and returns the modified string, resulting in a new array with capitalized names.
Example 3: Manipulating Object Properties
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Jack', age: 28 }
];
const userNames = users.map((user) => {
return user.name;
});
console.log(userNames); // Output: ['John', 'Jane', 'Jack']In this example, the map() function extracts the ‘name’ property from each object in the ‘users’ array and returns an array containing only the names.
The map() function in JavaScript provides a concise and efficient way to transform the elements of an array and create a new array based on the specified transformation logic. It simplifies the process of iterating over an array, applying modifications to each element, and collecting the results, and is a powerful tool for various data manipulation tasks.
Sources
Here are some sources that were used for research and that can be used to learn more:
MDN Web Docs — Array.prototype.map() — This is the official documentation on map() function provided by Mozilla Developer Network (MDN).
JavaScript.info — Array methods: map, filter, reduce — This page on JavaScript.info covers various array methods, including map().
W3Schools — JavaScript Array map() Method — W3Schools provides a guide on the map() function with examples and explanations