JavaScript map method provides easy way for manipulating arrays. In this article, we'll explore the basics of the map method in javascript, including syntax and use examples, so let's get started.
What is Javascript Map Method?
The map method allows us to create a new array based on an existing array. The new array is created by calling a callback function on each element of the original array. And, values returning by the callback function consists of the new array.
Syntax of the Js Map Method
The syntax of the map() method is straightforward. Here's what it looks like:
array.map(function(currentValue, index, arr), thisValue)
The javascript map method takes a function as its argument. The function has three parameters:
- currentValue: the current element being processed in the array
- index: the index of the current element being processed.
- arr: the array itself
- thisValue: it is optional and is used to set the value of
thiswhen the function is called. It is not commonly used.
Example of Javascript Map Method
If you are developing any application with JavaScript, you will probably encounter its usage in different situations. Let's see some examples on it:
Transforming an Array
The main purpose of the map method is transforming an array with a callback function For example, let's say you have an array of numbers and you want to square each number. You can use the map method to create a new array with the squared values.
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers);
// [1, 4, 9, 16, 25]
In this example, the values in the array was transformed with an arrow function, remember that the new array is populated with the values returning the callback function as in the example above.
Filtering an array
JavaScript also has a built-in filter method; however, the map method can be used for filtering arrays as well. Unlike the JavaScript filter method, the map method will populate with undefined values for items that do not satisfy the condition provided.
For example, let's say you have an array of words of fruits and you want to create a new array with only the words that start with the letter a.
const words = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];
const words = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];
const aWords = words.map(word => {
if (word[0] === 'a') {
return word;
}
});
console.log(aWords);
// ['apple', 'apricot', undefined, undefined, 'avocado']
Realize that, if the word does not start with the letter a, map method callback function populated the new array with undefined values. Of course, you can return a default value in this case to prevent undefined values.
Modifying Objects in An Array
We mostly have arrays with objects in it as they can store multiple values. For these arrays, The map method also can be used to modify objects by applying a function to each object. For example, let's say you have an array and objects in it representing people:
const people = [
{ name: 'Alice', age: 27 },
{ name: 'Bob', age: 32 },
{ name: 'Charlie', age: 40 }
];
const incrementedAges = people.map(person => {
return { name: person.name, age: person.age + 1 };
});
console.log(incrementedAges);
/*
[
{ name: 'Alice', age: 28 },
{ name: 'Bob', age: 33 },
{ name: 'Charlie', age: 41 }
]
*/
In the example above, we simply altered the ages by adding one year for each person. This example shows that we can also transform the values in an object using the JavaScript map method
Converting data types
Actually, we are performing the same operation in general. We are manipulating the values in the array and, as a result, transforming the array.
For example, let's say you have an array of strings representing numbers and you want to convert them to actual numbers. The map method also can be used in this case:
const stringNumbers = ['1', '2', '3', '4', '5'];
const numbers = stringNumbers.map(num => Number(num));
console.log(numbers);
// [1, 2, 3, 4, 5]
Conclusion
The javascript map method is a powerful built-in method that can be used to transform arrays by manipulating their values. It is easy to use and can simplify your code compared the traditional for loops.
In summary, the javascript map() method:
- Takes an array and applies a function to each item.
- Returns a new array with the transformed items.
With this general frame, you'll be able to use the javascript map method in your javascript applications.
Thank you for reading.