TheLazy.Dev
Portfolio GitHub

Blog

javascript |array |node |typescript

28 Javascript Array Methods: A Cheat Sheet for Developer

devsmitra

Rahul Sharma

Posted on March 28, 2022

28 Javascript Array Methods: A Cheat Sheet for Developer

Let's understand javascript array functions and how to use them.

Array.map()

Returns a new array with the results of calling a provided function on every element in this array. 


const list = [ðŸ˜Ŧ, ðŸ˜Ŧ, ðŸ˜Ŧ, ðŸ˜Ŧ];
list.map((⚩ïļ) => 😀); // [😀, 😀, 😀, 😀]

// Code
const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]
Enter fullscreen mode Exit fullscreen mode

Array.filter()

Returns a new array with all elements that pass the test implemented by the provided function. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ];
list.filter((⚩ïļ) => ⚩ïļ === 😀); // [😀, 😀]

// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]
Enter fullscreen mode Exit fullscreen mode

Array.reduce()

Reduce the array to a single value. The value returned by the function is stored in an accumulator (result/total). 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.reduce((⮜ïļ, ⚩ïļ) => ⮜ïļ + ⚩ïļ); // 😀 + ðŸ˜Ŧ + 😀 + ðŸ˜Ŧ + ðŸĪŠ

// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15
Enter fullscreen mode Exit fullscreen mode

Array.reduceRight()

Executes a reducer function (that you provide) on each element of the array resulting in a single output value(from right to left). 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.reduceRight((⮜ïļ, ⚩ïļ) => ⮜ïļ + ⚩ïļ); // ðŸĪŠ + ðŸ˜Ŧ + 😀 + ðŸ˜Ŧ + 😀

// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15
Enter fullscreen mode Exit fullscreen mode

Array.fill()

Fill the elements in an array with a static value. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.fill(😀); // [😀, 😀, 😀, 😀, 😀]

// Code
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]
Enter fullscreen mode Exit fullscreen mode

Array.find()

Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.find((⚩ïļ) => ⚩ïļ === 😀); // 😀
list.find((⚩ïļ) => ⚩ïļ === 😝); // undefined

// Code
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined
Enter fullscreen mode Exit fullscreen mode

Array.indexOf()

Returns the first index at which a given element can be found in the array, or -1 if it is not present. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.indexOf(😀); // 0
list.indexOf(ðŸ˜Ą); // -1

// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1
Enter fullscreen mode Exit fullscreen mode

Array.lastIndexOf()

Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.lastIndexOf(😀); // 3
list.lastIndexOf(😀, 1); // 0

// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1
Enter fullscreen mode Exit fullscreen mode

Array.findIndex()

Returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.findIndex((⚩ïļ) => ⚩ïļ === 😀); // 0

// You might be thinking how it's different from `indexOf` ðŸĪ”
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

// OR
const array = [{
  id: 😀
}, {
  id: ðŸ˜Ŧ
}, {
  id: ðŸĪŠ
}];

array.findIndex((element) => element.id === ðŸĪŠ); // 2
Enter fullscreen mode Exit fullscreen mode

Array.includes()

