Projects

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:

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:

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:

Practice: Try it Yourself

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


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