map
Method in JavaScriptThe 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.
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.
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.map
to Modify an ArrayLet’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:
numbers
array contains the original numbers.map
to loop through the numbers
array.doubledNumbers
array contains the updated values, where each number is doubled.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.
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.
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:
words
array contains lowercase words.map
to loop through the words
array and convert each word to uppercase.uppercasedWords
array contains the new words in uppercase.Now it’s your turn! Try using the map
method with different arrays. Here are some practice exercises:
map
function that adds 5 to every number in an array of numbers.map
to convert an array of names to all lowercase letters.
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]
map
always returns a new array. It doesn’t change the original array.map
can be used with any data type: numbers, strings, objects, etc.