Understanding the `map` Method in JavaScript

The map method is another way to loop through an array, similar to forEach. But unlike forEach, the map method does more than just perform an action on each item in the array. It also **creates a new array** with the results from the function you apply to each item.

What Does the `map` Method Do?

Imagine you have an array of items, and you want to change each item in some way. For example, you might want to double every number in an array or convert all the strings in an array to uppercase letters. The map method helps you do that by creating a new array with those changes, without altering the original array.

Basic Syntax

Here’s what the syntax of the map method looks like:


const newArray = array.map(function(element, index, array) {
  // Code to apply to each element
  return newValue;
});

Let’s break it down:

array: The original array you’re working with.
element: The current item in the array being processed.
index: The position of the current item in the array (optional).
array: The original array itself (optional).
newArray: The new array that map creates with the updated items.
return newValue: This is the value that will go into the new array for each element.

Example: Using `map` to Modify an Array

Let’s start with a simple example where we use map to double every number in an array.


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

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

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

In this example:

The numbers array contains the original numbers.
We use map to loop through the numbers array.
For each number, we multiply it by 2 and return the result.
The doubledNumbers array contains the updated values, where each number is doubled.

Key Difference Between `forEach` and `map`

It’s important to understand that forEach just loops through the array and performs an action, but it **doesn’t return a new array**. On the other hand, map always **returns a new array** with the results. The original array stays unchanged.

Think of it like this: forEach is like reading a list and doing something with each item, but map is like reading the list, making changes, and then creating a brand-new list with those changes.

Using Arrow Functions with `map`

Just like with forEach, you can use arrow functions with map to make the code shorter. Here’s the same example using an arrow function:


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

const doubledNumbers = numbers.map((number) => number * 2);

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

As you can see, it’s much shorter, but it does the same thing. The arrow function makes it easier to write when you don’t need a lot of code inside the function.

Working with Strings

The map method isn’t just for numbers. You can use it on arrays of strings as well. Let’s say we have an array of lowercase words, and we want to change them all to uppercase:


const words = ["hello", "world", "javascript"];

const uppercasedWords = words.map(function(word) {
  return word.toUpperCase();
});

console.log(uppercasedWords); // Output: ["HELLO", "WORLD", "JAVASCRIPT"]

In this example:

The words array contains lowercase words.
We use map to loop through the words array and convert each word to uppercase.
The uppercasedWords array contains the new words in uppercase.

Practice: Try it Yourself

Now it’s your turn! Try using the map method with different arrays. Here are some practice exercises:

Write a map function that adds 5 to every number in an array of numbers.
Use map to convert an array of names to all lowercase letters.
Try creating a new array that contains the lengths of each string in an array of strings.


const numbers = [10, 20, 30, 40];
const addFive = numbers.map((number) => number + 5);
console.log(addFive); // Output: [15, 25, 35, 45]

const names = ["Alice", "BOB", "CHARLIE"];
const lowercaseNames = names.map((name) => name.toLowerCase());
console.log(lowercaseNames); // Output: ["alice", "bob", "charlie"]

const fruits = ["apple", "banana", "cherry"];
const fruitLengths = fruits.map((fruit) => fruit.length);
console.log(fruitLengths); // Output: [5, 6, 6]

Important Points to Remember

map always returns a new array. It doesn’t change the original array.
The new array will have the same length as the original array.
map can be used with any data type: numbers, strings, objects, etc.

Understanding the map Method in JavaScript

What Does the map Method Do?