What will I learn from this blog post?

You will learn the core concept explained in this post, plus practical examples and clear mental models you can apply in real projects.

Who is this blog post for?

It is designed for developers who want to understand modern JavaScript concepts and apply them confidently in React-friendly code.

Do I need any special tools to understand this?

No. The examples are written in a beginner-friendly way, so you can follow the logic even without a complex setup.

Map, Filter, and Reduce in JavaScript: The Essential Array Methods Every React Developer Must Master - Vimal Thapliyal

Transform, filter, and combine arrays like a pro — these three methods handle 90% of your React list logic.

If you’ve ever looped through arrays with for loops in React, it’s time to upgrade. I’ll explain the map, filter, and reduce array methods with complete React examples, including sample data you can copy-paste and run immediately!

The Big Picture: Why These Methods Matter for React

Imagine you have a list of ingredients (array) and need to:

map = Transform each ingredient (chop all vegetables)
filter = Keep only what you need (remove spoiled items)
reduce = Combine everything (mix into a final dish)

These methods create new arrays without changing the original — perfect for React’s immutable state!

1️⃣ MAP Method (Transform Each Item)

What It Does

Original: [1, 2, 3, 4]
             ↓ map(x => x * 2)
New:      [2, 4, 6, 8]

Takes each item, transforms it, creates new array of same length.

Complete React Example

// ==========================================
// FILE: MapExamples.jsx
// ==========================================

import React from 'react';

// ==========================================
// EXAMPLE 1: Simple List Rendering
// ==========================================

function BookTitleList({ books }) {
  // map: Transform book objects → JSX elements
  const titleElements = books.map((book) => (
    <li key={book.id}>{book.title}</li>
  ));

  return (
    <div>
      <h2>All Book Titles</h2>
      <ul>{titleElements}</ul>
    </div>
  );
}

// ==========================================
// EXAMPLE 2: Transform Data Structure
// ==========================================

function EssentialBookInfo({ books }) {
  // map: Keep only essential properties
  const essentialData = books.map((book) => ({
    title: book.title,
    author: book.author,
    reviewCount: book.reviews?.goodreads?.reviewsCount + book.reviews?.libraryAnything?.reviewsCount || 0
  }));

  return (
    <div>
      <h2>Essential Book Data</h2>
      {essentialData.map((book) => (
        <div key={book.title} className="book-card">
          <h3>{book.title}</h3>
          <p>By: {book.author}</p>
          <p>Reviews: {book.reviewCount}</p>
        </div>
      ))}
    </div>
  );
}

// ==========================================
// EXAMPLE 3: Format Data for Display
// ==========================================

function FormattedBookList({ books }) {
  // map: Add computed properties
  const formattedBooks = books.map((book) => ({
    ...book,
    displayPrice: `$${book.price.toFixed(2)}`,
    displayYear: new Date(book.publicationDate).getFullYear(),
    shortTitle: book.title.length > 20 ? book.title.slice(0, 20) + '...' : book.title
  }));

  return (
    <div className="book-grid">
      {formattedBooks.map((book) => (
        <div key={book.id} className="book-tile">
          <img src={book.coverImage} alt={book.title} />
          <h4 title={book.title}>{book.shortTitle}</h4>
          <p>{book.displayYear} • {book.displayPrice}</p>
        </div>
      ))}
    </div>
  );
}

// ==========================================
// EXAMPLE 4: Conditional Transformation
// ==========================================

function BookStatusList({ books }) {
  // map: Add status based on conditions
  const booksWithStatus = books.map((book) => ({
    ...book,
    status: book.hasMovieAdaptation ? ' Movie Available' :
            book.pages > 500 ? ' Long Read' :
            ' Quick Read',
    badgeColor: book.hasMovieAdaptation ? 'gold' :
                book.pages > 500 ? 'blue' :
                'green'
  }));

  return (
    <ul className="status-list">
      {booksWithStatus.map((book) => (
        <li key={book.id} style={{ borderLeft: `4px solid ${book.badgeColor}` }}>
          <span>{book.status}</span>
          <strong>{book.title}</strong>
        </li>
      ))}
    </ul>
  );
}

