AceDevHub
Data & ObjectsFree

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.

BeginnerFreeArrays

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.

array-basics.js
Loading editor…
Outputconsole
10
3
3
true

Mutating 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.

mutating-methods.js
Loading editor…
Outputconsole
[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.

non-mutating.js
Loading editor…
Outputconsole
[2, 3, 4]
[1, 2, 3, 4, 5]
7
5

Transformation 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.

map-filter-reduce.js
Loading editor…
Outputconsole
['Keyboard', 'Mouse', 'Monitor']
2
378

Search 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.

search-methods.js
Loading editor…
Outputconsole
88
false false
true
MethodReturnsMutates?
mapNew array (same length)No
filterNew array (subset)No
reduceSingle accumulated valueNo
forEachundefined (side effects only)No
push / popLength or removed itemYes
  1. 1Arrays are zero-indexed, dynamic, and compared by reference
  2. 2Mutators (push, splice) change the same array — risky for shared state
  3. 3map/filter/reduce replace most transformation loops
  4. 4Use find/some/every for search and validation
  5. 5Next lesson: objects, keys, and property access