Array

An Array is a fundamental JavaScript data structure used to store multiple values in a single variable. Arrays are ordered collections where each element has a numeric index starting from 0.

Creating Arrays

javascript
// Array literal (most common)
const fruits = ['apple', 'banana', 'orange'];

// Array constructor
const numbers = new Array(1, 2, 3, 4, 5);

// Empty array
const empty = [];

// Mixed types (possible but not recommended in TypeScript)
const mixed = [1, 'hello', true, { name: 'John' }];

Common Array Methods

Adding/Removing Elements

javascript
const arr = [1, 2, 3];

// Add to end
arr.push(4); // [1, 2, 3, 4]

// Remove from end
arr.pop(); // [1, 2, 3]

// Add to beginning
arr.unshift(0); // [0, 1, 2, 3]

// Remove from beginning
arr.shift(); // [1, 2, 3]

Iteration Methods

javascript
const numbers = [1, 2, 3, 4, 5];

// map: Transform each element
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter: Keep elements that pass test
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// reduce: Reduce to single value
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

// forEach: Execute function for each element
numbers.forEach(n => console.log(n));

// find: Get first matching element
const found = numbers.find(n => n > 3);
// 4

// some: Test if any element passes
const hasEven = numbers.some(n => n % 2 === 0);
// true

// every: Test if all elements pass
const allPositive = numbers.every(n => n > 0);
// true

Other Useful Methods

javascript
const arr = [1, 2, 3, 4, 5];

// slice: Extract portion (doesn't modify original)
const sliced = arr.slice(1, 3); // [2, 3]

// splice: Add/remove elements (modifies original)
arr.splice(2, 1, 99); // [1, 2, 99, 4, 5]

// concat: Merge arrays
const merged = [1, 2].concat([3, 4]); // [1, 2, 3, 4]

// join: Convert to string
const str = arr.join('-'); // "1-2-3-4-5"

// includes: Check if element exists
arr.includes(3); // true

// indexOf: Find index of element
arr.indexOf(3); // 2

// reverse: Reverse order (modifies original)
arr.reverse(); // [5, 4, 3, 2, 1]

// sort: Sort elements (modifies original)
arr.sort((a, b) => a - b); // [1, 2, 3, 4, 5]

Spread Operator

javascript
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];

// Add elements
const extended = [...arr1, 4, 5];
// [1, 2, 3, 4, 5]

Array Destructuring

javascript
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]

// Skip elements
const [, , third] = [1, 2, 3];
// third = 3

Common Patterns

Remove duplicates

javascript
const unique = [...new Set([1, 2, 2, 3, 3, 4])];
// [1, 2, 3, 4]

Flatten nested arrays

javascript
const nested = [[1, 2], [3, 4], [5]];
const flat = nested.flat();
// [1, 2, 3, 4, 5]

// Deep flatten
const deep = [1, [2, [3, [4]]]];
const deepFlat = deep.flat(Infinity);
// [1, 2, 3, 4]

Array from range

javascript
// Create array of numbers 0-9
const range = Array.from({ length: 10 }, (_, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

TypeScript Arrays

typescript
// Typed array
const numbers: number[] = [1, 2, 3];

// Alternative syntax
const strings: Array<string> = ['a', 'b', 'c'];

// Readonly array
const readonly: readonly number[] = [1, 2, 3];
// readonly.push(4); // Error!

Performance Tips

  • Use map, filter, reduce for clarity but be aware of performance with large arrays
  • for loops are faster for simple iterations
  • Avoid modifying arrays during iteration
  • Use length property carefully (it can be set)

Learn More