export { BookTitleList, EssentialBookInfo, FormattedBookList, BookStatusList };

// ==========================================
// SAMPLE DATA - Copy this to test!
// ==========================================
/*
const sampleBooks = [
  {
    id: 1,
    title: "The Lord of the Rings",
    author: "J.R.R. Tolkien",
    pages: 1216,
    price: 29.99,
    publicationDate: "1954-07-29",
    hasMovieAdaptation: true,
    coverImage: "https://via.placeholder.com/150",
    reviews: {
      goodreads: { reviewsCount: 500 },
      libraryAnything: { reviewsCount: 312 }
    }
  },
  {
    id: 2,
    title: "The Cyberiad",
    author: "Stanislaw Lem",
    pages: 295,
    price: 15.99,
    publicationDate: "1965-01-01",
    hasMovieAdaptation: false,
    coverImage: "https://via.placeholder.com/150",
    reviews: {
      goodreads: { reviewsCount: 200 },
      libraryAnything: { reviewsCount: 150 }
    }
  },
  {
    id: 3,
    title: "Dune",
    author: "Frank Herbert",
    pages: 412,
    price: 24.99,
    publicationDate: "1965-08-01",
    hasMovieAdaptation: true,
    coverImage: "https://via.placeholder.com/150",
    reviews: {
      goodreads: { reviewsCount: 800 },
      libraryAnything: { reviewsCount: 0 }
    }
  },
  {
    id: 4,
    title: "The Little Prince",
    author: "Antoine de Saint-Exupéry",
    pages: 96,
    price: 12.99,
    publicationDate: "1943-04-06",
    hasMovieAdaptation: true,
    coverImage: "https://via.placeholder.com/150",
    reviews: {
      goodreads: { reviewsCount: 1200 },
      libraryAnything: { reviewsCount: 800 }
    }
  }
];

// USAGE IN PARENT COMPONENT:
function App() {
  return (
    <div>
      <BookTitleList books={sampleBooks} />
      <EssentialBookInfo books={sampleBooks} />
      <FormattedBookList books={sampleBooks} />
      <BookStatusList books={sampleBooks} />
    </div>
  );
}
*/

2️⃣ FILTER Method (Keep Only What You Need)

What It Does

Original: [1, 2, 3, 4, 5, 6]
             ↓ filter(x => x > 3)
New:      [4, 5, 6]

Keeps only items where condition is true.

Complete React Example

// ==========================================
// FILE: FilterExamples.jsx
// ==========================================

import React, { useState } from 'react';

// ==========================================
// EXAMPLE 1: Basic Filtering
// ==========================================

