JavaScript Map Method

By onjsdev

Feb 10th, 2024

The map() method in JavaScript is an array method that enables us to generate a new array from an existing one. This new array is formed by applying a callback function to each element of the original array. The values produced by the callback function constitute the elements of the new array.

Syntax

Here is the syntax of the javascript map() method that takes a callback function as its parameter:

array.map(function(currentValue, index, arr))

The callback function also has three parameters, including:

currentValue: the current element being processed in the array
index: the index of the current element being processed.
arr: the array itself

Examples

The JavaScript map method can be used in various scenarios where a new array needs to be generated from an existing one.

Let's see some examples on it:

Transforming an Array

Actually, the main purpose of the map method is transforming an array. For example, let's say you have an array of numbers and you want to square each number.

In this case, you can use the map method to transformt the existing array to obtain 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]

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.

If you want to learn more about Javascript array methods, then you can check the following articles:

Thank you for reading.