You can use this as a Cheatsheet whenever you do array related operations.

7 ways to iterate Arrays

Arrays can be iterated in many ways:

let arr = [1,2,3,4,5];

// normal for loop
for(let i= 0, len=arr.length; i<len; i++) {
  console.log(arr[i]);
}

// for..of loop
for (val of arr) {
  console.log(val);
}

// for..in loop
for (prop in arr) {
  console.log(arr[prop]);
}

// forEach loop
arr.forEach((val) => {
  console.log(val);
});

// while loop
let x = 0;
while(x < arr.length) {
  console.log(arr[x]);
  x++;
}

// do..while loop
let x = 0;
do {
  x++;
  console.log(x);
} while(x < arr.length);

// Iterator
const it = arr[Symbol.iterator]();
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);

Creating Arrays

let arr = [1,2,3];

Array.from('foo'); // ["f", "o", "o"]

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

['a', 'b', 'c']

is equivalent to this object:

{
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

const arr = Array(100);

is equivalent to this object:

{
  //no index keys!
  length: 100
}

Manipulate Arrays

Extract first and last item (pop and shift)

let arr = [1,2,3,4,5];

// get last item
arr.pop(); // 5
console.log(arr);  // [1,2,3,4]

// get first item
arr.shift(); // 1
console.log(arr);  // [2,3,4]

Add item to first and last position (unshift and push)

let arr = [1,2,3,4,5];

// add item to the end
arr.push(6); // 6 (array length)
console.log(arr); // [1,2,3,4,5,6]

// add item to the start
arr.unshift(0); // 7 (array length)
console.log(arr); // [0,1,2,3,4,5,6]

You can also use spread operator, but unlike unshift() and push it creates a new array:

let arr = [1,2,3,4,5];

// add item to the end
console.log([...arr, 6]); // [1,2,3,4,5,6]

// add item to the start
console.log([0, ...arr]); // [0,1,2,3,4,5]

Add / overwrite an item at a specific index

let arr = [];
arr[2] = 3;
console.log(arr); // [undefined, undefined, 3]

Extract items (splice and slice)

splice mutates the original array, slice does not.

// extract 3 items starting from index 1
let arr = [1,2,3,4,5];
arr.splice(1,3); // [2, 3, 4]
console.log(arr); // [1, 5]

// extract all items starting from next to last index
let arr = [1,2,3,4,5];
arr.splice(-2); // [4, 5]
console.log(arr); // [1, 2, 3] splice changes the original array

// extract all items starting from next to last index
let arr = [1,2,3,4,5];
arr.slice(-2); // [4, 5]
console.log(arr); // [1, 2, 3, 4, 5] slice does not change the array

Replace items in a sequence (fill)

const arr = [1, 2, 3, 4, 5];
console.log(arr.fill("A", 1, 3)); // [1, "A", "A", 4, 5]

Querying items of an array

None of the following examples modifies the original array

Get a value from a known index

let arr = [1,2,3,4,5];
arr[3]; // 4

Get index from a know value (indexOf)

// get index position of item
let arr = [1,2,3,4,5];
arr.indexOf(2); // 1 (item 2 is at index 1)

Use lastIndexOf if you want the last index of an item.

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
animals.lastIndexOf('Dodo'); // 3
animals.lastIndexOf('Tiger'); // 1

Get key/value pairs

const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();

iterator1.next().value; // [0, "a"]
iterator1.next().value; // [1, "b"]

Info about array

Number of items in an array (length)

let arr = [1,2,3,4,5];
console.log(arr.length); // 5

Array.isArray(arr) // true

Operations using the whole array

Instead of processing each array item individually, the following operations process the array(s) on the whole.

Sort items (sort)

This method modifies the original array.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"]

Caution: Numbers are converted to strings and then sorted:

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // expected output: Array [1, 100000, 21, 30, 4]

Copy an array

// slice creates a shallow copy of an array
let arr = [1,2,3,4,5];
let arr2 = arr.slice();

arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6] modified
console.log(arr2); // [1, 2, 3, 4, 5] unmodified

Alternatively using spread operator

let arr = [1,2,3,4,5];
let arr2 = [...arr]

arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6] modified
console.log(arr2); // [1, 2, 3, 4, 5] unmodified

Gluing arrays together (concat)

const array1 = ['a', 'b', 'c', 'd'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); // ["a", "b", "c", "d", "d", "e", "f"] yes, "d" appears twice

Alternatively using spread operator

const array1 = ['a', 'b', 'c', 'd'];
const array2 = ['d', 'e', 'f'];
const array3 = [...array1, ...array2];

console.log(array3); // ["a", "b", "c", "d", "d", "e", "f"] yes, "d" appears twice

Decrease array depth/hierarchy (flat)

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

const arr2 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr2.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

If you want to use map and flat together you can use flatmap().

let arr1 = ["it's Sunny in", "", "California"];
arr1.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]

Joining items together to a single string with defined separator (join)

const elements = ['Fire', 'Air', 'Water'];

elements.join(); // "Fire,Air,Water"
elements.join(''); // "FireAirWater"
elements.join('-'); // "Fire-Air-Water"

Get item keys as Iterator (keys)

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2

Get item values as Iterator (values)

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

Reverse order of items (reverse)

This method modifies the original array.

const arr = [1,2,3];
console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]

Perform operations on every item

Process each item and add result as item in a new array (map)

Map always returns an array of different shape, same order, same size.

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2); // [2, 8, 18, 32]

Potential pitfall:

Higher-order functions like map, reduce, filter, and forEach iterate over the index keys of the array object from 0 to length, but the callback is only executed if the key exists on the object. This explains why the following example does not work as you might expect:

// We would like to have: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr = Array(10).map((val, i) => i);

// But we get:
console.log(arr[0] === undefined);  // true

Nothing happens because there are no index keys! arr actually looks like this:

arr = {length: 100}

The solution is:

const arr = [...Array(10)].map((val, i) => i);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Spreading the array into an empty array results in an array that’s filled with undefined at each index. The spread operator is simpler than any higher-order function (such as map).

Alternatives:

const arr = new Array(10).fill(undefined).map((val,idx) => idx);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.from(Array(10).keys())
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

[...Array(10).keys()]
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.from({length: 10}, (_, i) => i + 1)
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Creating alphabet from an array

First we create an array containing 26 elements, then we return the charCode for each letter starting from 65 because 65 represents the letter A in the asci code table:

const alpha = Array.from(Array(26)).map((e, i) => i + 65);
const alphabet = alpha.map((x) => String.fromCharCode(x));
console.log(alphabet);

Run a conditional check and return true if every single check is passing (every)

const arr = [1, 30, 39, 29, 10, 13];
arr.every((currentValue) => currentValue < 40); // true

If it suffices, that not all but at least one item is passing the test use some():

Run a conditional check and return true if at least one single check is passing (some)

const array = [1, 2, 3, 4, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;

array.some(even); // true

Run a conditional check and collect passing values in a new array (filter)

Filter always returns an array of same shape, same order, different size.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result); // ["exuberant", "destruction", "present"]

Run a conditional check and return first matching item (find)

const array1 = [5, 12, 8, 130, 44];
array1.find(element => element > 10); // 12

Use findIndex if you want the item’s index instead.

Return true if array contains value (includes)

const pets = ['cat', 'dog', 'bat'];
pets.includes('cat'); // true

Process current and previous value together and return result (reducer)

const arr = [1, 2, 3, 4];
const reducer = (accumulator, currentValue, currentIndex, srcArray) => {
  console.log(`acc ${accumulator} + cur ${currentValue}`);
  return accumulator + currentValue;
};

arr.reduce(reducer, 20);

// "acc 20 + cur 1"
// "acc 21 + cur 2"
// "acc 23 + cur 3"
// "acc 26 + cur 4"
// 30

If you want to start from the end of the array use reduceRight():

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1); // [4, 5, 2, 3, 0, 1]

Spread operator

Spread extracts each item in an Iterable (such as an array):

const arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3

Here are some example when and why you want to do that:

Spread to match function params

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
sum(...numbers); // 6

// instead of
sum.apply(null, numbers); // 6

Spread to enhance an array literal

const arr = [1, 2, 3];
[...arr, '4', 'five', 6]; // [1, 2, 3, "4", "five", 6]