What is Map Function?
In JavaScript, the map()
method is a function that creates a new array with the results of calling a provided function on every element in the calling array.
Syntax
Here's the syntax for using map()
:
const newArray = array.map(function (element, index, array) {
// return element for newArray
});
The map()
function takes a callback function as an argument, which is applied to each element of the array. The callback function takes three arguments:
-
element
: the current element being processed in the array -
index
(optional): the index of the current element -
array
(optional): the array that map() is being applied to
The map()
function returns a new array with the same length
as the original array, but with each element transformed by the callback function.
Here's an example of using map()
to double the value of each element in an array:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function (number) {
return number * 2;
});
console.log(doubledNumbers); // prints [2, 4, 6, 8, 10]
In the example above, the callback
function is an anonymous function that takes a single argument, number
, and returns its value multiplied by 2. The map()
method calls this function for each element in the numbers
array and creates a new array with the returned values.
You can also use an arrow function as the callback
function, like this:
const doubledNumbers = numbers.map((number) => number * 2);
The map()
method is useful for transforming an array into a new array of a different shape or structure. It is similar to the forEach()
method, but it returns a new array, whereas forEach()
does not return a new array.
Examples
Here are a few more examples of how you can use map()
:
Example 1: Transforming an array of strings to Uppercase
const names = ["Alice", "Bob", "Charlie"];
const upperCaseNames = names.map((name) => name.toUpperCase());
console.log(upperCaseNames);
// prints ['ALICE', 'BOB', 'CHARLIE']
Example 2: Transforming an array of numbers to its square
const numbers = [1, 2, 3, 4, 5];
const squareNumbers = numbers.map((number) => number * number);
console.log(squareNumbers);
// prints [1, 4, 9, 16, 25]
Example 3: Extracting the values of an object
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" },
];
const names = users.map((user) => user.name);
console.log(names);
// prints ['Alice', 'Bob', 'Charlie']
Example 4: Transforming an array of objects
const users = [
{ id: 1, firstName: "Alice", lastName: "Wonderland" },
{ id: 2, firstName: "Bob", lastName: "Marley" },
{ id: 3, firstName: "Charlie", lastName: "Brown" },
];
const newUsers = users.map((user) => ({
id: user.id,
fullName: user.name + " " + user.lastName,
}));
console.log(newUsers);
// prints [{ id: 1, fullName: 'Alice Wonderland' }, { id: 2, fullName: 'Bob Marley' }, { id: 3, fullName: 'Charlie Brown' }]
Note: We can also use Object Destructuring to make the code more readable. Here's how:
const newUsers = users.map(({ id, firstName, lastName }) => ({
id,
fullName: `${firstName} ${lastName}`,
}));
Example 5: Transforming an array of objects
Here is an example of how you might use the map()
method in the context of an e-commerce website.
Imagine that you have an array of products, and each product is represented by an object with the following properties:
-
id
: the unique ID of the product -
name
: the name of the product -
price
: the price of the product
You can use the map()
method to create a new array that contains the names
and prices
of all the products.
Here's the code that does this:
const products = [
{ id: 1, name: "Product 1", price: 10 },
{ id: 2, name: "Product 2", price: 15 },
{ id: 3, name: "Product 3", price: 20 },
];
const namesAndPrices = products.map((product) => {
return {
name: product.name,
price: product.price,
};
});
// or
const anotherWay = products.map(({ name, price }) => ({ name, price }));
console.log(namesAndPrices);
// prints [{ name: 'Product 1', price: 10 }, { name: 'Product 2', price: 15 }, { name: 'Product 3', price: 20 }]
map()
vs forEach()
The map()
method is similar to the forEach()
method, but there are a few key differences:
- The
map()
method returns a new array, whereasforEach()
does not return a new array. - The
map()
method can be used to transform an array into a new array of a different shape or structure, whereasforEach()
can only be used to iterate over the elements of an array. - The
map()
method is chainable, whereasforEach()
is not.
Chainable Methods
A chainable method is a method that can be called on an object and returns the object itself. This allows us to chain multiple methods together.
For example, the map()
method is chainable, so we can call it on an array and then call another method on the returned array. Here's an example:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers
.map((number) => number * 2)
.filter((number) => number > 5);
console.log(doubledNumbers); // prints [6, 8, 10]
Note: We're going to learn more about array.filter()
in coming doc. For now just remember it is used to filter the data from the array based on condition
In the example above, we first call the map()
method on the numbers
array to create a new array with the doubled values. Then we call the filter()
method on the returned array to create a new array with only the values that are greater than 5.
The forEach()
method is not chainable, so we can't call another method on the returned value. Here's an example:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers
.forEach((number) => number * 2)
.filter((number) => number > 5);
// This will error
// TypeError: numbers.forEach(...).filter is not a function
In the example above, we first call the forEach()
method on the numbers
array to create a new array with the doubled values. Then we try to call the filter()
method on the returned array to create a new array with only the values that are greater than 5. But this will error because the forEach()
method does not return a new array, so we can't call another method on the returned value.
Conclusion
In this article, we learned about the map()
method in JavaScript. We learned about the syntax for using map()
, how to use it to transform an array, and how to use it to extract the values of an object.
Top comments (0)