JavaScript Arrays Cheatsheet
šļø JavaScript Arrays Cheatsheet
Arrays are ordered collections of data that power most data handling in JavaScript.
This cheatsheet includes a complete reference of array properties and methods for creating, transforming, searching, iterating, ordering, joining, and flattening arrays.
ā Array properties and methods ā Creating arrays ā Adding and removing elements ā Transforming arrays ā Searching arrays ā Iterating arrays ā Ordering and joining ā Flattening arrays
#javascript #arrays #map #filter #reduce #spread #slice #find #sort #webdev
Array properties and methods
| Method | Mutating | Description |
|---|---|---|
Array.length | Returns the number of elements in the array. | |
Array.isArray() | Checks if a value is an array. | |
Array.from() | Creates an array from an iterable or array-like object. | |
Array.of() | Creates an array from the given arguments. | |
.push() | Yes | Adds elements to the end. |
.pop() | Yes | Removes the last element. |
.unshift() | Yes | Adds elements to the start. |
.shift() | Yes | Removes the first element. |
.concat() | Merges arrays into a new array. | |
.slice() | Returns a shallow copy of a portion. | |
.splice() | Yes | Adds/removes elements. |
.indexOf() | Returns the first index of a value. | |
.lastIndexOf() | Returns the last index of a value. | |
.includes() | Checks if a value exists. | |
.find() | Returns the first matching element. | |
.findIndex() | Returns the index of the first matching element. | |
.findLast() | Returns the last matching element. | |
.findLastIndex() | Returns the index of the last matching element. | |
.filter() | Returns a new array of matching elements. | |
.map() | Returns a new array of transformed elements. | |
.reduce() | Reduces the array to a single value. | |
.reduceRight() | Reduces from right to left. | |
.every() | Returns true if all elements match. | |
.some() | Returns true if any element matches. | |
.forEach() | Runs a function for each element. | |
.sort() | Yes | Sorts the array. |
.reverse() | Yes | Reverses the array. |
.join() | Joins elements into a string. | |
.flat() | Flattens nested arrays. | |
.flatMap() | Maps then flattens one level. | |
.fill() | Yes | Fills elements with a value. |
.at() | Returns element at index, supports negatives. |
Creating arrays
Array.isArray()
Checks if a value is an array.
Array.isArray([1, 2, 3]); // true
Array.isArray("hello"); // falseArray.from()
Creates an array from an iterable or array-like object.
Array.from("hello"); // ["h", "e", "l", "l", "o"]
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]Array.of()
Creates an array from the given arguments.
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(7); // [7]Adding and removing elements
.push() / .pop()
Add or remove elements at the end. Both mutate the array.
const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop(); // 4.unshift() / .shift()
Add or remove elements at the start. Both mutate the array.
const arr = [2, 3];
arr.unshift(1); // [1, 2, 3]
arr.shift(); // 1.splice()
Adds or removes elements at a specific index. Mutates the array.
const arr = [1, 2, 3, 4];
arr.splice(1, 2); // removes 2 elements starting at index 1
// arr is now [1, 4]
arr.splice(1, 0, 2, 3); // inserts 2 and 3 at index 1
// arr is now [1, 2, 3, 4]Transforming arrays
.map()
Returns a new array with each element transformed.
[1, 2, 3].map((x) => x * 2); // [2, 4, 6].filter()
Returns a new array of elements that pass the test.
[1, 2, 3, 4].filter((x) => x % 2 === 0); // [2, 4].reduce()
Reduces the array to a single value.
[1, 2, 3, 4].reduce((sum, value) => sum + value, 0); // 10Searching arrays
.includes()
Checks if a value exists.
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(5); // false.find() / .findIndex()
Find the first matching element (.find()) or its index (.findIndex()).
[1, 2, 3].find((x) => x > 1); // 2
[1, 2, 3].findIndex((x) => x > 1); // 1Iterating arrays
.forEach()
Runs a function for each element.
[1, 2, 3].forEach((x) => console.log(x));.every()
Returns true if all elements pass the test.
[2, 4, 6].every((x) => x % 2 === 0); // true
[1, 2, 3].every((x) => x > 0); // true.some()
Returns true if at least one element passes the test.
[1, 2, 3].some((x) => x > 2); // true
[1, 2, 3].some((x) => x > 5); // falseOrdering and joining
.sort()
Sorts the array in place. Mutates the array.
[3, 1, 2].sort((a, b) => a - b); // [1, 2, 3].reverse()
Reverses the array in place. Mutates the array.
[1, 2, 3].reverse(); // [3, 2, 1].join()
Joins elements into a string.
["a", "b", "c"].join("-"); // "a-b-c"Flattening arrays
.flat()
Flattens nested arrays.
[1, [2, 3], [4, [5]]].flat(); // [1, 2, 3, 4, [5]]
[1, [2, [3]]].flat(2); // [1, 2, 3].flatMap()
Maps each element then flattens the result one level.
[1, 2, 3].flatMap((x) => [x, x * 2]); // [1, 2, 2, 4, 3, 6]Full-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.