1. Home
Technology / JavaScript

JavaScript Array Methods

A quick reference for adding, transforming, searching, and ordering items in JavaScript arrays.

TL;DR

  1. 01Use push(), pop(), shift(), and unshift() to add or remove items.
  2. 02Use map(), filter(), and reduce() to transform array data.
  3. 03Use find(), some(), and includes() to search arrays.
Jump to section

Tips

  1. 01Prefer non-mutating methods like map, filter, and slice when you want to keep your original array unchanged.
  2. 02Chain map, filter, and reduce together to transform data in one readable pipeline instead of writing several separate loops.

Warnings

  1. 01Sort and reverse change the original array in place, so copy first if you need to keep the source order.
  2. 02splice() also mutates the original array, and the wrong delete count can silently remove items you meant to keep.

Add and Remove

    push()

    Adds one or more items to the end, returns the new length.

    const cart = ['apple'];
cart.push('banana'); // 2
    pop()

    Removes and returns the last item.

    const stack = ['init', 'save', 'close'];
stack.pop(); // 'close'
    shift()

    Removes and returns the first item.

    const queue = ['first', 'second', 'third'];
queue.shift(); // 'first'
    unshift()

    Adds one or more items to the front, returns the new length.

    const updates = ['old'];
updates.unshift('new'); // 2
    splice()

    Inserts, removes, or replaces items at any index. Mutates in place.

    const list = ['a', 'b', 'c'];
list.splice(1, 1, 'x'); // returns ['b']
// list is now ['a', 'x', 'c']

Copy and Combine

    concat()

    Merges two or more arrays into a new array without mutation.

    const arr1 = [1, 2];
arr1.concat([3, 4]); // [1, 2, 3, 4]
    spread operator

    Copies or combines arrays cleanly without mutation.

    const a = [1, 2];
const b = [...a, 3];               // [1, 2, 3]
const merged = [...a, ...b, ...c]; // all combined
    slice()

    Copies a whole array or a portion without mutating the source.

    const arr = [1, 2, 3, 4];
arr.slice(1, 3); // [2, 3]
    Array.of()

    Builds a new array from arguments, even a single number.

    Array.of(7); // [7]
Array(7);    // empty array with length 7

Transform Data

    map()

    Creates a new array by transforming every element with a function.

    const prices = [10, 20, 30];
prices.map(p => p * 1.1); // [11, 22, 33]
    filter()

    Returns a new array keeping only items that pass the test.

    const users = [{active: true}, {active: false}];
users.filter(u => u.active); // [{active: true}]
    reduce()

    Combines all items into a single value; always pass an initial value.

    const nums = [1, 2, 3];
nums.reduce((acc, n) => acc + n, 0); // 6

Search and Test

    find()

    Returns the first element matching a condition, or undefined.

    users.find(u => u.id === 1); // {id: 1, ...}
    findIndex()

    Returns the index of the first match, or -1 if not found.

    users.findIndex(u => u.id === 1); // 0
    includes()

    Returns true if the exact value exists in the array.

    ['read', 'write'].includes('write'); // true
    some()

    Returns true if at least one element passes the test.

    users.some(u => u.isAdmin); // true or false
    every()

    Returns true only if all elements pass the test.

    tasks.every(t => t.done); // true or false

Order and Display

    sort()

    Sorts the array in place; always pass a comparator for reliable results.

    names.sort((a, b) => a.localeCompare(b));
    reverse()

    Flips the order of items in place.

    [1, 2, 3].reverse(); // [3, 2, 1]
    join()

    Combines all elements into a string with a separator.

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

    Runs a function on each item for side effects; returns undefined.

    items.forEach(item => console.log(item));
    Array.from()

    Converts any iterable — string, Set, NodeList — into a real array.

    Array.from('hi');             // ['h', 'i']
Array.from(new Set([1,1,2])); // [1, 2]

Flatten and Access

    flat()

    Collapses nested arrays one level deep; pass a depth to go deeper.

    const nested = [1, [2, [3]]];
nested.flat();   // [1, 2, [3]]
nested.flat(2);  // [1, 2, 3]
    flatMap()

    Maps over items and flattens the result one level in a single pass.

    const words = ['hi there', 'foo bar'];
words.flatMap(s => s.split(' '));
// ['hi', 'there', 'foo', 'bar']
    at()

    Accesses an element by index; negative values count from the end.

    const arr = [10, 20, 30, 40];
arr.at(0);  // 10
arr.at(-1); // 40
    fill()

    Overwrites a range of elements with a static value in place.

    const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3); // [1, 0, 0, 4, 5]
    Array.isArray()

    Safely checks whether a value is an array at runtime.

    Array.isArray([1, 2]); // true
Array.isArray('abc'); // false

In Practice

FAQ