Michael Sakhniuk

JS Array Cheatsheet

Michael Sakhniuk's photo
Michael Sakhniuk
·

7 min read

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"]

length

Return total count of elements in array

['a', 'b', 'c'].length // 3

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']

join

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

['a', 'b', 'c'].join('_') // 'a_b_c'

slice

Return copy of array from start and end from arguments

['a', 'b', 'c'].slice(2) // ['c']
['a', 'b', 'c'].slice(0, 1) // ['a']

indexOf

Returns index of the first founded element

['a', 'b', 'c', 'b', 'b'].indexOf('b') // 1
['a', 'b', 'c'].indexOf('d') // -1

lastIndexOf

Returns index of last founded element

['a', 'b', 'c', 'b', 'b'].lastIndexOf('b') // 4

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]

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

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]

reverse

Method reverses an array

['a', 'b', 'c'].reverse() // ['c', 'b', 'a']

forEach

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

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

every

Returns true if callback returns true for each array element.

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

some

Returns true if callback returns true for any array element.

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

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]

shift

Removes the first element from an array

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

unshift

Add the element to the beginning of an array

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

pop

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

[1, 2, 3].pop() // 3; base array - [1, 2]

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]

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"]

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

JavaScriptWeb DevelopmentBeginner Developerscheatsheet