JavaScript: Arrays, Objects & Data Transformation

Chapter roadmap

Represent collections and records, transform arrays declaratively, destructure data, and avoid accidental mutation. Work through the concepts in order, type every example yourself, and keep a short debugging log that records predictions, errors, fixes, and what each fix taught you.

Learning objectives

Use array operations
Transform with map/filter/reduce
Model records with objects
Copy and destructure data safely

03.1

Arrays and mutation

Arrays are ordered objects with zero-based indexes. push, pop, splice, and sort mutate the original array; concat, slice, map, and filter return new arrays. Know which behavior you need before choosing a method.

Before running the example, trace each expression and write down the expected state or result. Then run it, compare the actual result, and change one input or rule to confirm that you understand which part controls the behavior.

Example

const tasks = ["read", "practice"];
tasks.push("reflect");
const firstTwo = tasks.slice(0, 2);
console.log(tasks, firstTwo);

Result

["read", "practice", "reflect"]
["read", "practice"]

Check your understanding

Explain the example in plain language, identify one boundary or failure case, and revise it so the output changes in a predictable way.

03.2

map, filter, and reduce

map transforms every element, filter keeps matching elements, and reduce combines values into one result. Callback names should describe the current value, and transformations should avoid hidden side effects. A loop may be clearer when several stateful steps interact.

Example

const prices = [12, 5, 20, 8];
const discounted = prices
  .filter(price => price >= 10)
  .map(price => price * 0.9);
const total = discounted.reduce((sum, price) => sum + price, 0);
console.log(total);

Result

28.8

Check your understanding

Explain the example in plain language, identify one boundary or failure case, and revise it so the output changes in a predictable way.

03.3

Objects and property access

Objects group named properties and methods. Dot notation fits known property names; bracket notation supports computed names. Use Object.keys, Object.values, and Object.entries to iterate predictable own enumerable properties.

Example

const student = {
  name: "Ana",
  scores: [88, 94, 91],
  average() {
    return this.scores.reduce((a, b) => a + b, 0) / this.scores.length;
  }
};
console.log(student.average());

Result

Check your understanding

Explain the example in plain language, identify one boundary or failure case, and revise it so the output changes in a predictable way.

03.4

Destructuring, spread, and immutability

Destructuring extracts array positions or object properties into variables. Spread copies enumerable properties or elements into a new collection. These copies are shallow, so nested objects still share references unless they are copied too.

Example

const original = { name: "Ana", status: "active" };
const updated = { ...original, status: "complete" };
const { name, status } = updated;
console.log(name, status, original.status);

Result

Ana complete active

Check your understanding

Explain the example in plain language, identify one boundary or failure case, and revise it so the output changes in a predictable way.

Chapter assignments

Complete these in order. Later assignments assume that earlier skills are working. Do not only test the sample values; design tests that challenge boundaries, missing values, incorrect types, empty collections, and other likely failures.

A3.1
Implement array utilities for unique values, chunking, rotation, frequency counts, and stable numeric sorting.
Submit readable source code, a brief design note, and evidence from at least three tests including one boundary or invalid case.
A3.2
Transform a product dataset through filter, map, sort, and reduce to create a category summary.
Submit readable source code, a brief design note, and evidence from at least three tests including one boundary or invalid case.
A3.3
Model a playlist with objects and write functions to add, remove, search, total duration, and group by artist.
Submit readable source code, a brief design note, and evidence from at least three tests including one boundary or invalid case.
A3.4
Update nested application state without changing the original and prove which references were copied.
Submit readable source code, a brief design note, and evidence from at least three tests including one boundary or invalid case.

Chapter project

Personal Finance Analyzer

Personal Finance Analyzer — Represent transactions as objects and produce filtered views, category totals, monthly summaries, largest expenses, and balance changes. Keep source data unchanged and export a final report object.

Required process

Write a short specification listing inputs, outputs, rules, and failure cases.
Break the work into small functions, queries, modules, or classes appropriate to the language.
Build the smallest working version before adding optional features.
Test normal, boundary, empty, and invalid cases and record the results.
Refactor names and duplication, then write a concise user guide.

Key terms

array
mutation
callback
map
filter
reduce
object
method
destructuring
spread
shallow copy