Arrays, Array Methods, and the Spread Operator
By the end of this lesson, you'll be able to:
- Use map, filter, find, and reduce to work with arrays
- Use the spread operator to copy and merge arrays and objects
- Explain why LWC development leans heavily on non-mutating array patterns
Prerequisites: "Modern Variables and Objects: let, const, and Destructuring"
The Core Array Methods
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: 2map transforms every item, filter selects a subset, find returns the first match (or undefined), and reduce aggregates a list down to a single value.
The Spread Operator
const copy = [...originalArray]; // shallow copy of an array
const merged = { ...originalObject, status: 'Updated' }; // copy + overrideThe 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.
A Worked LWC Example
get openCases() {
return this.allCases.filter(c => c.status === 'Open');
}A getter (Module 3) that filters a tracked list down to just the open cases — ready to be rendered with for:each (also Module 3), without ever mutating the original allCases array.
Why This Matters in Real Projects
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.
Exercise
Given an array of numbers, write an expression using .filter() that returns only the values greater than 10.
Show hint
filter takes a function returning true/false per item.
Exercise
Challenge: write an expression that creates a NEW array containing all items in existingItems plus one new item, without mutating existingItems.
Show hint
Use the spread operator inside a new array literal.
Arrays, Array Methods, and the Spread Operator Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
The core array methods and the spread operator are how LWC code transforms data without ever mutating it directly — a habit that turns out to be essential, not just stylistic, once reactivity is involved.