DEV Community

Cover image for 28 Javascript Array Methods: A Cheat Sheet for Developer
Rahul Sharma
Rahul Sharma

Posted on • Updated on

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
How to cancel Javascript API request with AbortController
13 Typescript Utility: A Cheat Sheet for Developer
No more redux action creator functions
Javascript short reusable functions trick and tips

More content at Dev.to.
Catch me on Github, Twitter, LinkedIn, Medium, and Stackblitz.

Discussion (26)

Collapse
konrud profile image
Konstantin Rouda

Array flat example has a wrong result.

Applying Array.flat() without any value will only flat a provided array up to one level. In the provided example you have an array with 2 nesting levels. Thus, the result should be [1, 2, 3, 4, [5, 6]].

If you know the number of nesting arrays you can provide it (e.g. list.flat(2)), otherwise you can use global property Infinity with it (e.g. list.flat(Infinity)) which will flat all number of nesting arrays.

Thus your example might be rewritten in the following way


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

// OR
list.flat(2); // [1, 2, 3, 4, 5, 6]

Enter fullscreen mode Exit fullscreen mode
Collapse
devsmitra profile image
Rahul Sharma Author

My bad, Thank you so much for pointing it out.

Collapse
jonrandy profile image
Jon Randy

As previously mentioned, these are not hacks. Might also be a good idea to give working code samples, instead of ones with emojis that give errors.

Collapse
devsmitra profile image
Rahul Sharma Author

Thanks for the suggestion, Emojis will work if use as string '😊'.

Collapse
jonrandy profile image
Jon Randy

But not as variable names

Thread Thread
devsmitra profile image
Rahul Sharma Author

I've also add code snippets, hope that helps.

Collapse
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

Cool article, but poorly named. These just aren't hacks.

Collapse
devsmitra profile image
Rahul Sharma Author

Thanks for the suggestion

Collapse
oricohen profile image
OriCohen05

Nice article, the emoji's are bad for me, sorry.

Collapse
devsmitra profile image
Rahul Sharma Author

Thanks, I've also add code snippets, hope that helps.

Collapse
oricohen profile image
OriCohen05

It is man, Good job ! (:

Collapse
tmchuynh profile image
Tina Huynh

Love it!! Thanks for sharing

Collapse
gtobar profile image
Guillermo Tobar

Good idea, adding emojis worked for me, it was also clear and simple. Thanks for posting.

Collapse
elsyng profile image
Ellis

Interesting. One can read the code with emojis very fast. Very good idea :)

Collapse
qq449245884 profile image
qq449245884

Dear Rahul Sharma,may I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
devsmitra profile image
Rahul Sharma Author • Edited on

Sure, you can don't forget to add original author and original source.

Collapse
gv211432 profile image
Gaurav Vishwakarma

At only one glance I got all the methods. It's really awesome πŸ‘Œ. Unique concept of explaining with emojis.

Collapse
katesoft8 profile image
Kate Soft

Good text.
I'm new in developing, and your article saved me a lot of time. I save it to my bookmarks)
I'm trying to find a job offer for React js, could you please take a look if those questions keenethics.com/blog/react-intervie... for interview are actual?

Collapse
devsmitra profile image
Rahul Sharma Author
Collapse
timhuang profile image
Timothy Huang

Useful cheat sheet, emojis are so funny to show off these functions. Thanks for sharing.

Collapse
golangch profile image
Stefan Wuthrich

Cool. Prepared like this it should be easy to find a #react job on reactjsjob.com or javascriptjob.xyz

Collapse
aruls1962 profile image
aruls1962

A two-dimensional array example for each section will be useful. No one deals with a single dimension array in real life

Collapse
dannyengelman profile image
Danny Engelman

A somewhat shorter sheet:
array-methods.github.io

Collapse
ardiaankur profile image
Ankur Gupta

How come these are hacks? These are in built JavaScript methods available on mozilla JavaScript documentation as well.

Collapse
devsmitra profile image
Rahul Sharma Author

I've already updated the title.

Collapse
oricohen profile image
OriCohen05

Otherwise, I would love if you'll go to check out my last article and give me an advise or any tips on changes.