Home

Array Methods

6 min read

Add/Remove Elements:

push(...items) - Add to end

javascript

const arr = [1, 2, 3];
arr.push(4, 5); // arr = [1, 2, 3, 4, 5]
// Returns: new length (5)
// Mutates: Yes
// Use: Adding items to end

pop() - Remove from end

javascript

const arr = [1, 2, 3];
const last = arr.pop(); // arr = [1, 2], last = 3
// Returns: removed element (or undefined if empty)
// Mutates: Yes
// Use: Remove and get last item

shift() - Remove from beginning

javascript

const arr = [1, 2, 3];
const first = arr.shift(); // arr = [2, 3], first = 1
// Returns: removed element (or undefined if empty)
// Mutates: Yes
// Use: Remove and get first item

unshift(...items) - Add to beginning

javascript

const arr = [2, 3];
arr.unshift(0, 1); // arr = [0, 1, 2, 3]
// Returns: new length (4)
// Mutates: Yes
// Use: Adding items to beginning

splice(start, deleteCount, ...items) - Swiss army knife

javascript

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b'); // arr = [1, 2, 'a', 'b', 4, 5]
// Returns: array of deleted elements [3]
// Mutates: Yes
// Use: Insert/delete at any position

slice(start, end) - Copy portion

javascript

const arr = [1, 2, 3, 4, 5];
const copy = arr.slice(1, 4); // copy = [2, 3, 4], arr unchanged
// Returns: new array with copied elements
// Mutates: No
// Use: Get portion without modifying original

concat(...items) - Combine arrays

javascript

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2, [5, 6]); // [1, 2, 3, 4, 5, 6]
// Returns: new combined array
// Mutates: No
// Use: Merge arrays/values

Search Elements:

indexOf(item, start) - Find first index

javascript

const arr = [1, 2, 3, 2, 4];
arr.indexOf(2); // 1 (first occurrence)
arr.indexOf(2, 2); // 3 (start from index 2)
arr.indexOf(5); // -1 (not found)
// Returns: index or -1
// Use: Find position of item

includes(value) - Check existence

javascript

const arr = [1, 2, 3];
arr.includes(2); // true
arr.includes(5); // false
// Returns: boolean
// Use: Check if item exists (cleaner than indexOf)

find(callback) - Find first match

javascript

const users = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}];
const user = users.find(u => u.id === 2); // {id: 2, name: 'Jane'}
const missing = users.find(u => u.id === 3); // undefined
// Returns: first matching element or undefined
// Use: Find object by condition

filter(callback) - Find all matches

javascript

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
// Returns: new array with matching elements
// Use: Get all items meeting condition

findIndex(callback) - Find first index by condition

javascript

const users = [{id: 1}, {id: 2}];
const index = users.findIndex(u => u.id === 2); // 1
// Returns: index or -1
// Use: Get position of object by condition

Transform Arrays:

map(callback) - Transform each element

javascript

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]
const names = users.map(u => u.name); // ['John', 'Jane']
// Returns: new array with transformed elements
// Use: Convert array to different format

forEach(callback) - Execute for each

javascript

const numbers = [1, 2, 3];
numbers.forEach(n => console.log(n)); // logs: 1, 2, 3
// Returns: undefined
// Use: Side effects (logging, DOM manipulation)

reduce(callback, initial) - Combine to single value

javascript

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0); // 10
const max = numbers.reduce((acc, n) => Math.max(acc, n)); // 4
// Returns: single accumulated value
// Use: Sum, count, find min/max, build objects

sort(compareFunc) - Sort in place

javascript

const arr = [3, 1, 4, 1, 5];
arr.sort(); // [1, 1, 3, 4, 5] (string sort by default!)
arr.sort((a, b) => a - b); // [1, 1, 3, 4, 5] (numeric sort)
arr.sort((a, b) => b - a); // [5, 4, 3, 1, 1] (reverse)
// Returns: the sorted array (same reference)
// Mutates: Yes
// Use: Order elements

reverse() - Reverse in place

javascript

const arr = [1, 2, 3];
arr.reverse(); // arr = [3, 2, 1]
// Returns: the reversed array (same reference)
// Mutates: Yes
// Use: Flip order

String ↔ Array:

split(separator) - String to array

javascript

"a,b,c".split(","); // ["a", "b", "c"]
"hello".split(""); // ["h", "e", "l", "l", "o"]
"a b c".split(" "); // ["a", "b", "c"]

join(separator) - Array to string

javascript

["a", "b", "c"].join(","); // "a,b,c"
["a", "b", "c"].join(" "); // "a b c"
["a", "b", "c"].join(""); // "abc"

Utility:

Array.isArray(value) - Check if array

javascript

Array.isArray([1, 2, 3]); // true
Array.isArray("hello"); // false
Array.isArray({length: 3}); // false

Quick Reference - Mutating vs Non-Mutating:

Mutating (changes original):

  • push, pop, shift, unshift
  • splice, sort, reverse

Non-mutating (returns new):

  • slice, concat, map, filter, find
  • includes, indexOf, join

Common Interview Gotchas:

javascript

// sort() converts to strings by default!
[10, 2, 1].sort(); // [1, 10, 2] ❌
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10] ✅
 
// map vs forEach
const doubled = [1, 2, 3].forEach(x => x * 2); // undefined ❌
const doubled = [1, 2, 3].map(x => x * 2); // [2, 4, 6] ✅
 
// find vs filter
users.find(u => u.active); // first active user or undefined
users.filter(u => u.active); // all active users array

Bottom line: Know which methods mutate and which return new arrays. Use map for transforming, filter for selecting, reduce for combining!

Map and Set

Map – is a collection of keyed values.

Methods and properties:

  • new Map([iterable]) – creates the map, with optional iterable (e.g. array) of [key,value] pairs for initialization.
  • map.set(key, value) – stores the value by the key, returns the map itself.
  • map.get(key) – returns the value by the key, undefined if key doesn’t exist in map.
  • map.has(key) – returns true if the key exists, false otherwise.
  • map.delete(key) – removes the element by the key, returns true if key existed at the moment of the call, otherwise false.
  • map.clear() – removes everything from the map.
  • map.size – returns the current element count.

The differences from a regular Object:

  • Any keys, objects can be keys.
  • Additional convenient methods, the size property.

Set – is a collection of unique values.

Methods and properties:

  • new Set([iterable]) – creates the set, with optional iterable (e.g. array) of values for initialization.
  • set.add(value) – adds a value (does nothing if value exists), returns the set itself.
  • set.delete(value) – removes the value, returns true if value existed at the moment of the call, otherwise false.
  • set.has(value) – returns true if the value exists in the set, otherwise false.
  • set.clear() – removes everything from the set.
  • set.size – is the elements count.