Array Transformation: map(), filter(), forEach()

In our last lesson, you learned how to use conditional logic with if/else statements and the ternary operator to make decisions in your code. This is the foundation for creating dynamic user experiences where the UI responds to data. We even practiced this by looping through an array of products to check their stock status.

Today, we'll build directly on that foundation by exploring a more powerful and elegant way to work with arrays. Instead of writing manual loops for every task, you'll learn to use built-in JavaScript array methods: .map(), .filter(), and .forEach(). Mastering these is essential for a Design Engineer. They are the primary tools you'll use to take a list of data—like products from a database—and transform it into a list of UI elements, like a grid of product cards on a webpage.

From Manual Loops to Declarative Methods

In the last lesson, if you wanted to get a list of product names, you might write a for...of loop, create an empty array, and push each name into it. This works, but it's procedural—you're telling the computer how to do the task step-by-step. The methods we'll learn today are more declarative—you simply state what you want the result to be. This leads to cleaner, more readable, and less error-prone code, which is much easier to review and supervise when it's generated by an AI.

Let's start by getting a high-level visual understanding of what these methods do.

This diagram illustrates how array methods operate. Notice how `.map()` transforms every element, while `.filter()` selects only specific elements to create a new, smaller array.

Now, let's dive into each method with a fantastic overview from the Web Dev Simplified channel. This video breaks down the most common array methods you'll encounter.

8 Must Know JavaScript Array Methods

This video, "8 Must Know JavaScript Array Methods," provides a concise and clear explanation of the methods we're focusing on today.

Please watch the following three segments. For each one, pay close attention to whether it creates a new array or not. The .filter() method: This explains how to create a new array containing only the items that meet a specific condition. The .map() method: Learn how to transform each item in an array into something new, creating a new array of the results. The .forEach() method: Understand how this method is used to loop over each item to perform an action, without creating a new array.

Deeper Dive: `.map()` and `.filter()`

As you saw in the video, .map() and .filter() are incredibly powerful because they let you transform and select data without changing the original source. This principle, known as immutability, is a cornerstone of modern frontend development, especially in React.

`map()`: Transforming Data

The .map() method creates a new array by calling a function on every element in the original array and collecting the results. From a design perspective, you can think of .map() as taking a list of raw data (like user profiles) and "mapping" each piece of data to a visual component (a profile card).

`filter()`: Selecting Data

The .filter() method creates a new array with all elements that pass the test implemented by the provided function. This is the direct implementation of the filtering UIs you've likely designed. When a user checks a box for "In Stock," you use .filter() on your product data to get a new array with only the items that have that property.

The MDN Web Docs provide the official definitions and clear examples for these two methods.

Arrays - Learn web development | MDN

This document provides the technical reference for JavaScript arrays. We'll focus on the section covering map and filter.

In the article, find the section titled Accessing every item. Read the paragraphs explaining map() and filter(). Notice how both examples define a separate function (double, isLong) and pass it to the array method. This is a common pattern, though you will often see the function written directly inside the method call, as in the video.

For a more complex and realistic example, let's see how these methods work on an array of objects, which is what you'll typically get from an API.

How to use map() filter() reduce() | JavaScript Array Methods Tutorial

The video "How to use map() filter() reduce()" by Coding2GO shows how to apply these methods to more realistic data structures, like an array of product objects.

Watch the following segments: Map with objects: This part demonstrates a crucial pattern: using .map() to transform an array of objects. It shows how to change a property (like price) while keeping the rest of the object intact using the spread syntax (...). Introduction to filter: This gives more examples of .filter() in an e-commerce context, showing how to select products based on price. Advanced filtering: See how you can build more complex filtering logic, such as searching for text within a product's name or combining multiple conditions. This directly relates to building search and multi-filter UIs.

Practical Application: Building a Shopping Cart UI

Now let's connect theory to practice. How do you go from an array of data to a rendered UI? The following article from freeCodeCamp walks through building a shopping cart and uses these exact methods to dynamically generate the HTML. This is a perfect preview of what you'll be doing constantly in React.

Code a Shopping Cart with JavaScript (no libraries)

This tutorial demonstrates a real-world use case for array methods. We will focus on how data is structured and then rendered into HTML. Don't worry about understanding every single line of code; focus on the role that .map() and .filter() play in the process.

