Arrays, Objects, and Collection Methods

Arrays, Objects, and Collection Methods | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Arrays, Objects, and Collection Methods step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Select collection methods by the result needed.
Reason about object identity and shallow copying.
Perform immutable array and record updates.
Model collections with clear invariants and stable identifiers.

DEEP EXPLANATION

Build the complete mental model

Collection methods communicate different questions

map creates one output per input, filter selects zero or more values, find returns the first match, some and every answer boolean questions, and reduce combines a collection into one result. forEach is for effects and returns undefined. Name callbacks by intent and avoid pipelines so long that intermediate values become invisible. Empty-array behavior matters: reduce without an initial accumulator throws, while most other methods return an empty result.

Identity determines whether two references share change

Objects and arrays are reference values. Assignment copies the reference, not the structure. Object and array spread create new outer containers, but nested records remain shared. This is often enough when ownership is shallow; deep cloning everything can erase special values and hide poor state design. Copy only the levels your update owns and preserve unchanged record identities.

Stable identifiers make updates predictable

A collection item should have an identifier that does not depend on its current array position. Index-based identity breaks when sorting, filtering, or inserting. Update by mapping to a new record for the matching id, remove with filter, and add with a new array. Validate uniqueness at the boundary so later code can treat one id as one item.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Derive a summary without mutation

The pipeline selects completed records and combines their integer minutes with an explicit initial value.

function completedMinutes(lessons) {
  return lessons
    .filter((lesson) => lesson.done)
    .reduce((total, lesson) => total + lesson.minutes, 0);
}

Example 2: Update one record by stable id

The array and changed record are new; all unrelated records retain identity.

function completeLesson(lessons, id) {
  return lessons.map((lesson) =>
    lesson.id === id ? { ...lesson, done: true } : lesson
  );
}

How to trace this lesson

Define whether the desired result is one value, many values, a boolean, or a combined summary.
Mark which objects are shared before an update.
Copy every owned nesting level that changes and no unrelated level.
Test empty collections, missing ids, duplicates, and already-completed records.

Common mistakes and corrections

Using map when the goal is only a side effect.: Use map for returned transformed data and forEach for deliberate effects.
Mutating a record inside map.: Return a new record for the changed item.
Using array index as durable identity.: Assign stable ids at creation or at the trusted data boundary.

PRACTICE LADDER

Move from recognition to independent work

1
Implement the same query with find, filter, some, and every and compare results.
2
Diagram references before and after a nested update.
3
Create add, complete, remove, and reorder functions without mutation.
4
Write boundary tests for an empty and duplicate-id collection.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Use the collection method that answers the question

find returns one matching value, filter selects any number of values, map transforms every position, some and every answer boolean questions, and reduce combines a collection. Choosing by intent makes code easier to verify than forcing every task into one familiar method.

Objects share references unless you copy intentionally

Assigning an object to a second variable does not clone it. A shallow spread creates a new outer object but still shares nested references. Prefer returning new records from update functions, and decide how deep the ownership boundary goes rather than copying everything automatically.

RUNNABLE EXAMPLE

Change one assumption at a time

Filter unfinished lessons, map them to titles, and confirm the original array is unchanged. Then change a nested value and inspect which references are shared.

const lessons = [{ title: 'HTML', minutes: 18, done: true }, { title: 'CSS', minutes: 24, done: false }, { title: 'JavaScript', minutes: 30, done: true }];
const completedMinutes = lessons.filter((lesson) => lesson.done).reduce((sum, lesson) => sum + lesson.minutes, 0);
console.log({ completedMinutes });

const lessons = [{ title: 'HTML', minutes: 18, done: true }, { title: 'CSS', minutes: 24, done: false }, { title: 'JavaScript', minutes: 30, done: true }];
const completedMinutes = lessons.filter((lesson) => lesson.done).reduce((sum, lesson) => sum + lesson.minutes, 0);
console.log({ completedMinutes });

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const updated = lessons.map((lesson) => {
  if (lesson.title === 'CSS') lesson.done = true;
  return lesson;
});

Reveal repair and explanation

const updated = lessons.map((lesson) =>
  lesson.title === 'CSS' ? { ...lesson, done: true } : lesson
);

The broken version mutates an object from the original array. Return a new record for the changed item so ownership is visible.

INDEPENDENT LAB

Build without copying the example

Build functions that add, complete, filter, and total a lesson list without mutating earlier states.

const initialLessons = [];

function addLesson(lessons, lesson) {
  // Return a new array.
}

const initialLessons = [];

function addLesson(lessons, lesson) {
  // Return a new array.
}

Press Run to execute your code.

Self-review checklist Every update returns a new array. Unchanged records keep their existing identity. Empty collections and missing matches have defined results.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which method returns all matching items? filter find some

2. Does an object spread deeply clone nested objects? No, it is shallow Yes, always Only in arrays

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering