DEV Community

Cover image for Array cheatsheet Javascript
Mansour Mahamat
Mansour Mahamat

Posted on • Updated on

Array cheatsheet Javascript

Variables in Javascript allow only one data to be stored at a time. However, given that it is often useful to manipulate many data, the concept of variable is sometimes insufficient, because it becomes difficult to manage a great number of distinct variables.

To remedy this, Javascript proposes a data structure allowing to store all these data in a "common variable": the array.

An array, in Javascript, is thus a variable which can contain several independent data, indexed by a number, called index. The index of an array is thus the element allowing to access the data stored in it.

The length method returns the length of the array.

ARray length

The push () method adds one or more elements to the end of an array and returns the new size of the array.


The pop () method removes the last element from an array and returns that element. This method changes the length of the array.


The unshift () method adds one or more elements to the start of an array and returns the new length of the array.


The shift () method removes the first element from an array and returns that element. This method changes the length of the array.


The forEach () method iterates through the array elements one by one to perform a function.


The filter () method creates and returns an array containing the elements that check the filter.


The map () method returns a new array containing all the elements of the initial array on which the function is called.


The reduce () method applies a function which is an "accumulator" and which processes each value in the array (from left to right) to reduce it to a single value.


The slice () method returns an array, containing a copy of part of the original array, the portion is defined by a start index and an end index (excluded). The original array will not be modified.


The concat () method is used to merge one or more arrays by concatenating them. This method does not modify existing arrays, it returns a new array which is the result of the operation.


The join () method creates and returns a new character string by concatenating all the elements of an array. The concatenation uses the comma or another string, supplied as an argument, as the separator.


The reverse() method reverses an array. The first array element becomes the last, and the last array element becomes the first.


Top comments (15)

zalithka profile image
Andre Greeff

so... I also want to jump on the complaints wagon for a moment here: why is everything emphasized!? grr... this just makes the paragraphs unnecessarily difficult to read.

but yeah, two issues I spot here:

  • length is most definitely a property, not a method..
  • [1, 2, 3, 4, 5].join("-") does not result in [1-2-3-4-5].. this results in the string "1-2-3-4-5".

lastly, why are you showing the final result of calling these functions as though they were assignments? that in itself is also confusing AF.. so much so, that it might actually mislead anyone who is still learning the cute and cuddly monster that is JavaScript.

franzcmarcelo profile image

...and you forgot to mention the spaces added to various string elements of the altered array 😅

piggov profile image
Bonny Piggov

I like how shift() adds a space to all other elements 😅

rocker2102 profile image
Ankush Yadav • Edited

array.length() is a function? or is it a mistake?
It's a property (array.length) if I remember right.

abdelzaher profile image
AbdElzaher 🇪🇬

length is a property of arrays in JavaScript i think it is mistake

abaidooprince profile image
Abaidoo Prince

This information is good. Thanks for taking the time to gather this. I know there are few comments on the errors coming your way but don't let that stop you from writing. Let them help you write better..Waiting for your next article.

elias_soykat profile image
Elias Soykat

Serialize from low value to high value using Array.sort

const a = [1, 6, 3]

const result = a.sort((a, b) => a - b)

console.log(result) // [1, 3, 6]

gatomo_oficial profile image
Gátomo • Edited

The definitive Array guide. My favourite part is the length... method? XD

gummerandy profile image
Andy Gummer

Thank you for taking the time in trying to create a useful article for every JavaScript developer to use.

There are a few mistakes in your screenshots starting with the first .length screenshot. I'm not trying to point out what others already commented about it not being a method, but at the answer 4. What I would suggest is to sometimes test your code, this can be as simple as just opening your inspect tool (press F12 or right click in your browser and then select inspect), and go open the console tab. I alway find this a very useful thing to do, if I want to test code. There are loads of tools to test code but I find my browser console the easiest and for some unexplained reason "the cleanest" (probably just personal preference). I'd like to ask you to look at all of your screenshots and test them. I am only pointing out this one because it's the first one people will notice.

Hopefully you continue to write articles, make mistakes, learn and improve. It's truly one of the best ways to get better as a developer! Looking forward to your next post!

mahamatmans profile image
Mansour Mahamat

Yes definetly, with mistake I'll learn a lot, and comment from other people help me a lot... Thanks community, Thanks Andy 🙏🏿

jensgro profile image
Jens Grochtdreis

This tool by Sara Drasner is interesting and helpful:

andrewbaisden profile image
Andrew Baisden

Even pro developers need to refer to the documentation on arrays every once in a while 😅

vladyn profile image
Vladimir Varbanov

A nice one - thank you!

shamolmojumder profile image
Shamol Mojumder

confusion with filter & map

vishalraj82 profile image
Vishal Raj

Assuming that an array has n elements, the filter function can return 0 to n elements, based on the condition. Such as
const even = [1,2,3,4,5,6].filter(n => n %2 === 0); // returns [2, 4, 6];

Assuming that an array has n elements, the map function will run every array element through the function and return n elements.
const double = [1,2,3,4,5].map(n => n * 2); // returns [2, 4, 6, 8, 10];

Hope this clears.