Arrays, Array Methods, and the Spread Operator

An array is a list of values, written inside square brackets and separated by commas:

const names = ['John', 'Mary', 'Sipho'];

Each value in the list has a position, called an index, starting from 0 (not 1):

names[0]; // 'John'  — the first item
names[1]; // 'Mary'  — the second item
names.length; // 3 — how many items are in the list

Looping over every item, one at a time, uses for...of:

for (const name of names) {
    console.log(name);
}
// logs 'John', then 'Mary', then 'Sipho'

This is the plain, foundational way to work with a list. The rest of this lesson builds on top of exactly this — the same list of values, just processed with more specialized tools.

const cases = [{ id: 1, status: 'Open' }, { id: 2, status: 'Closed' }];

cases.map(c => c.status);               // transform: ['Open', 'Closed']
cases.filter(c => c.status === 'Open'); // select: [{ id: 1, status: 'Open' }]
cases.find(c => c.id === 2);            // single match: { id: 2, status: 'Closed' }
cases.reduce((total, c) => total + 1, 0); // aggregate: 2

map transforms every item, filter selects a subset, find returns the first match (or undefined), and reduce aggregates a list down to a single value — each one loops over the array internally, so you don't need to write your own for...of loop for these common jobs.

A quick note on c => c.status: this arrow (=>) is shorthand for a small, unnamed function — read it as "given c, give back c.status." It's exactly the same idea as the function keyword from the previous lesson, just written more compactly for short, one-off logic like this. The next lesson, "Functions, Arrow Functions, and Classes," covers this shorthand in full — this preview is enough to read and use it correctly here.

const copy = [...originalArray];               // shallow copy of an array
const merged = { ...originalObject, status: 'Updated' }; // copy + override

The spread operator (...) creates a new array or object, copying the existing values in. This matters far more in LWC than it might first seem — see Lesson 7 for exactly why.

get openCases() {
    return this.allCases.filter(c => c.status === 'Open');
}

A getter (Module 4) that filters a tracked list down to just the open cases — ready to be rendered with for:each (also Module 4), without ever mutating the original allCases array.

Immutable update patterns using the spread operator are essential for LWC's reactivity system to reliably detect changes — Lesson 7 in this module explains exactly why, and Module 13 revisits this again from a performance angle.