Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Transforming Arrays with map | Transforming and Searching Arrays
JavaScript Array Methods

bookTransforming Arrays with map

The map method in JavaScript is used to transform each element of an array by applying a function to every item. It takes a callback function as its argument and returns a new array containing the results of calling that function on every element in the original array. Importantly, the original array is not changed. You should use map when you want to create a new array where each element is the result of some transformation of the corresponding element in the source array. Unlike forEach, which is used for executing side effects and does not return a value, map always returns a new array and is meant for data transformation.

12345
const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(function(num) { return num * num; }); console.log(squares); // [1, 4, 9, 16, 25]
copy
123456789
const users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" } ]; const names = users.map(function(user) { return user.name; }); console.log(names); // ["Alice", "Bob", "Charlie"]
copy

The main difference between map and filter is in their output and intended use. The map method always returns a new array with the same number of elements as the original, but with each element transformed according to the callback function. The filter method, on the other hand, returns a new array containing only those elements that pass a test specified by the callback function, which means the resulting array may be shorter than the original.

  • Use map when you want to change every element;
  • Use filter when you want to select certain elements.

1. What does the map() method do?

2. Fill in the blank to complete the map callback that doubles each number in the array.

question mark

What does the map() method do?

Select the correct answer

question-icon

Fill in the blank to complete the map callback that doubles each number in the array.

const numbers = [2, 4, 6]; const doubled = numbers.map(function(num) { return ; }); console.log(doubled); // [4, 8, 12]
[4, 8, 12]

Click or drag`n`drop items and fill in the blanks

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you give more examples of using map and filter together?

What are some common mistakes when using map in JavaScript?

Can you explain when to use forEach instead of map?

Awesome!

Completion rate improved to 8.33

bookTransforming Arrays with map

Swipe um das Menü anzuzeigen

The map method in JavaScript is used to transform each element of an array by applying a function to every item. It takes a callback function as its argument and returns a new array containing the results of calling that function on every element in the original array. Importantly, the original array is not changed. You should use map when you want to create a new array where each element is the result of some transformation of the corresponding element in the source array. Unlike forEach, which is used for executing side effects and does not return a value, map always returns a new array and is meant for data transformation.

12345
const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(function(num) { return num * num; }); console.log(squares); // [1, 4, 9, 16, 25]
copy
123456789
const users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" } ]; const names = users.map(function(user) { return user.name; }); console.log(names); // ["Alice", "Bob", "Charlie"]
copy

The main difference between map and filter is in their output and intended use. The map method always returns a new array with the same number of elements as the original, but with each element transformed according to the callback function. The filter method, on the other hand, returns a new array containing only those elements that pass a test specified by the callback function, which means the resulting array may be shorter than the original.

  • Use map when you want to change every element;
  • Use filter when you want to select certain elements.

1. What does the map() method do?

2. Fill in the blank to complete the map callback that doubles each number in the array.

question mark

What does the map() method do?

Select the correct answer

question-icon

Fill in the blank to complete the map callback that doubles each number in the array.

const numbers = [2, 4, 6]; const doubled = numbers.map(function(num) { return ; }); console.log(doubled); // [4, 8, 12]
[4, 8, 12]

Click or drag`n`drop items and fill in the blanks

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3
some-alt