CheatSheet Of Most Useful JavaScript Array Functions

lokender singh — Tue, 14 Jul 2020 15:03:02 +0000

As a professional developer, most of my time I have to play with arrays to perform manipulation in data to get the desired outcome.

To play with arrays very well we must have to remember inbuilt array functions, So I make a list of arrays which I use most of my time.

These methods are the most used ones, they cover 99% of use cases

To add/remove elements:

Array.push(...items) – adds items to the end,

const array = [1, 2, 3, 4]
array.push(10) // 5 (push returns the length of the new array)
// array = [1, 2, 3, 4, 10]

Array.pop() – extracts an item from the end,

const array = [1, 2, 3 , 4]
array.pop() // 4 (pop returns the element removed)
// array = [1, 2, 3]

Array.shift() – extracts an item from the beginning,

const array = [1, 2, 3, 4]
array.shift() // 1(shift returns the removed element)
// array = [2, 3, 4]

Array.unshift(...items) – adds items to the beginning.

const array = [1, 2, 3, 4]
array.unshift(9, 10) // 6 (unshift returns the length of new array)
// array = [9, 10, 1, 2, 3, 4]

Array.splice(pos, deleteCount, ...items) – at index pos delete deleteCount elements and insert items.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

Array.slice(start, end) – creates a new array, copies elements from position start till end (not inclusive) into it.

const array = [1, 2, 3, 4]
const slicedArray = array.slice(0, 2)
// array = [1, 2, 3, 4]
// slicedArray = [1, 2]

Array.concat(...items) – returns a new array: copies all members of the current one and adds items to it. If any of items is an array, then its elements are taken.

const array = [1, 2, 3, 4]
const concatArray = array.concat([5, 6, 7, 8])
// array = [1, 2, 3, 4]
// concatArray = [1, 2, 3, 4, 5, 6, 7, 8]

To search among elements:

Array.indexOf/lastIndexOf(item, pos) – look for item starting from position pos, return the index or -1 if not found.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

Array.includes(value) – returns true if the array has value, otherwise false.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

Array.find/filter(func) – filter elements through the function, return first/all values that make it return true.

const array = [1, 2, 3, 4]
const filteredArray = array.filter(element => element%2)
// array = [1, 2, 3, 4]
// filteredArray = [1, 3]

Array.findIndex(func) - like find, but returns the index instead of a value.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

To iterate over elements:

Array.forEach(func) – calls func for every element, does not return anything.

const array = [1, 2, 3, 4]
array.forEach((element, index) => {
   console.log(`Element ${element} at index ${index}`)
})

\\ Element 1 at index 0
\\ Element 2 at index 1
\\ Element 3 at index 2
\\ Element 4 at index 3

To transform the array:

Array.map(func) – creates a new array from results of calling func for every element.

const array = [1, 2, 3, 4]
const mapArray = array.map(element => element * 2)
// array = [1, 2, 3, 4]
// mapArray = [2, 4, 6, 8]

Array.sort(func) – sorts the array in-place, then returns it.

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

Array.reverse() – reverses the array in-place, then returns it.

const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

Array.split()/Array.join() – convert a string to array and back.

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

console.log(elements.join());
// expected output: "Fire,Air,Water"

const string = "Fire,Air,Water";
console.log(string.split(','));
// output: ["Fire", "Air", "Water"]

Array.reduce(func, initial) – calculate a single value over the array by calling func for each element and passing an intermediate result between the calls.

const array = [1, 2, 3, 4]
const result = array.reduce((accumulator, current) => (
   accumulator + current
), 10)
// array = [1, 2, 3, 4]
// result = 20

Additionally:

Array.isArray(arr) - checks arr for being an array.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false

Array.keys() - returns a new Array Iterator object that contains the keys for each index in the array.

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

Array.values() - returns a new Array Iterator object that contains the values for each index in the array.

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"

Array.some() - at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

Array.every() - all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true