Returns true if the given element is present in the array. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.includes(😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false
Enter fullscreen mode Exit fullscreen mode

Array.pop()

Removes the last element from an array and returns that element. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.pop(); // ðŸĪŠ
list; // [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ]

// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

Array.push()

Appends new elements to the end of an array, and returns the new length. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.push(ðŸ˜Ą); // 5
list; // [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ, ðŸ˜Ą]

// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

Array.shift()

Removes the first element from an array and returns that element. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.shift(); // 😀
list; // [ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]

// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Array.unshift()

Adds new elements to the beginning of an array, and returns the new length. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.unshift(ðŸ˜Ą); // 6
list; // [ðŸ˜Ą, 😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]

// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Array.splice()

Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.splice(1, 2); // [😀, ðŸ˜Ŧ]
list; // [😀, ðŸ˜Ŧ, ðŸĪŠ]

// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Array.slice()

Returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.slice(1, 3); // [ðŸ˜Ŧ, 😀]
list; // [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]

// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Array.join()

Joins all elements of an array into a string. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.join('〰ïļ'); // "😀〰ïļðŸ˜Ŧ〰ïļðŸ˜€ã€°ïļðŸ˜Ŧ〰ïļðŸĪŠ"

// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"
Enter fullscreen mode Exit fullscreen mode

Array.reverse()

Reverses the order of the elements in an array. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.reverse(); // [ðŸĪŠ, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, 😀]
list; // [ðŸĪŠ, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, 😀]

// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]
Enter fullscreen mode Exit fullscreen mode

Array.sort()

Sorts the elements of an array in place and returns the array. The default sort order is according to string Unicode code points. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.sort(); // [😀, 😀, ðŸ˜Ŧ, ðŸ˜Ŧ, ðŸĪŠ]

// This make more sense ðŸĪ”
const array = ['D', 'B', 'A', 'C'];
array.sort(); // 😀 ['A', 'B', 'C', 'D']

// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // 😧 [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // 😀 [1, 2, 3, 4, 10]
Enter fullscreen mode Exit fullscreen mode

Array.some()

Returns true if at least one element in the array passes the test implemented by the provided function. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.some((⚩ïļ) => ⚩ïļ === 😀); // true
list.some((⚩ïļ) => ⚩ïļ === ðŸ˜Ą); // false

// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false
Enter fullscreen mode Exit fullscreen mode

Array.every()

Returns true if all elements in the array pass the test implemented by the provided function. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.every((⚩ïļ) => ⚩ïļ === 😀); // false

const list = [😀, 😀, 😀, 😀, 😀];
list.every((⚩ïļ) => ⚩ïļ === 😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false

const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true
Enter fullscreen mode Exit fullscreen mode

Array.from()

Creates a new array from an array-like or iterable object. 


const list = 😀ðŸ˜Ŧ😀ðŸ˜ŦðŸĪŠ;
Array.from(list); // [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]

const set = new Set(['😀', 'ðŸ˜Ŧ', '😀', 'ðŸ˜Ŧ', 'ðŸĪŠ']);
Array.from(set); // [😀, ðŸ˜Ŧ, ðŸĪŠ]

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

Array.of()

Creates a new array with a variable number of arguments, regardless of number or type of the arguments. 


const list = Array.of(😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ);
list; // [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]

// Code
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Array.isArray()

Returns true if the given value is an array. 


Array.isArray([😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]); // true
Array.isArray(ðŸĪŠ); // false

// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false
Enter fullscreen mode Exit fullscreen mode

Array.at()

Returns a value at the specified index. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.at(1); // ðŸ˜Ŧ

// Return from last ðŸĪ”
list.at(-1); // ðŸĪŠ
list.at(-2); // ðŸ˜Ŧ

// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4
Enter fullscreen mode Exit fullscreen mode

Array.copyWithin()

Copies array elements within the array. Returns the modified array. 


const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.copyWithin(1, 3); // [😀, 😀, ðŸĪŠ, ðŸ˜Ŧ, ðŸĪŠ]

const list = [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ];
list.copyWithin(0, 3, 4); // [ðŸ˜Ŧ, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]

// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

NOTE: ðŸĪ”

  • first argument is the target at which to start copying elements from.
  • second argument is the index at which to start copying elements from.
  • third argument is the index at which to stop copying elements from.

Array.flat()

Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth. 


const list = [😀, ðŸ˜Ŧ, [😀, ðŸ˜Ŧ, ðŸĪŠ]];
list.flat(Infinity); // [😀, ðŸ˜Ŧ, 😀, ðŸ˜Ŧ, ðŸĪŠ]

// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

Array.flatMap()

Returns a new array formed by applying a given callback function to each element of the array, 


const list = [😀, ðŸ˜Ŧ, [😀, ðŸ˜Ŧ, ðŸĪŠ]];
list.flatMap((⚩ïļ) => [⚩ïļ, ⚩ïļ + ⚩ïļ ]); // [😀, 😀😀, ðŸ˜Ŧ, ðŸ˜ŦðŸ˜Ŧ, 😀, 😀😀, ðŸ˜Ŧ, ðŸ˜ŦðŸ˜Ŧ, ðŸĪŠ, ðŸĪŠðŸĪŠ]

// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]
Enter fullscreen mode Exit fullscreen mode

Must Read If you haven't

devsmitra

React redux best practice to reduce code

Rahul Sharma ãƒŧ May 3 '22

#react #redux #javascript #typescript
devsmitra

How to cancel Javascript API request with AbortController

Rahul Sharma ãƒŧ Apr 9 '22

#javascript #webdev #frontend #html
devsmitra

13 Typescript Utility: A Cheat Sheet for Developer

Rahul Sharma ãƒŧ Apr 2 '22

#typescript #javascript #webdev #frontend
devsmitra

How to solve REST API routing problem with decorators?

Rahul Sharma ãƒŧ Mar 23 '22

#node #typescript #javascript #express

Catch me on

devsmitra image

Rahul Sharma

Passionate JavaScript Developer 🚀 | Crafting Web Magic âœĻ | Code Enthusiast ðŸ’ŧ

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

💖 💊 🙅 ðŸšĐ
devsmitra
Rahul Sharma

Posted on March 28, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

28 Javascript Array Methods: A Cheat Sheet for Developer
javascript 28 Javascript Array Methods: A Cheat Sheet for Developer

March 28, 2022