Follow these steps through the article: First, understand how the data is structured. Read the section that begins with "let sharp items data" to see how the product information is stored in an array of objects called shopItemsData. This is your "single source of truth". Next, see how .map() turns this data into a UI. Read the section from "using a map function". The author explains that .map() will iterate over shopItemsData to generate the HTML for each product card. Then, see how object properties are used. Read from this explanation to see how properties from each product object (like x.name and x.price) are inserted into the HTML template. This is how data is bound to the UI. The article then introduces "destructuring", which is just a cleaner way to access those properties, which you can read about in the section here. Finally, see .filter() in action. In a shopping cart, you might need to remove items. Skim the section that starts with "remove this line". The code uses basket.filter((x) => x.item !== 0) to create a new basket array that excludes any items where the quantity has been reduced to zero. This is a classic use case for filtering.

Summarizing the Differences

You've now seen .map(), .filter(), and .forEach() in action. The most critical distinction is what they return.

.map() returns a new array of transformed elements.
.filter() returns a new array of selected elements.
.forEach() returns undefined. It just runs a function for each element.

This table summarizes the key differences between the methods. Note that `.forEach()` can *possibly* modify the original array if the code inside its function does so, but `map()` and `filter()` are designed not to.

Practice Time: Chaining Methods

One of the most elegant features of these methods is that they can be chained together. Since .filter() returns a new array, you can immediately call .map() on the result.

Let's use our familiar products array. Open your developer console and paste it in:

const products = [
  { id: "prod-001", name: "Classic White T-Shirt", price: 250, inStock: true },
  { id: "prod-002", name: "Slim Fit Jeans", price: 600, inStock: false },
  { id: "prod-003", name: "Leather Belt", price: 350, inStock: true },
  { id: "prod-004", name: "Running Shoes", price: 800, inStock: false },
  { id: "prod-005", name: "Wool Scarf", price: 300, inStock: true }
];

Now, complete the following tasks:

Filter for available products: Use .filter() to create a new array called inStockProducts that only contains products where inStock is true.
Map to get product info: On a new line, use .map() on your new inStockProducts array to create another new array called productInfo. Each item in this array should be a string that looks like: "Classic White T-Shirt - EGP 250".
Iterate and display: Finally, use .forEach() on the productInfo array to console.log each string.
Chain them together: Now, try to accomplish all three steps in a single statement. Create a final variable displayStrings by starting with the original products array, chaining .filter() and .map() together, and then log the result.

Click to see the solution

const products = [
  { id: "prod-001", name: "Classic White T-Shirt", price: 250, inStock: true },
  { id: "prod-002", name: "Slim Fit Jeans", price: 600, inStock: false },
  { id: "prod-003", name: "Leather Belt", price: 350, inStock: true },
  { id: "prod-004", name: "Running Shoes", price: 800, inStock: false },
  { id: "prod-005", name: "Wool Scarf", price: 300, inStock: true }
];

// 1. Filter
const inStockProducts = products.filter(product => product.inStock === true);
console.log("--- In Stock Products ---");
console.log(inStockProducts);

// 2. Map
const productInfo = inStockProducts.map(product => {
  return `${product.name} - EGP ${product.price}`;
});
console.log("\n--- Product Info Strings ---");
console.log(productInfo);

// 3. forEach
console.log("\n--- Displaying with forEach ---");
productInfo.forEach(info => {
  console.log(info);
});

// 4. Chaining
console.log("\n--- Chained Method Result ---");
const displayStrings = products
  .filter(product => product.inStock) // .inStock is shorthand for .inStock === true
  .map(product => `${product.name} - EGP ${product.price}`);

console.log(displayStrings);

Conclusion

Today you've added three indispensable tools to your JavaScript toolkit. These declarative array methods form the backbone of how modern applications handle lists of data.

Key Takeaways:

.map() transforms each element in an array and returns a new array of the same length. Use it to prepare data for your UI.
.filter() selects a subset of elements based on a condition and returns a new, typically smaller, array. Use it to implement search and filtering logic.
.forEach() executes an action for each element and does not return a new array. Use it when you need to do something with each item, not create a new list.
Chaining methods like .filter().map() allows you to compose complex data transformations in a clean, readable way.

In our next lesson, we will focus on implementing simple UI updates by selecting and modifying DOM elements. You've now learned how to create arrays of data and even generate HTML strings from them. The next step is to learn how to take that content and place it onto the actual web page for your users to see and interact with, closing the loop from raw data to a visible, dynamic interface.

Recommended resources