Docs
6.1-Array-Fundamentals
Module 12: Arrays
Overview
Arrays are ordered collections of values in JavaScript. They're one of the most commonly used data structures, providing powerful methods for storing, accessing, and manipulating lists of data.
┌──────────────────────────────────────────────────────────────────┐
│ Array Structure │
├──────────────────────────────────────────────────────────────────┤
│ │
│ const fruits = ['apple', 'banana', 'cherry', 'date']; │
│ │
│ Index: 0 1 2 3 │
│ ┌─────┐ ┌──────┐ ┌───────┐ ┌──────┐ │
│ │apple│ │banana│ │cherry │ │ date │ │
│ └─────┘ └──────┘ └───────┘ └──────┘ │
│ │
│ fruits[0] → 'apple' │
│ fruits[3] → 'date' │
│ fruits[-1] → undefined (use .at(-1) for last element) │
│ fruits.length → 4 │
│ │
└──────────────────────────────────────────────────────────────────┘
Topics Covered
12.1 Array Basics
- •Creating arrays
- •Accessing elements
- •Array properties
- •Array vs Object
12.2 Array Methods - Mutating
- •push, pop, shift, unshift
- •splice, sort, reverse
- •fill, copyWithin
12.3 Array Methods - Non-Mutating
- •slice, concat
- •map, filter, reduce
- •find, findIndex, includes
- •every, some
12.4 Array Iteration
- •forEach, for...of
- •entries, keys, values
- •Iteration patterns
12.5 Advanced Array Operations
- •Flattening arrays
- •Array destructuring
- •Spread operator with arrays
- •Array-like objects
12.1 Array Basics
Creating Arrays
// Array literal (most common)
const numbers = [1, 2, 3, 4, 5];
// Array constructor
const arr1 = new Array(3); // Creates array with 3 empty slots
const arr2 = new Array(1, 2, 3); // Creates [1, 2, 3]
// Array.of() - consistent behavior
const arr3 = Array.of(3); // Creates [3], not 3 empty slots
// Array.from() - from iterables
const arr4 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
const arr5 = Array.from({ length: 5 }, (_, i) => i * 2); // [0, 2, 4, 6, 8]
Accessing Elements
┌──────────────────────────────────────────────────────────────────┐
│ Accessing Elements │
├──────────────────────────────────────────────────────────────────┤
│ │
│ const arr = ['a', 'b', 'c', 'd', 'e']; │
│ │
│ Bracket Notation: │
│ arr[0] → 'a' (first) │
│ arr[4] → 'e' (last by index) │
│ arr[arr.length-1]→ 'e' (last traditional) │
│ │
│ .at() Method (ES2022): │
│ arr.at(0) → 'a' (first) │
│ arr.at(-1) → 'e' (last) │
│ arr.at(-2) → 'd' (second from end) │
│ │
│ Out of bounds: │
│ arr[10] → undefined │
│ arr.at(10) → undefined │
│ │
└──────────────────────────────────────────────────────────────────┘
Array Properties
const arr = [1, 2, 3, 4, 5];
// Length
console.log(arr.length); // 5
// Modify length
arr.length = 3; // Truncates: [1, 2, 3]
arr.length = 5; // Extends: [1, 2, 3, empty × 2]
// Check if array
Array.isArray(arr); // true
Array.isArray('hello'); // false
12.2 Mutating Methods
These methods modify the original array.
┌──────────────────────────────────────────────────────────────────┐
│ Mutating Methods │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Adding/Removing: │
│ ──────────────── │
│ push(item) │ Add to end │ Returns new length │
│ pop() │ Remove from end │ Returns removed item │
│ unshift(item) │ Add to start │ Returns new length │
│ shift() │ Remove from start│ Returns removed item │
│ │
│ Modifying: │
│ ────────── │
│ splice(i,n,...) │ Remove/insert │ Returns removed items │
│ sort(fn) │ Sort in place │ Returns sorted array │
│ reverse() │ Reverse order │ Returns reversed array │
│ fill(value) │ Fill with value │ Returns filled array │
│ │
│ ⚠️ These methods MODIFY the original array! │
│ │
└──────────────────────────────────────────────────────────────────┘
push / pop / unshift / shift
const stack = [];
// Add to end
stack.push('a'); // ['a'], returns 1
stack.push('b', 'c'); // ['a', 'b', 'c'], returns 3
// Remove from end
stack.pop(); // ['a', 'b'], returns 'c'
// Add to start
stack.unshift('x'); // ['x', 'a', 'b'], returns 3
// Remove from start
stack.shift(); // ['a', 'b'], returns 'x'
splice
const arr = ['a', 'b', 'c', 'd', 'e'];
// splice(startIndex, deleteCount, ...itemsToAdd)
// Remove elements
arr.splice(2, 1); // Removes 'c', arr = ['a', 'b', 'd', 'e']
// Insert elements
arr.splice(2, 0, 'x', 'y'); // arr = ['a', 'b', 'x', 'y', 'd', 'e']
// Replace elements
arr.splice(1, 2, 'z'); // arr = ['a', 'z', 'y', 'd', 'e']
// Negative index
arr.splice(-1, 1); // Removes last element
sort
// Default sort (converts to strings!)
[10, 2, 30, 1].sort(); // [1, 10, 2, 30] ⚠️ Wrong!
// Numeric sort
[10, 2, 30, 1].sort((a, b) => a - b); // [1, 2, 10, 30] ✓
// Descending
[10, 2, 30, 1].sort((a, b) => b - a); // [30, 10, 2, 1]
// String sort (case-insensitive)
['Banana', 'apple', 'Cherry'].sort((a, b) =>
a.toLowerCase().localeCompare(b.toLowerCase())
);
// Object sort
const users = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
];
users.sort((a, b) => a.age - b.age);
12.3 Non-Mutating Methods
These methods return new arrays without modifying the original.
┌──────────────────────────────────────────────────────────────────┐
│ Non-Mutating Methods │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Creating new arrays: │
│ ──────────────────── │
│ slice(start, end) │ Extract portion │ Returns new array │
│ concat(...arrays) │ Merge arrays │ Returns new array │
│ flat(depth) │ Flatten nested │ Returns new array │
│ flatMap(fn) │ Map then flatten │ Returns new array │
│ │
│ Transformation: │
│ ─────────────── │
│ map(fn) │ Transform each │ Returns new array │
│ filter(fn) │ Keep matching │ Returns new array │
│ reduce(fn, init) │ Reduce to value │ Returns accumulated │
│ │
│ Searching: │
│ ────────── │
│ find(fn) │ First match │ Returns element │
│ findIndex(fn) │ First match index│ Returns index │
│ indexOf(item) │ Index of item │ Returns index │
│ includes(item) │ Contains item? │ Returns boolean │
│ │
└──────────────────────────────────────────────────────────────────┘
slice
const arr = ['a', 'b', 'c', 'd', 'e'];
arr.slice(1, 3); // ['b', 'c'] (index 1 to 3, exclusive)
arr.slice(2); // ['c', 'd', 'e'] (from index 2 to end)
arr.slice(-2); // ['d', 'e'] (last 2 elements)
arr.slice(-3, -1); // ['c', 'd'] (negative indices)
arr.slice(); // ['a', 'b', 'c', 'd', 'e'] (shallow copy)
map
const numbers = [1, 2, 3, 4, 5];
// Transform each element
const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10]
// Access index
const indexed = numbers.map((n, i) => `${i}: ${n}`);
// Extract property
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map((user) => user.name); // ['John', 'Jane']
filter
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = numbers.filter((n) => n % 2 === 0); // [2, 4, 6, 8, 10]
const big = numbers.filter((n) => n > 5); // [6, 7, 8, 9, 10]
// Filter objects
const users = [
{ name: 'John', active: true },
{ name: 'Jane', active: false },
];
const activeUsers = users.filter((user) => user.active);
reduce
┌──────────────────────────────────────────────────────────────────┐
│ reduce() Flow │
├──────────────────────────────────────────────────────────────────┤
│ │
│ [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0) │
│ │
│ Step 1: acc=0, cur=1 → 0 + 1 = 1 │
│ Step 2: acc=1, cur=2 → 1 + 2 = 3 │
│ Step 3: acc=3, cur=3 → 3 + 3 = 6 │
│ Step 4: acc=6, cur=4 → 6 + 4 = 10 │
│ │
│ Result: 10 │
│ │
│ Syntax: array.reduce(callback, initialValue) │
│ callback: (accumulator, currentValue, index, array) => ... │
│ │
└──────────────────────────────────────────────────────────────────┘
const numbers = [1, 2, 3, 4, 5];
// Sum
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15
// Max
const max = numbers.reduce((a, b) => Math.max(a, b)); // 5
// Count occurrences
const fruits = ['apple', 'banana', 'apple', 'cherry', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
// { apple: 3, banana: 2, cherry: 1 }
// Group by property
const people = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 30 },
];
const byAge = people.reduce((acc, person) => {
const key = person.age;
(acc[key] = acc[key] || []).push(person);
return acc;
}, {});
find / findIndex
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' },
];
const jane = users.find((user) => user.name === 'Jane');
// { id: 2, name: 'Jane' }
const janeIndex = users.findIndex((user) => user.name === 'Jane');
// 1
const unknown = users.find((user) => user.name === 'Unknown');
// undefined
const unknownIndex = users.findIndex((user) => user.name === 'Unknown');
// -1
every / some
const numbers = [2, 4, 6, 8, 10];
// every: ALL elements must pass
numbers.every((n) => n % 2 === 0); // true
numbers.every((n) => n > 5); // false
// some: AT LEAST ONE element must pass
numbers.some((n) => n > 5); // true
numbers.some((n) => n > 100); // false
12.4 Array Iteration
const arr = ['a', 'b', 'c'];
// forEach
arr.forEach((item, index) => {
console.log(`${index}: ${item}`);
});
// for...of (values only)
for (const item of arr) {
console.log(item);
}
// for...of with index using entries()
for (const [index, item] of arr.entries()) {
console.log(`${index}: ${item}`);
}
// Traditional for loop (when you need break/continue)
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 'b') break;
console.log(arr[i]);
}
12.5 Advanced Operations
Flattening
const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat(); // [1, 2, 3, 4, [5, 6]]
nested.flat(2); // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity); // Flatten all levels
// flatMap (map + flat(1))
const sentences = ['Hello world', 'How are you'];
const words = sentences.flatMap((s) => s.split(' '));
// ['Hello', 'world', 'How', 'are', 'you']
Destructuring
const colors = ['red', 'green', 'blue', 'yellow'];
const [first, second] = colors; // first='red', second='green'
const [, , third] = colors; // third='blue'
const [head, ...rest] = colors; // head='red', rest=['green', 'blue', 'yellow']
// Default values
const [a = 'default', b] = []; // a='default', b=undefined
// Swap variables
let x = 1,
y = 2;
[x, y] = [y, x]; // x=2, y=1
Spread Operator
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// Combine arrays
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// Copy array
const copy = [...arr1]; // [1, 2, 3]
// Insert in middle
const inserted = [...arr1.slice(0, 2), 'x', ...arr1.slice(2)];
// [1, 2, 'x', 3]
// Convert iterable to array
const chars = [...'hello']; // ['h', 'e', 'l', 'l', 'o']
Common Patterns
┌──────────────────────────────────────────────────────────────────┐
│ Common Array Patterns │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Remove duplicates: │
│ [...new Set(array)] │
│ │
│ Filter + Map: │
│ arr.filter(x => x > 0).map(x => x * 2) │
│ │
│ Find max/min: │
│ Math.max(...numbers) │
│ Math.min(...numbers) │
│ │
│ Check if empty: │
│ arr.length === 0 │
│ │
│ Get random element: │
│ arr[Math.floor(Math.random() * arr.length)] │
│ │
│ Shuffle array: │
│ arr.sort(() => Math.random() - 0.5) // Simple but biased │
│ │
│ Create range: │
│ Array.from({ length: 5 }, (_, i) => i) // [0,1,2,3,4] │
│ │
└──────────────────────────────────────────────────────────────────┘
Key Takeaways
- •Arrays are zero-indexed ordered collections
- •Mutating methods modify the original array
- •Non-mutating methods return new arrays
- •Use
map,filter,reducefor functional programming - •Use
findfor first match,filterfor all matches - •Use
everyto check all,someto check any - •Spread operator
...for copying and combining - •Destructuring for extracting values