JavaScript Arrays: The Complete Guide and Cheat Sheet

23/05/2025

Introduction

JavaScript arrays are the backbone of data processing in modern web and Node.js applications. We will go through the most important array methods, their use cases, and how to leverage them for efficient data manipulation.

At a high level, JavaScript arrays support:

Creation: from literals, constructors, Array.of, Array.from, and spread
Transformation: map, filter, flatMap, reduce, etc.
Querying: find, some, every, includes, indexOf, findLast, findLastIndex
Mutation & Immutability: push, pop, splice, but also toSorted, toReversed, with, toSpliced
Grouping & Aggregation: groupBy, reduce, flat, flatMap

Creating Arrays

Array Literals and Constructors


const arr1 = [1, 2, 3];
const arr2 = new Array(3); // [empty × 3]
const arr3 = Array.of(1, 2, 3); // [1, 2, 3]

Array.from and Spread


const arr4 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
const arr5 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

Filling and Initializing


const zeros = Array(5).fill(0); // [0, 0, 0, 0, 0]
const seq = Array.from({length: 5}, (_, i) => i + 1); // [1, 2, 3, 4, 5]

Core Array Methods

map, filter, reduce, reduceRight


const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15
const rightSum = numbers.reduceRight((acc, n) => acc - n, 0); // (((0-5)-4)-3)-2)-1

push, pop, shift, unshift


const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop(); // [1, 2, 3]
arr.unshift(0); // [0, 1, 2, 3]
arr.shift(); // [1, 2, 3]

concat, slice, splice


const a = [1, 2];
const b = [3, 4];
const combined = a.concat(b); // [1, 2, 3, 4]
const sliced = combined.slice(1, 3); // [2, 3]
const spliced = [...combined];
spliced.splice(1, 2, 9, 8); // [1, 9, 8, 4]

forEach


combined.forEach(x => console.log(x)); // logs 1, 2, 3, 4

join


const joined = combined.join('-'); // '1-2-3-4'

length


const len = combined.length; // 4

isArray


Array.isArray(combined); // true

keys, values, entries


const arr2 = ['a', 'b', 'c'];
const keys = [...arr2.keys()]; // [0, 1, 2]
const values = [...arr2.values()]; // ['a', 'b', 'c']
const entries = [...arr2.entries()]; // [[0, 'a'], [1, 'b'], [2, 'c']]

copyWithin


const arr3 = [1, 2, 3, 4, 5];
arr3.copyWithin(0, 3); // [4, 5, 3, 4, 5]

at


const last = arr3.at(-1); // 5

sort, reverse, toSorted, toReversed, with, toSpliced


const nums = [3, 1, 4, 1, 5];
nums.sort(); // [1, 1, 3, 4, 5] (mutates original)
const sorted = nums.toSorted(); // [1, 1, 3, 4, 5] (original preserved)
const reversed = nums.toReversed(); // [5, 4, 3, 1, 1] (original preserved)
const replaced = nums.with(2, 99); // [3, 1, 99, 1, 5] // with() replaces the value at index 2 
const spliced = nums.toSpliced(1, 2, 7, 8); // [3, 7, 8, 1, 5] // toSpliced() removes 2 elements starting from index 1 and adds 7 and 8

findLast, findLastIndex


const logs = [
  {level: 'info'},
  {level: 'error'},
  {level: 'info'},
  {level: 'error'}
];
const lastError = logs.findLast(l => l.level === 'error'); // {level: 'error'} (last one)
const lastErrorIdx = logs.findLastIndex(l => l.level === 'error'); // 3

flat, flatMap


const nestedArrays = [1, [2, 3], [4, [5, 6]]];
const flat1 = nestedArrays.flat();         // [1, 2, 3, 4, [5, 6]]
const flat2 = nestedArrays.flat(2);        // [1, 2, 3, 4, 5, 6]

const libraries = [
    {name: 'Central', books: ['JS Basics', 'Node.js']},
    {name: 'City', books: ['React', 'TypeScript']}
];
const allBooks = libraries.flatMap(library => library.books); // ['JS Basics', 'Node.js', 'React', 'TypeScript']

groupBy


const products = [
  {name: 'iPhone', category: 'Electronics'},
  {name: 'Shoes', category: 'Sportswear'},
  {name: 'MacBook', category: 'Electronics'}
];
const byCategory = Object.groupBy(products, p => p.category);
// { Electronics: [{...}, {...}], Sportswear: [{...}] }
const byCategoryMap = Map.groupBy(products, p => p.category);
// Map { 'Electronics' => [{...}, {...}], 'Sportswear' => [{...}] }