Pathwise

Manuals / JavaScript / Chapter 4

A · Fundamentals · beginner · Week 2 · Chapter 4 of 14

Arrays, objects & destructuring

Arrays hold ordered lists. Objects hold keyed records. map, filter, find, reduce, and some replace index loops for most tasks. Destructuring and spread make copying and unpacking elegant. JSON.parse/stringify connects JS to APIs.

Path progress
23%

Step 1 of 5

Array essentials

push/pop/shift/unshift mutate. map/filter/reduce return new arrays — prefer these. find returns first match; some/every return booleans.

Array essentialsDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Array essentialsdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

const users = [
  { name: "Ava", active: true },
  { name: "Ben", active: false },
  { name: "Cal", active: true },
]

const activeNames = users
  .filter(u => u.active)
  .map(u => u.name)

const firstActive = users.find(u => u.active)

Do this now

Given users = [{name:"Ava",active:true},{name:"Ben",active:false}], filter active, map names, find first active.

Was this step clear?
Chapter learning outcomes
  • Array methods
  • Object literals & shorthand
  • Destructuring & spread
  • JSON
  • Optional chaining

Clear these before you leave

Side quest

Data transformer

Given a JSON array of orders, return {totalRevenue, orderCount, topCustomer} using map/filter/reduce only.