JavaScript Arrays: Filter, Map & Object Data

What you’ll learn

• Choose arrays versus objects
• Use map, filter, find, and reduce
• Avoid accidental mutation

Before you start

You’ll need a modern browser, a basic HTML page, and a way to inspect the browser console. Practice with sample data. The interactive guide has its own activities and browser-saved progress.

Understand the idea

Use an array for an ordered collection and an object for named properties. Real applications usually combine both.

map transforms, filter selects, find locates one item, and reduce combines. Choose the operation that states your intent.

Prefer creating new arrays and objects when transforming state. Predictable updates are easier to debug than shared mutation.

Follow the example

const tasks = [
  {id: 1, title: 'Plan', done: true},
  {id: 2, title: 'Build', done: false}
];
const openTitles = tasks.filter(t => !t.done).map(t => t.title);
console.log(openTitles);

A data pipeline is easier to reason about when each step has one purpose. First select the open tasks with filter, then transform those objects into titles with map. Neither step needs to modify the original tasks.

Common mistakes & troubleshooting

• Return a new object when changing a property inside map; copying an array alone does not clone its objects.
• If a pipeline gives an empty list, inspect the filter condition and the actual property names.
• Use find when you need one matching record, and handle undefined when no match exists.

Keep learning

Use your explanation to make a small feature of your own. Review the behavior before connecting it to real user data or a production application.