Frontend Master

JavaScript Curriculum

Lists of Things
+40 XP

Lists of Things

medium
~20 min·40 XP

Nexus has 847 products. Your manager wants a page showing only the active ones, with prices formatted and names in uppercase. You have all 847 in a database. You could write 847 console.log calls. Or you could write three lines using array methods that do it automatically — for 847 items or 8 million.

One variable, many values

So far every variable holds a single thing. But real data comes in collections: a list of products, a set of users, a queue of notifications.

An array is an ordered list of values stored in a single variable. Each value sits at a numbered position called an index.

js
const products = ["Nexus", "Orbit", "Pulse", "Vega"] // [0] [1] [2] [3]

Click any slot to read it by index:

array — click any slotlength = 4

Indexes start at 0. Last item is at index 3.

🧠Arrays are zero-indexed
Counting starts at 0, not 1. The first item is always [0], the last is always [array.length - 1]. This is one of those things that trips every beginner once and then becomes muscle memory forever.

Creating and reading arrays

js
// Create const scores = [88, 72, 95, 61, 79] const names = ["Alex", "Mia", "Sam"] const mixed = ["hello", 42, true, null] // any types — though rare const empty = [] // Read by index console.log(scores[0]) // 88 — first console.log(scores[4]) // 79 — last console.log(scores[10]) // undefined — out of bounds, no crash // Length console.log(scores.length) // 5 console.log(scores[scores.length - 1]) // 79 — last item, any size array

The three methods you'll use constantly

JavaScript arrays come with dozens of built-in methods. These three handle 90% of real-world work:

Transform every item — returns a NEW array of the same length.

input array

Alex (score:88, active:true)Mia (score:72, active:false)Sam (score:95, active:true)Jordan (score:61, active:false)Dana (score:79, active:true)
›users.map(u => u.name)

result — new array (same length)

[0] "Alex"[1] "Mia"[2] "Sam"[3] "Jordan"[4] "Dana"

The pattern with all three is identical: you pass in a callback function that receives each item, and the method handles the looping for you.

js
const prices = [9.99, 49.00, 2.50, 129.00] // map — transform every item → new array same length const doubled = prices.map(p => p * 2) // [19.98, 98.00, 5.00, 258.00] // filter — keep matching items → new shorter array const affordable = prices.filter(p => p < 50) // [9.99, 49.00, 2.50] // find — first matching item → single value const firstCheap = prices.find(p => p < 10) // 9.99
💡Chain them
map and filter return arrays, so you can chain them: prices.filter(p => p > 10).map(p => `$${p.toFixed(2)}`). Read left-to-right: filter first, then format the survivors.

Mutation vs immutability — the difference that matters

Some array methods change the original array in place (mutate). Others return a new array and leave the original untouched. This distinction becomes critical when you're working with React state or shared data.

mutation vs immutability — try both

current array

[0] "Nexus"[1] "Orbit"[2] "Pulse"
value to add:

⚠️ mutates original

✓ returns new array

In modern JavaScript — especially in React — prefer the non-mutating versions. Your code becomes easier to reason about when arrays don't change unexpectedly.

js
const original = [1, 2, 3] // ✗ mutating — changes original original.push(4) // original is now [1, 2, 3, 4] // ✓ non-mutating — original untouched const withFour = [...original, 4] // spread + new item const withoutFirst = original.slice(1) // [2, 3] const filtered = original.filter(n => n !== 2) // [1, 3]

Iterating with forEach

When you want to run code for each item but don't need a new array back, use forEach:

js
const names = ["Alex", "Mia", "Sam"] names.forEach(name => { console.log(`Welcome, ${name}!`) }) // "Welcome, Alex!" // "Welcome, Mia!" // "Welcome, Sam!"

forEach always returns undefined. Use it for side effects (logging, updating the DOM, sending requests) — not for building new arrays.

Working with arrays of objects

Real data isn't arrays of plain strings. It's arrays of objects — each item a package of related properties:

js
const products = [ { name: "Nexus", price: 9.50, active: true }, { name: "Orbit", price: 49.00, active: false }, { name: "Pulse", price: 129.00, active: true }, { name: "Vega", price: 2.50, active: true }, ] // Get only active products const activeProducts = products.filter(p => p.active) // Format them as strings const formatted = activeProducts.map(p => `${p.name} — $${p.price.toFixed(2)}`) // Log each one formatted.forEach(line => console.log(line)) // "Nexus — $9.50" // "Pulse — $129.00" // "Vega — $2.50"

That three-step pipeline — filter → map → forEach — is the backbone of data transformation in JavaScript.

✗ crashes
✓ works

Challenge

You have an array of product objects. Each has a name (string), price (number), and active (boolean). Write code to: (1) use filter to get only active products, (2) use map on the result to build formatted strings like \"Nexus — $9.50\", (3) log each formatted string. Use the products array provided in the starter code.

arraysindexingmapfilterfindforEacharray-methodsimmutability
Lists of Things | Nexus Learn