1.21 -- JavaScript Arrays: Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

1. Skim before labs or interviews.
2. Drill gaps -- reopen README.md -> 1.21.a...1.21.g.
3. Practice -- 1.21-Exercise-Questions.md.
4. Polish answers -- 1.21-Interview-Questions.md.

---

Core vocabulary

Term	One-liner
Array	Ordered, zero-indexed, dynamic-length collection of values
Index	Numeric position starting at 0
Length	One more than the highest index (writable property)
Sparse array	Array with holes (missing indices) -- avoid
Mutating	Method that changes the original array in place
Non-mutating	Method that returns a new array; original unchanged

---

Creating arrays

Syntax	Result	Notes
[1, 2, 3]	[1, 2, 3]	Preferred -- literal
new Array(3)	[ , , ]	3 empty slots -- avoid
Array.of(3)	[3]	Fixes single-number quirk
Array.from("abc")	["a","b","c"]	From iterable
Array.from({length:3}, (_,i) => i)	[0, 1, 2]	Generate sequence
new Array(5).fill(0)	[0,0,0,0,0]	Primitives only!

---

Type checks

typeof []              // "object" (not "array"!)
Array.isArray([])      // true -- always use this
[] instanceof Array    // true (fails across realms)

---

Accessing elements

Operation	Syntax
First	arr[0]
Last	arr[arr.length - 1] or arr.at(-1)
Nth from end	arr.at(-n)
Out-of-bounds	Returns undefined (no error)
Destructure	const [a, b, ...rest] = arr
Swap	[arr[i], arr[j]] = [arr[j], arr[i]]

---

Adding & removing

Method	Position	Mutates?	Returns
push(x)	End	Yes	New length
pop()	End	Yes	Removed element
unshift(x)	Start	Yes	New length
shift()	Start	Yes	Removed element

push/pop   = O(1) -- fast (end)
unshift/shift = O(n) -- slow (start, re-indexes all)

---

Merging & copying

// concat (non-mutating)
const merged = a.concat(b);

// spread (non-mutating, more flexible)
const merged2 = [...a, ...b];
const copy = [...arr];

// with items between
const combined = [...a, 99, ...b];

---

In-place transformations

Method	What it does	Mutates?
reverse()	Reverses order	Yes
fill(val, start, end)	Fills with static value	Yes
copyWithin(target, start, end)	Copies section internally	Yes
sort(fn)	Sorts in place	Yes
splice(i, del, ...items)	Remove/insert at index	Yes

Non-mutating copies:

[...arr].reverse()    // reversed copy
arr.toReversed()      // ES2023
arr.toSorted(fn)      // ES2023
arr.toSpliced(...)    // ES2023
arr.with(i, val)      // ES2023

---

Length property

arr.length              // count (highest index + 1)
arr.length = 2          // truncate (destructive!)
arr.length = 0          // clear array
arr.length = 10         // expand (creates holes)

// Empty check
arr.length === 0        // correct
if (arr) { ... }        // WRONG -- [] is truthy!

---

Search methods

Method	Returns	Handles NaN?
indexOf(val)	Index or -1	No
includes(val)	Boolean	Yes
find(fn)	Element or undefined	--
findIndex(fn)	Index or -1	--

---

Iteration cheat sheet

// Classic for -- full control, break/continue
for (let i = 0; i < arr.length; i++) { arr[i] }

// for...of -- clean values, break/continue
for (const val of arr) { val }

// for...of with index
for (const [i, val] of arr.entries()) { i, val }

// AVOID for...in on arrays (string keys, prototype, unordered)

// while -- conditional / unknown count
while (arr.length > 0) { arr.shift() }

// Backwards
for (let i = arr.length - 1; i >= 0; i--) { arr[i] }

Feature	for	for...of	forEach	while
break	Yes	Yes	No	Yes
continue	Yes	Yes	return	Yes
Index	Yes	.entries()	2nd arg	Yes

---

Reference behavior

const a = [1, 2]; const b = a;
b.push(3);
a; // [1, 2, 3] -- same reference!

// Copy (shallow)
const copy = [...a];      // or Array.from(a) or a.slice()

// Equality
[1,2] === [1,2]  // false (different references)
a === b           // true (same reference)

---

2D arrays (matrices)

// Create correctly
const matrix = Array.from({length: 3}, () => new Array(3).fill(0));

// NEVER: new Array(3).fill([]) -- shared reference!

// Access
matrix[row][col]

// Dimensions
matrix.length           // rows
matrix[0].length        // cols

// Iterate
for (let r = 0; r < matrix.length; r++) {
  for (let c = 0; c < matrix[r].length; c++) {
    matrix[r][c]
  }
}

---

Data structure patterns

Stack (LIFO):  push + pop      -- browser history, undo
Queue (FIFO):  push + shift    -- task queue, print queue

---

Common gotchas

Gotcha	Fix
typeof [] === "object"	Use Array.isArray()
new Array(3) creates holes	Use [3] or Array.of(3)
const arr is not immutable	const locks binding, not contents
[] === [] is false	Compare element-by-element
for...in on arrays	Use for or for...of
fill([]) shares reference	Use Array.from(() => [])
push returns length, not array	Store length or ignore return
if ([]) is truthy	Check arr.length === 0

---

Master workflow

1. Create -- [] literal, Array.of(), Array.from().
2. Access -- arr[i], arr.at(-1), destructure.
3. Modify -- push/pop (end), unshift/shift (start), splice (anywhere).
4. Merge -- [...a, ...b] or concat.
5. Search -- includes (boolean), find (element), indexOf (index).
6. Iterate -- for...of (values), for (index), avoid for...in.
7. 2D -- Array.from with factory, matrix[r][c], nested loops.

---

End of 1.21 quick revision.