How to Use Map and Filter in JavaScript

The map() and filter() methods are powerful array methods for transforming and filtering data in JavaScript.

Using map()

Transform each element in an array:

const numbers = [1, 2, 3, 4, 5];

// Double each number
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Original array is unchanged
console.log(numbers); // [1, 2, 3, 4, 5]

Map with Objects

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];

// Extract names
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

// Transform objects
const userSummaries = users.map(user => ({
    displayName: user.name.toUpperCase(),
    isAdult: user.age >= 18
}));
console.log(userSummaries);
// [{ displayName: 'ALICE', isAdult: true }, ...]

Using filter()

Keep only elements that match a condition:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Get even numbers
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// Get numbers greater than 5
const greaterThan5 = numbers.filter(num => num > 5);
console.log(greaterThan5); // [6, 7, 8, 9, 10]

Filter with Objects

const products = [
    { name: 'Laptop', price: 999, inStock: true },
    { name: 'Phone', price: 699, inStock: false },
    { name: 'Tablet', price: 499, inStock: true },
    { name: 'Watch', price: 299, inStock: true }
];

// Get products in stock
const available = products.filter(product => product.inStock);
console.log(available);
// [{ name: 'Laptop', ... }, { name: 'Tablet', ... }, { name: 'Watch', ... }]

// Get expensive products (price > 500)
const expensive = products.filter(product => product.price > 500);
console.log(expensive);
// [{ name: 'Laptop', ... }, { name: 'Phone', ... }]

Chaining map() and filter()

Combine methods for powerful data transformations:

const users = [
    { name: 'Alice', age: 17, active: true },
    { name: 'Bob', age: 25, active: true },
    { name: 'Charlie', age: 30, active: false },
    { name: 'Diana', age: 22, active: true }
];

// Get names of active adult users
const activeAdultNames = users
    .filter(user => user.active)
    .filter(user => user.age >= 18)
    .map(user => user.name);

console.log(activeAdultNames); // ['Bob', 'Diana']

Map with Index

Access the index in map:

const letters = ['a', 'b', 'c'];

const indexed = letters.map((letter, index) => ({
    letter,
    position: index + 1
}));

console.log(indexed);
// [{ letter: 'a', position: 1 }, { letter: 'b', position: 2 }, ...]

Practical Examples

Processing API Data

const apiResponse = [
    { id: 1, title: 'Post 1', body: 'Content 1', userId: 1 },
    { id: 2, title: 'Post 2', body: 'Content 2', userId: 2 },
    { id: 3, title: 'Post 3', body: 'Content 3', userId: 1 }
];

// Get posts by specific user and format them
const user1Posts = apiResponse
    .filter(post => post.userId === 1)
    .map(post => ({
        id: post.id,
        title: post.title.toUpperCase()
    }));

console.log(user1Posts);
// [{ id: 1, title: 'POST 1' }, { id: 3, title: 'POST 3' }]

Form Validation

const formFields = [
    { name: 'email', value: 'user@example.com', required: true },
    { name: 'phone', value: '', required: false },
    { name: 'name', value: '', required: true }
];

// Get empty required fields
const emptyRequired = formFields
    .filter(field => field.required && !field.value)
    .map(field => field.name);

console.log(emptyRequired); // ['name']

Search/Filter UI

const items = ['Apple', 'Banana', 'Apricot', 'Cherry', 'Avocado'];

function search(query) {
    return items
        .filter(item => item.toLowerCase().includes(query.toLowerCase()))
        .map(item => ({ name: item, highlighted: true }));
}

console.log(search('ap'));
// [{ name: 'Apple', highlighted: true }, { name: 'Apricot', highlighted: true }]

Comparison with forEach

const numbers = [1, 2, 3];

// forEach - no return value, used for side effects
numbers.forEach(num => console.log(num));

// map - returns new array, used for transformation
const doubled = numbers.map(num => num * 2);

// Don't use map if you don't need the return value
// Bad: numbers.map(num => console.log(num));
// Good: numbers.forEach(num => console.log(num));

Summary

• map() transforms each element and returns a new array
• filter() keeps elements that pass a test and returns a new array
• Both methods don’t modify the original array
• Chain them together for complex transformations
• Use forEach() when you don’t need a return value