Arrays and Array Methods
Create and transform ordered lists with mutating and non-mutating array methods — the backbone of UI lists, API payloads, and data pipelines.
Arrays are ordered collections — the data structure behind todo lists, table rows, API result sets, and cart items. Unlike fixed arrays in C or Java, JavaScript arrays are dynamic: you can grow or shrink them at runtime, store mixed types (though you usually should not), and attach methods like .map and .filter. Interviews and production code both assume you can transform arrays without reaching for a for loop every time.
Creating arrays and reading length
Array indices are zero-based: the first element is index 0. The length property always equals one more than the highest index (not the count of defined elements in sparse arrays). Arrays are objects under the hood — typeof [] is "object" — but Array.isArray distinguishes real arrays from plain objects.
10
3
3
trueMutating methods — change the array in place
Mutating methods modify the same array reference. That matters in React and Redux-style apps where you often must copy before changing state. push and pop work at the end; shift and unshift at the beginning (shift/unshift are slower on large arrays because elements move). splice is the Swiss army knife — remove, insert, or replace at any index.
[1, 99, 100, 4]Non-mutating methods — return new data
slice returns a shallow copy of a portion without touching the original. concat merges arrays into a new array. These are safe when you need a new reference for comparison or React setState — the original array stays unchanged for anything still holding that reference.
[2, 3, 4]
[1, 2, 3, 4, 5]
7
5Transformation methods — map, filter, reduce
Higher-order array methods take a callback function and apply it per element. map transforms each item into a new array of the same length. filter keeps items where the callback returns true. reduce folds the array into a single value — sum, object lookup, grouping. Together they replace most manual for loops in application code.
['Keyboard', 'Mouse', 'Monitor']
2
378Search and test — find, some, every
find returns the first matching element or undefined. findIndex returns the index. some asks "does at least one pass?" — short-circuits on first true. every asks "do all pass?" — short-circuits on first false. Use these instead of manual loops when you only need existence or validation.
88
false false
true| Method | Returns | Mutates? |
|---|---|---|
| map | New array (same length) | No |
| filter | New array (subset) | No |
| reduce | Single accumulated value | No |
| forEach | undefined (side effects only) | No |
| push / pop | Length or removed item | Yes |
- 1Arrays are zero-indexed, dynamic, and compared by reference
- 2Mutators (push, splice) change the same array — risky for shared state
- 3map/filter/reduce replace most transformation loops
- 4Use find/some/every for search and validation
- 5Next lesson: objects, keys, and property access