function LongBooks({ books }) {
  // filter: Keep only books with pages > 500
  const longBooks = books.filter((book) => book.pages > 500);

  return (
    <div>
      <h2>Long Books ({longBooks.length})</h2>
      {longBooks.length === 0 ? (
        <p>No long books found!</p>
      ) : (
        <ul>
          {longBooks.map((book) => (
            <li key={book.id}>
              {book.title} ({book.pages} pages)
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// ==========================================
// EXAMPLE 2: Multiple Filter Criteria
// ==========================================

function FilteredBookList({ books, minPages, maxPrice, hasMovie }) {
  // filter: Combine multiple conditions
  const filteredBooks = books.filter((book) => {
    const meetsPageRequirement = book.pages >= minPages;
    const meetsPriceRequirement = book.price <= maxPrice;
    const meetsMovieRequirement = hasMovie ? book.hasMovieAdaptation : true;
   
    return meetsPageRequirement && meetsPriceRequirement && meetsMovieRequirement;
  });

  return (
    <div>
      <h2>Filtered Results: {filteredBooks.length} books</h2>
      <div className="book-list">
        {filteredBooks.map((book) => (
          <div key={book.id} className="book-card">
            <h3>{book.title}</h3>
            <p>{book.pages} pages • ${book.price}</p>
            {book.hasMovieAdaptation && <span>🎥</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ==========================================
// EXAMPLE 3: Search Filter (Case Insensitive)
// ==========================================

function SearchableBooks({ books }) {
  const [searchTerm, setSearchTerm] = useState('');

  // filter: Search in title AND author
  const filteredBooks = books.filter((book) => {
    const term = searchTerm.toLowerCase();
    const inTitle = book.title.toLowerCase().includes(term);
    const inAuthor = book.author.toLowerCase().includes(term);
    return inTitle || inAuthor;
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Search books or authors..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <p>Showing {filteredBooks.length} of {books.length} books</p>
      <ul>
        {filteredBooks.map((book) => (
          <li key={book.id}>
            <strong>{book.title}</strong> by {book.author}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ==========================================
// EXAMPLE 4: Filter with Checkboxes
// ==========================================

function MultiFilterBooks({ books }) {
  const [filters, setFilters] = useState({
    showMoviesOnly: false,
    minYear: 1900,
    maxPrice: 100
  });

  const filteredBooks = books.filter((book) => {
    const year = new Date(book.publicationDate).getFullYear();
   
    if (filters.showMoviesOnly && !book.hasMovieAdaptation) return false;
    if (year < filters.minYear) return false;
    if (book.price > filters.maxPrice) return false;
   
    return true;
  });

  return (
    <div>
      <div className="filters">
        <label>
          <input
            type="checkbox"
            checked={filters.showMoviesOnly}
            onChange={(e) => setFilters({...filters, showMoviesOnly: e.target.checked})}
          />
          Movies Only
        </label>
        <input
          type="number"
          value={filters.maxPrice}
          onChange={(e) => setFilters({...filters, maxPrice: Number(e.target.value)})}
          placeholder="Max Price"
        />
      </div>
      
      <div className="results">
        {filteredBooks.map((book) => (
          <div key={book.id} className={book.hasMovieAdaptation ? 'has-movie' : ''}>
            {book.title} (${book.price})
          </div>
        ))}
      </div>
    </div>
  );
}

// ==========================================
// EXAMPLE 5: Remove Duplicates (Unique Filter)
// ==========================================

function UniqueAuthors({ books }) {
  // filter: Get unique authors (first occurrence only)
  const seen = new Set();
  const uniqueAuthors = books.filter((book) => {
    if (seen.has(book.author)) return false;
    seen.add(book.author);
    return true;
  });

  return (
    <div>
      <h2>Authors ({uniqueAuthors.length})</h2>
      <ul>
        {uniqueAuthors.map((book) => (
          <li key={book.author}>{book.author}</li>
        ))}
      </ul>
    </div>
  );
}

export { LongBooks, FilteredBookList, SearchableBooks, MultiFilterBooks, UniqueAuthors };

// ==========================================
// SAMPLE DATA - Copy this to test!
// ==========================================
/*
const sampleBooks = [
  {
    id: 1,
    title: "The Lord of the Rings",
    author: "J.R.R. Tolkien",
    pages: 1216,
    price: 29.99,
    publicationDate: "1954-07-29",
    hasMovieAdaptation: true,
    genres: ["fantasy", "adventure"]
  },
  {
    id: 2,
    title: "The Cyberiad",
    author: "Stanislaw Lem",
    pages: 295,
    price: 15.99,
    publicationDate: "1965-01-01",
    hasMovieAdaptation: false,
    genres: ["sci-fi", "humor"]
  },
  {
    id: 3,
    title: "Dune",
    author: "Frank Herbert",
    pages: 412,
    price: 24.99,
    publicationDate: "1965-08-01",
    hasMovieAdaptation: true,
    genres: ["sci-fi", "political"]
  },
  {
    id: 4,
    title: "The Hobbit",
    author: "J.R.R. Tolkien",
    pages: 310,
    price: 19.99,
    publicationDate: "1937-09-21",
    hasMovieAdaptation: true,
    genres: ["fantasy", "adventure"]
  },
  {
    id: 5,
    title: "Solaris",
    author: "Stanislaw Lem",
    pages: 204,
    price: 14.99,
    publicationDate: "1961-01-01",
    hasMovieAdaptation: true,
    genres: ["sci-fi", "philosophy"]
  }
];

// USAGE IN PARENT COMPONENT:
function App() {
  return (
    <div>
      <LongBooks books={sampleBooks} />
      <FilteredBookList
        books={sampleBooks}
        minPages={300}
        maxPrice={25}
        hasMovie={false}
      />
      <SearchableBooks books={sampleBooks} />
      <MultiFilterBooks books={sampleBooks} />
      <UniqueAuthors books={sampleBooks} />
    </div>
  );
}
*/

3️⃣ REDUCE Method (Combine Everything)

What It Does

Original: [1, 2, 3, 4]
             ↓ reduce((sum, x) => sum + x, 0)
Result:   10

Combines all items into a single value (sum, object, array, etc.).

Complete React Example

// ==========================================
// FILE: ReduceExamples.jsx
// ==========================================

import React from 'react';

// ==========================================
// EXAMPLE 1: Sum Calculation
// ==========================================

function CartSummary({ items }) {
  // reduce: Calculate total price
  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);

  // reduce: Count total items
  const itemCount = items.reduce((count, item) => count + item.quantity, 0);

  return (
    <div className="cart-summary">
      <h2>Cart Summary</h2>
      <p>Items: {itemCount}</p>
      <p>Total: ${total.toFixed(2)}</p>
    </div>
  );
}

// ==========================================
// EXAMPLE 2: Group by Category
// ==========================================

function BooksByAuthor({ books }) {
  // reduce: Group books by author
  const grouped = books.reduce((acc, book) => {
    const author = book.author;
    if (!acc[author]) {
      acc[author] = [];
    }
    acc[author].push(book);
    return acc;
  }, {});

  return (
    <div>
      <h2>Books by Author</h2>
      {Object.entries(grouped).map(([author, authorBooks]) => (
        <div key={author} className="author-section">
          <h3>{author} ({authorBooks.length} books)</h3>
          <ul>
            {authorBooks.map((book) => (
              <li key={book.id}>{book.title}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

// ==========================================
// EXAMPLE 3: Find Max/Min
// ==========================================

function BookStats({ books }) {
  // reduce: Find longest book
  const longestBook = books.reduce((max, book) =>
    book.pages > max.pages ? book : max,
    books[0]
  );

  // reduce: Find most expensive
  const mostExpensive = books.reduce((max, book) =>
    book.price > max.price ? book : max,
    books[0]
  );

  // reduce: Find oldest
  const oldestBook = books.reduce((oldest, book) =>
    new Date(book.publicationDate) < new Date(oldest.publicationDate) ? book : oldest,
    books[0]
  );

  return (
    <div className="stats">
      <div className="stat-card">
        <h4>Longest Book</h4>
        <p>{longestBook.title}</p>
        <p>{longestBook.pages} pages</p>
      </div>
      <div className="stat-card">
        <h4>Most Expensive</h4>
        <p>{mostExpensive.title}</p>
        <p>${mostExpensive.price}</p>
      </div>
      <div className="stat-card">
        <h4>Oldest Book</h4>
        <p>{oldestBook.title}</p>
        <p>{new Date(oldestBook.publicationDate).getFullYear()}</p>
      </div>
    </div>
  );
}

// ==========================================
// EXAMPLE 4: Complex Object Building
// ==========================================

function LibraryDashboard({ books }) {
  // reduce: Build comprehensive stats object
  const stats = books.reduce((acc, book) => {
    // Count by genre
    book.genres.forEach((genre) => {
      acc.genres[genre] = (acc.genres[genre] || 0) + 1;
    });

    // Sum pages and prices
    acc.totalPages += book.pages;
    acc.totalValue += book.price;
    acc.bookCount += 1;

    // Count movies
    if (book.hasMovieAdaptation) acc.movieCount += 1;

    // Track year range
    const year = new Date(book.publicationDate).getFullYear();
    acc.earliestYear = Math.min(acc.earliestYear, year);
    acc.latestYear = Math.max(acc.latestYear, year);

    return acc;
  }, {
    genres: {},
    totalPages: 0,
    totalValue: 0,
    bookCount: 0,
    movieCount: 0,
    earliestYear: Infinity,
    latestYear: -Infinity
  });

  const avgPages = stats.bookCount > 0 ? stats.totalPages / stats.bookCount : 0;
  const avgPrice = stats.bookCount > 0 ? stats.totalValue / stats.bookCount : 0;

  return (
    <div className="dashboard">
      <h2>Library Dashboard</h2>
      
      <div className="stats-grid">
        <div className="stat">
          <h3>{stats.bookCount}</h3>
          <p>Total Books</p>
        </div>
        <div className="stat">
          <h3>{stats.movieCount}</h3>
          <p>With Movies</p>
        </div>
        <div className="stat">
          <h3>{Math.round(avgPages)}</h3>
          <p>Avg Pages</p>
        </div>
        <div className="stat">
          <h3>${avgPrice.toFixed(2)}</h3>
          <p>Avg Price</p>
        </div>
      </div>

      <div className="genre-chart">
        <h3>Genres</h3>
        {Object.entries(stats.genres)
          .sort(([,a], [,b]) => b - a)
          .map(([genre, count]) => (
            <div key={genre} className="genre-bar">
              <span>{genre}: {count}</span>
              <div style={{ width: `${(count / stats.bookCount) * 100}%` }} />
            </div>
          ))}
      </div>

      <p>Year range: {stats.earliestYear} - {stats.latestYear}</p>
    </div>
  );
}

// ==========================================
// EXAMPLE 5: Flatten Arrays
// ==========================================

function AllGenres({ books }) {
  // reduce: Get all unique genres from all books
  const allGenres = books.reduce((genres, book) => {
    book.genres.forEach((genre) => {
      if (!genres.includes(genre)) {
        genres.push(genre);
      }
    });
    return genres;
  }, []).sort();

  // Alternative: Using Set (cleaner)
  const uniqueGenres = [...new Set(books.flatMap((b) => b.genres))].sort();

  return (
    <div>
      <h2>All Genres ({allGenres.length})</h2>
      <div className="genre-tags">
        {allGenres.map((genre) => (
          <span key={genre} className="tag">{genre}</span>
        ))}
      </div>
    </div>
  );
}

export { CartSummary, BooksByAuthor, BookStats, LibraryDashboard, AllGenres };

// ==========================================
// SAMPLE DATA - Copy this to test!
// ==========================================
/*
const sampleBooks = [
  {
    id: 1,
    title: "The Lord of the Rings",
    author: "J.R.R. Tolkien",
    pages: 1216,
    price: 29.99,
    publicationDate: "1954-07-29",
    hasMovieAdaptation: true,
    genres: ["fantasy", "adventure", "epic"]
  },
  {
    id: 2,
    title: "The Cyberiad",
    author: "Stanislaw Lem",
    pages: 295,
    price: 15.99,
    publicationDate: "1965-01-01",
    hasMovieAdaptation: false,
    genres: ["sci-fi", "humor", "short-stories"]
  },
  {
    id: 3,
    title: "Dune",
    author: "Frank Herbert",
    pages: 412,
    price: 24.99,
    publicationDate: "1965-08-01",
    hasMovieAdaptation: true,
    genres: ["sci-fi", "political", "philosophy"]
  },
  {
    id: 4,
    title: "The Hobbit",
    author: "J.R.R. Tolkien",
    pages: 310,
    price: 19.99,
    publicationDate: "1937-09-21",
    hasMovieAdaptation: true,
    genres: ["fantasy", "adventure"]
  },
  {
    id: 5,
    title: "Solaris",
    author: "Stanislaw Lem",
    pages: 204,
    price: 14.99,
    publicationDate: "1961-01-01",
    hasMovieAdaptation: true,
    genres: ["sci-fi", "philosophy", "psychological"]
  },
  {
    id: 6,
    title: "The Silmarillion",
    author: "J.R.R. Tolkien",
    pages: 365,
    price: 22.99,
    publicationDate: "1977-09-15",
    hasMovieAdaptation: false,
    genres: ["fantasy", "mythology", "history"]
  }
];

const sampleCartItems = [
  { id: 1, title: "Dune", price: 24.99, quantity: 2 },
  { id: 2, title: "The Hobbit", price: 19.99, quantity: 1 },
  { id: 3, title: "Solaris", price: 14.99, quantity: 3 }
];

// USAGE IN PARENT COMPONENT:
function App() {
  return (
    <div>
      <CartSummary items={sampleCartItems} />
      <BooksByAuthor books={sampleBooks} />
      <BookStats books={sampleBooks} />
      <LibraryDashboard books={sampleBooks} />
      <AllGenres books={sampleBooks} />
    </div>
  );
}
*/

Chaining Methods (Real Power!)

Complete Example: Combined Operations

// ==========================================
// FILE: MethodChaining.jsx
// ==========================================

import React, { useState } from 'react';

function AdvancedBookExplorer({ books }) {
  const [minRating, setMinRating] = useState(4);
  const [sortBy, setSortBy] = useState('rating');

  // CHAIN: filter → sort → map → reduce
  const processedData = books
    // Step 1: Filter by rating
    .filter((book) => (book.rating || 0) >= minRating)
    
    // Step 2: Sort by selected criteria
    .sort((a, b) => {
      if (sortBy === 'rating') return (b.rating || 0) - (a.rating || 0);
      if (sortBy === 'price') return a.price - b.price;
      if (sortBy === 'pages') return a.pages - b.pages;
      return 0;
    })
    
    // Step 3: Map to display format
    .map((book) => ({
      ...book,
      valueScore: (book.rating || 0) / book.price, // Rating per dollar!
      displayYear: new Date(book.publicationDate).getFullYear()
    }));

  // Reduce for summary
  const summary = processedData.reduce((acc, book) => ({
    count: acc.count + 1,
    totalPages: acc.totalPages + book.pages,
    avgPrice: acc.avgPrice + book.price / processedData.length,
    genres: [...new Set([...acc.genres, ...book.genres])]
  }), { count: 0, totalPages: 0, avgPrice: 0, genres: [] });

  return (
    <div>
      <div className="controls">
        <select value={minRating} onChange={(e) => setMinRating(Number(e.target.value))}>
          <option value={3}>3+ Stars</option>
          <option value={4}>4+ Stars</option>
          <option value={4.5}>4.5+ Stars</option>
        </select>
        
        <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
          <option value="rating">Highest Rated</option>
          <option value="price">Lowest Price</option>
          <option value="pages">Shortest</option>
        </select>
      </div>

      <div className="summary">
        Showing {summary.count} books • {summary.totalPages} total pages • ${summary.avgPrice.toFixed(2)} avg price
      </div>

      <div className="book-grid">
        {processedData.map((book) => (
          <div key={book.id} className="book-card">
            <h3>{book.title}</h3>
            <p> {book.rating} • ${book.price} • Value: {book.valueScore.toFixed(2)}</p>
            <p>{book.displayYear} • {book.pages} pages</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export { AdvancedBookExplorer };

// ==========================================
// SAMPLE DATA - Copy this to test!
// ==========================================
/*
const sampleBooksWithRatings = [
  {
    id: 1,
    title: "The Lord of the Rings",
    author: "J.R.R. Tolkien",
    pages: 1216,
    price: 29.99,
    rating: 4.8,
    publicationDate: "1954-07-29",
    hasMovieAdaptation: true,
    genres: ["fantasy", "adventure"]
  },
  {
    id: 2,
    title: "The Cyberiad",
    author: "Stanislaw Lem",
    pages: 295,
    price: 15.99,
    rating: 4.5,
    publicationDate: "1965-01-01",
    hasMovieAdaptation: false,
    genres: ["sci-fi", "humor"]
  },
  {
    id: 3,
    title: "Dune",
    author: "Frank Herbert",
    pages: 412,
    price: 24.99,
    rating: 4.7,
    publicationDate: "1965-08-01",
    hasMovieAdaptation: true,
    genres: ["sci-fi", "political"]
  },
  {
    id: 4,
    title: "The Hobbit",
    author: "J.R.R. Tolkien",
    pages: 310,
    price: 19.99,
    rating: 4.6,
    publicationDate: "1937-09-21",
    hasMovieAdaptation: true,
    genres: ["fantasy", "adventure"]
  },
  {
    id: 5,
    title: "Solaris",
    author: "Stanislaw Lem",
    pages: 204,
    price: 14.99,
    rating: 4.3,
    publicationDate: "1961-01-01",
    hasMovieAdaptation: true,
    genres: ["sci-fi", "philosophy"]
  }
];

// USAGE:
function App() {
  return <AdvancedBookExplorer books={sampleBooksWithRatings} />;
}
*/

Memory Aids for Poor Logic Thinking

Visual Pattern Cards (Print These!)

┌─────────────────────────────────────────────────┐
│  MAP - Transform Each Item                      │
│                                                 │
│  [🍎, 🍌, 🍒] → map(fruit => cut(fruit))        │
│                    ↓                            │
│  [½🍎, ½🍌, ½🍒]                               │
│                                                 │
│  Same number of items, each transformed         │
│                                                 │
│  array.map(item => newItem)                     │
│       ↑    ↑      ↑                             │
│   method  each   return                         │
│           item    transformed                   │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│  FILTER - Keep Only Some                        │
│                                                 │
│  [🍎, 🍌, 🍒] → filter(fruit => isRed(fruit))   │
│                    ↓                            │
│  [🍎]                                           │
│                                                 │
│  Fewer items, only those that pass test         │
│                                                 │
│  array.filter(item => condition)                │
│       ↑       ↑      ↑                          │
│   method    each    must return                 │
│             item    true to keep                │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│  REDUCE - Combine Into One                      │
│                                                 │
│  [🍎, 🍌, 🍒] → reduce((bowl, fruit) => {       │
│                    bowl.add(fruit);             │
│                    return bowl;                 │
│                  }, new Bowl())                 │
│                    ↓                            │
│  (one combined result)                          │
│                                                 │
│  array.reduce((accumulator, item) => {          │
│    // modify accumulator                        │
│    return accumulator;                          │
│  }, initialValue)                               │
│                                                 │
│  accumulator = running total                    │
│  initialValue = starting point                  │
└─────────────────────────────────────────────────┘

Color Coding Guide

// Array method
// Callback function
// Parameter (each item)
// Return value / condition

const doubled = numbers.map(num => num * 2);

const evens = numbers.filter(num => num % 2 === 0);

const sum = numbers.reduce((acc, num) => acc + num, 0);
//                                              ↑accumulator    ↑initial value

Key Takeaways

Method	Returns	Use When	React Use
map	New array (same length)	Transform each item	Render lists, format data
filter	New array (shorter)	Remove unwanted items	Search, filters, categories
reduce	Single value	Combine into one	Totals, statistics, grouping

Immutable: All return new arrays, don't modify original
Chainable: arr.filter().map().reduce() works!
React essential: Used in every component that handles lists
Always use keys: When mapping to JSX, include key prop

One Sentence Summary: > "map transforms every item, filter keeps only matching items, and reduce combines all items into one value - together they handle 90% of array operations in React!"

The Big Picture: Why These Methods Matter for React

1️⃣ MAP Method (Transform Each Item)

What It Does

Complete React Example

2️⃣ FILTER Method (Keep Only What You Need)

What It Does

Complete React Example

3️⃣ REDUCE Method (Combine Everything)

What It Does

Complete React Example

Chaining Methods (Real Power!)

Complete Example: Combined Operations

Memory Aids for Poor Logic Thinking

Visual Pattern Cards (Print These!)

Color Coding Guide

Key Takeaways

Related Posts