## 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: 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: 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 ``` 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. 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. p.active)\n .map(p => p.name)\n .forEach(n => console.log(n))"} wronglabel="✗ manual — breaks at scale" rightlabel="✓ pipeline — works for 8 or 8 million">