DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for JS Array Cheatsheet
Michael Sakhniuk
Michael Sakhniuk

Posted on • Updated on

JS Array Cheatsheet

Short JavaScript Array methods cheatsheet, that helps you to learn, remind, or prepare to JS interview.

  ['a', 'b', 'c'].length // 3
  ['a', 'b', 'c'].concat(['d', 'e']) // ['a', 'b', 'c', 'd', 'e']
  ['a', 'b', 'c'].join('_') // 'a_b_c'
  ['a', 'b', 'c'].slice(2) // ['c']
  ['a', 'b', 'c', 'b', 'b'].indexOf('b') // 1
  ['a', 'b', 'c', 'b', 'b'].lastIndexOf('b') // 4
  [1, 2, 3, 4].map(item => item * 10) // [10, 20, 30, 40]
  [1, 2, 3, 4].reduce((sum, cur) => sum + cur) // 10
  [4, 2, 5, 1, 3].sort() // [1, 2, 3, 4, 5]
  ['a', 'b', 'c'].reverse() // ['c', 'b', 'a']
  [1, 2, 3, 4].forEach(item => console.log(item))
  [1, 2, 3, 4].every(item => item > 0) // true
  [-1, -2, -3, 4].some(item => item > 0) // true
  [1, -1, 2, -2, 3].filter(item => item > 0) // [1, 2, 3]
  [1, 2, 3].shift() // 1; and base array = [2, 3]
  [1, 2, 3].unshift(4, 5) // [4, 5, 1, 2, 3]
  [1, 2, 3].pop() // 3; base array - [1, 2]
  [1, 2, 3].push(4, 5) // 5; base array - [1, 2, 3, 4, 5]
  ["I'm", "learning", "JavaScript"].splice(1, 1) // ["learning"]; ["I'm", "JavaScript"]

Enter fullscreen mode Exit fullscreen mode

length

Return total count of elements in array

['a', 'b', 'c'].length // 3
Enter fullscreen mode Exit fullscreen mode

concat

This method merges your base array and array from arguments. Concat doesn't change the existing base array, just return new
one.

['a', 'b', 'c'].concat(['d', 'e']) // ['a', 'b', 'c', 'd', 'e']

// or you can merge arrays without any method (by spread operator)
const arr1 = ['a', 'b', 'c']
const arr2 = ['d', 'e']

const result = [...arr1, ...arr2] // ['a', 'b', 'c', 'd', 'e']
Enter fullscreen mode Exit fullscreen mode

join

Return string of array elements, that separated by separator string from arguments

['a', 'b', 'c'].join('_') // 'a_b_c'
Enter fullscreen mode Exit fullscreen mode

slice

Return copy of array from start and end from arguments

['a', 'b', 'c'].slice(2) // ['c']
['a', 'b', 'c'].slice(0, 1) // ['a']
Enter fullscreen mode Exit fullscreen mode

indexOf

Returns index of the first founded element

['a', 'b', 'c', 'b', 'b'].indexOf('b') // 1
['a', 'b', 'c'].indexOf('d') // -1
Enter fullscreen mode Exit fullscreen mode

lastIndexOf

Returns index of last founded element

['a', 'b', 'c', 'b', 'b'].lastIndexOf('b') // 4
Enter fullscreen mode Exit fullscreen mode

map

Method creates a new array populated with the results of calling a provided callback

[1, 2, 3, 4].map(item => item * 10) // [10, 20, 30, 40]
Enter fullscreen mode Exit fullscreen mode

reduce

The method executes a callback (from args) on each element of the array, resulting in a single output value.

[1, 2, 3, 4].reduce((sum, cur) => sum + cur) // 10
Enter fullscreen mode Exit fullscreen mode

sort

Returns sorted array

[4, 2, 5, 1, 3].sort() // [1, 2, 3, 4, 5]
[4, 2, 5, 1, 3].sort((a, b) => b - a) // [5, 4, 3, 2, 1]
Enter fullscreen mode Exit fullscreen mode

reverse

Method reverses an array

['a', 'b', 'c'].reverse() // ['c', 'b', 'a']
Enter fullscreen mode Exit fullscreen mode

forEach

The method executes a provided function once for each array element.

[1, 2, 3, 4].forEach(item => console.log(item))
Enter fullscreen mode Exit fullscreen mode

every

Returns true if callback returns true for each array element.

[1, 2, 3, 4].every(item => item > 0) // true
Enter fullscreen mode Exit fullscreen mode

some

Returns true if callback returns true for any array element.

[-1, -2, -3, 4].some(item => item > 0) // true
Enter fullscreen mode Exit fullscreen mode

filter

The method creates a new array with all elements that pass the test implemented by the provided callback.

[1, -1, 2, -2, 3].filter(item => item > 0) // [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

shift

Removes the first element from an array

[1, 2, 3].shift() // 1; and base array = [2, 3]
Enter fullscreen mode Exit fullscreen mode

unshift

Add the element to the beginning of an array

[1, 2, 3].unshift(4, 5) // 5; array - [4, 5, 1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

pop

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

[1, 2, 3].pop() // 3; base array - [1, 2]
Enter fullscreen mode Exit fullscreen mode

push

The method adds one or more elements to the end of an array

[1, 2, 3].push(4, 5) // 5; base array - [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

splice

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

let arr = ["I'm", "learning", "JavaScript"];
arr.splice(1, 1); // from index 1, delete 1 element
console.log( arr ); // ["I'm", "JavaScript"]
Enter fullscreen mode Exit fullscreen mode

Click likes and add to bookmarks if you like that Article. Also follow me on Twitter

Top comments (6)

Collapse
jackent2b profile image
Jayant Khandelwal

Wow! great source mate!

Collapse
sakhnyuk profile image
Michael Sakhniuk Author

Thanks a lot!

Collapse
designeranna1 profile image
Designer Anna

Very easy to read and remembering the list of important JS methods.
Congrats on achieving this and thanks for sharing. :)

Collapse
sakhnyuk profile image
Michael Sakhniuk Author

Thank you, Anna!

Collapse
totherush profile image
Tobias

Nice! But .find(), .findIndex() is missing

Collapse
hojiakbar2101 profile image
Hojiakbar

wow very good

🌚 Life is too short to browse without dark mode