DEV Community

Cover image for 20+ Useful JavaScript Array Methods Cheatsheet
Ayesha Sahar
Ayesha Sahar

Posted on • Edited on • Originally published at ayeshasahar.hashnode.dev

20+ Useful JavaScript Array Methods Cheatsheet

Table of Contents

Arrays

  1. Array.push()
  2. Array.unshift()
  3. Array.pop()
  4. Array.shift()
  5. Array.splice()
  6. Array.concat()
  7. Array.isArray()
  8. Array.slice()
  9. Array.length
  10. Array.includes()
  11. Array.from()
  12. Array.fill()
  13. Array.filter()
  14. Array.find()
  15. Array.forEach()
  16. Array.map()
  17. Array.flat()
  18. Array.reverse()
  19. Array.every()
  20. Array.copyWithin()
  21. Array.reduce()
  22. Array.flatMap()
  23. Array.some()
  24. Array.of()
  25. Array.sort()
  26. Array.join()
  27. Array.toLocaleString()
  28. Array.keys()
  29. Array.values()
  30. Array.entries()

Conclusion


Arrays

If we talk in programming language, an array is said to be a collection of elements or items. They store data as elements and can retrieve them back whenever you need them. It is a widely used data structure in the programming languages that support it.
In JavaScript, we can use a pair of square brackets [] to represent an array. Every single element in the array is separated by a comma(,). They can be a collection of elements of any data type, meaning that you can create an array with elements of data type String, Boolean, Number, Objects, and even other Arrays. They are used to store multiple values in a single variable.

Syntax:

const array_name = [itemA, itemB, itemC,.............];   
Enter fullscreen mode Exit fullscreen mode

Example:

const flowers = ["lily", "rose", "tulip"];
console.log(flowers);
Enter fullscreen mode Exit fullscreen mode

Output:

lily, rose, tulip
Enter fullscreen mode Exit fullscreen mode

Arrays truly are a wonder in JavaScript. They have many useful built-in properties or methods that can help you resolve any task involving them. Let's discuss the most important and useful ones now.

1. Array.push()

This method adds elements at the end of an array.

Example:

// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];

// Adding 6 to the end of the array
number_arr.push(6);

console.log(number_arr);
Enter fullscreen mode Exit fullscreen mode

Output:

1, 2, 3, 4, 5, 6
Enter fullscreen mode Exit fullscreen mode

2. Array.unshift()

It is the opposite of array.push(). This method adds elements to the front of the array.

Example:

// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];

// Now adding 6 to the front of the array
number_arr.unshift(6);

console.log(number_arr);
Enter fullscreen mode Exit fullscreen mode

Output:

6, 1, 2, 3, 4, 5, 
Enter fullscreen mode Exit fullscreen mode

3. Array.pop()

This method removes elements from the end of the array.

Example:

// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];

// It will remove element from end of the array
number_arr.pop();

console.log(number_arr);
Enter fullscreen mode Exit fullscreen mode

Output:

1, 2, 3, 4,  
Enter fullscreen mode Exit fullscreen mode

4. Array.shift()

It is the opposite of array.pop(). It removes elements from the front of the array.

Example:

// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];

// Removing element from front of the array
number_arr.shift();

console.log(number_arr);
Enter fullscreen mode Exit fullscreen mode

Output:

2, 3, 4, 5 
Enter fullscreen mode Exit fullscreen mode

5. Array.splice()

It is a very useful method. It can remove or add elements from or in any particular location of the array.

Example:

// Adding elements using splice()
const fruits = ["Banana", "Orange", "Apple", "Mango"];

// At position 2, adding 2 elements
fruits.splice(2, 0, "Lemon", "Kiwi");

console.log(fruits);

// Removing elements using splice()

const number_arr = [ 2, 3, 4, 5, 6 ];

// using splice() to delete 3 elements starting from index 1
number_arr.splice(1, 3);

console.log(number_arr);

Enter fullscreen mode Exit fullscreen mode

Output:

Banana, Orange, Lemon, Kiwi, Apple, Mango
2, 6
Enter fullscreen mode Exit fullscreen mode

6. Array.concat()

This method is used to join two or more arrays.

Example:

// Declaring and initializing our arrays

const fruits = ["apple", "orange"];
const vegetables = ["potato", "capsicum", "carrot"];

const all = fruits.concat(vegetables);

console.log(all);
Enter fullscreen mode Exit fullscreen mode

Output:

apple, orange, potato, capsicum, carrot
Enter fullscreen mode Exit fullscreen mode

7. Array.isArray()

It determines whether the value passed through it is an array or not and returns the answer in booleans (true or false).

Example:

// Declaring and initializing our array

const fruits = ["apple", "orange"];
Array.isArray(fruits);

Enter fullscreen mode Exit fullscreen mode

Output:

True
Enter fullscreen mode Exit fullscreen mode

8. Array.slice()

This method returns selected elements from an array, as a new array.

Example:

// Declaring and initializing our array

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
console.log(citrus);

Enter fullscreen mode Exit fullscreen mode

Output:

Orange, Apple
Enter fullscreen mode Exit fullscreen mode

9. Array.length

This method returns or sets the number of elements in an array.

Example:

// Declaring and initializing our array

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

// Checking the length of the array
const len = fruits.length;

// Printing the result
console.log(len);

Enter fullscreen mode Exit fullscreen mode

Output:

5
Enter fullscreen mode Exit fullscreen mode

10. Array.includes()

This method checks if an array has a certain value among its elements.

Example:

// Initializing and declaring our array
let fruits = ["Banana", "Apple", "Mango", "Peach", "Orange, "Grapes"];

let check = fruits.includes("Apple");
console.log(check); // true

// This method is case sensitive

let check1 = fruits.includes("apple");
console.log(check1); // false

// The second argument here specifies position to start searching from

let check2 = fruits.includes("Apple", 2);
console.log(check2); // false

// The negative argument here starts the count from backwards
// Searching starts from third-to-last element

let check3 = fruits.includes("Apple", -3);
console.log(check3); // false

let check4 = fruits.includes("Lime");
console.log(check4); // false

Enter fullscreen mode Exit fullscreen mode

Output:

true
false
false
false
false
Enter fullscreen mode Exit fullscreen mode

11. Array.from()

This method creates a new but shallow-copied Array instance from an array-like or iterable object.

Example:

console.log(Array.from('hello'));
// output: Array ["h", "e", "l", "l", "o"]

console.log(Array.from([2, 3, 4], x => x + x));
// expected output: Array [4, 6, 8]

Enter fullscreen mode Exit fullscreen mode

12. Array.fill()

This method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

Example:

const arrayA = [1, 2, 3, 4];

// fill with 1 from position 2 until position 4
console.log(arrayA.fill(0, 2, 4));
// output: [1, 2, 1, 1]

// fill with 6 from position 1
console.log(arrayA.fill(5, 1));
// output: [1, 6, 6, 6]

console.log(arrayA.fill(8));
// output: [8, 8, 8, 8]
Enter fullscreen mode Exit fullscreen mode

13. Array.filter()

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

Example:

const words = ['hello', 'hi', 'elite', 'amazing', 'adios', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// output: Array ["amazing", "present"]
Enter fullscreen mode Exit fullscreen mode

14. Array.find()

This method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

Example:

const arrayA = [7, 12, 8, 140, 54];

const found = arrayA.find(element => element > 10);

console.log(found);
// output: 12

Enter fullscreen mode Exit fullscreen mode

15. Array.forEach()

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

Example:

const arrayA = ['c', 'd', 'e'];

arrayA.forEach(element => console.log(element));

// output: "c"
// output: "d"
// output: "e"

Enter fullscreen mode Exit fullscreen mode

16. Array.map()

This method creates a new array populated with the results of calling a provided function on every element in the calling array.

Example:

const arrayA = [3, 4, 7, 16];

// pass a function to map
const map1 = arrayA.map(x => x * 2);

console.log(map1);
// output: Array [6, 8, 14, 32]
Enter fullscreen mode Exit fullscreen mode

17. Array.flat()

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

Example:

const arrA = [0, 1, 2, [5, 7]];

console.log(arrA.flat());
// output: [0, 1, 2, 5, 7]

const arrB = [0, 1, 2, [[[5, 7]]]];

console.log(arrB.flat(2));
// output: [0, 1, 2, [5, 7]]

Enter fullscreen mode Exit fullscreen mode

18. Array.reverse()

This method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

Example:

const arrayA = ['A', 'B', 'C'];
console.log('arrayA:', arrayA);
// output: "arrayA:" Array ["A", "B", "C"]

const reversed = arrayA.reverse();
console.log('reversed:', reversed);
// output: "reversed:" Array ["C", "B", "A"]

console.log('arrayA:', arrayA);
// output: "arrayA:" Array ["C", "B", "A"]
Enter fullscreen mode Exit fullscreen mode

19. Array.every()

This method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Example:

const isBelow = (currentValue) => currentValue < 50;

const arrayA = [3, 0, 39, 19, 40,45];

console.log(arrayA.every(isBelow));
// output: true
Enter fullscreen mode Exit fullscreen mode

20. Array.copyWithin()

This method shallow copies part of an array to another location in the same array and returns it without modifying its length.

Example:

const arrayA = ['A', 'B', 'C', 'D', 'E'];

// copy to index 0 the element at index 3
console.log(arrayA.copyWithin(0, 3, 4));
// output: Array ["D", "B", "C", "D", "E"]

// copy to index 1 all elements from index 3 to the end
console.log(arrayA.copyWithin(1, 3));
// output: Array ["D", "D", "E", "D", "E"]

Enter fullscreen mode Exit fullscreen mode

21. Array.reduce()

The easiest-to-understand explanation for reduce() is that it returns the sum of all the elements in an array. It walks through the array element-by-element and at each step, it adds the current array value to the result from the previous step until there are no more elements to add.

Moreover, it can also apply any callback function such as mean, median, count, etc. The sum is the simplest and easiest to understand use case!

Example:

const arrayA = [3, 2, 8, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 3 + 2 + 8 + 4
console.log(arrayA.reduce(reducer));
// output: 17

// 5 + 3 + 2 + 8 + 4
console.log(arrayA.reduce(reducer, 5));
// output: 22
Enter fullscreen mode Exit fullscreen mode

22. Array.flatMap()

This method returns a new array that is basically formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1. But it is slightly more efficient and time-saving than calling those two methods separately.

Example:

let arrA = [3, 2, 9, 4];

arrA.flatMap(x => [x * 2]);
// [6, 4, 18, 8]

// only one level is flattened
arrA.flatMap(x => [[x * 2]]);
// [[3], [4], [9], [8]]
Enter fullscreen mode Exit fullscreen mode

23. Array.some()

This method checks to see if at least one of array’s item passed a certain pre-defined condition. If passed, it return "true" otherwise "false".

   const arrayA = [1, 2, 3, 4, 5, 6];

  // at least one element is greater than 3?
  const largeNum = arr.some(num => num > 3);
  console.log(largeNum); 
  // output: true

Enter fullscreen mode Exit fullscreen mode

24. Array.of()

This method create array from every arguments passed into it.

  const alphabets = Array.of(a, b, c, d, e, f);
  console.log(alphabets); 
  // output: [a, b, c, d, e, f]
Enter fullscreen mode Exit fullscreen mode

25. Array.sort()

This method is used to sort any array’s items either in ascending or descending order.

  const numbers = [1, 2, 3, 4, 5, 6];
  const alphabets = ['d', 'a', 'c', 't', 'z'];

  //sort in descending order
  descOrder = numbers.sort((a, b) => a > b ? -1 : 1);
  console.log(descOrder); 
  //output: [6, 5, 4, 3, 2, 1]

  //sort in ascending order
  ascOrder = alphabets.sort((a, b) => a > b ? 1 : -1);
  console.log(ascOrder); 
  //output: ['a', 'c', 'd', 't', 'z']

Enter fullscreen mode Exit fullscreen mode

26. Array.join()

It creates and returns a new string by concatenating all of the elements in an array separated by commas or a specified separator string. But if the array consists of one item, then that item will be returned without using the separator.

const elements = ['Hi', 'Hello', 'Bye'];

console.log(elements.join());
// output: "Hi,Hello,Bye"

console.log(elements.join(''));
// output: "HiHelloBye"

console.log(elements.join('-'));
// output: "Hi-Hello-Bye"
Enter fullscreen mode Exit fullscreen mode

27. Array.toLocaleString()

This method returns a string representing the elements of the array. The elements are converted to Strings using their toLocaleString methods. Then those Strings are separated by a locale-specific String (such as a comma “,”).

const array1 = [1, 'a', new Date('29 Dec 2002 16:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });

console.log(localeString);
// output: "1,a,12/29/2002, 4:12:00 PM",
Enter fullscreen mode Exit fullscreen mode

28. Array.keys()

This method returns a new Array Iterator object that contains the keys for each index in the array.

const arrayA = ['A', 'B', 'C', 'D'];
const iterator = arrayA.keys();

for (const key of iterator) {
  console.log(key);
}

// output: 0
// output: 1
// output: 2
// output: 3
Enter fullscreen mode Exit fullscreen mode

29. Array.values()

This method returns a new array iterator object that contains the values for each index in the array.

const arrayA = ['A', 'B', 'C', 'D'];
const iterator = arrayA.keys();

for (const value of iterator) {
  console.log(value);
}

// output: A
// output: B
// output: C
// output: D
Enter fullscreen mode Exit fullscreen mode

30. Array.entries()

This method returns a new Array Iterator object that contains the key/value pairs for each index in the array.

const arrayA = ['A', 'B', 'C'];

const iterator1 = arrayA.entries();

console.log(iterator1.next().value);
// output: Array [0, "A"]

console.log(iterator1.next().value);
// output: Array [1, "B"]
Enter fullscreen mode Exit fullscreen mode

Conclusion

JavaScript arrays have quite a lot of useful methods that can simplify our development efforts. Knowing these methods can save us time and can even boost the performance of our code. I truly hoped that today you all learned something today, whether it was new array methods or refreshing your old concepts which you can use for your next project ^_^

Let's connect!

Twitter

Github

Top comments (0)