Ishrat
ishratumar

Follow

ishratumar

Follow
JavaScript Array Methods Cheatsheet

JavaScript Array Methods Cheatsheet

Ishrat's photo
Ishrat
·Nov 13, 2022·

6 min read

What is Array in JavaScript?

Arrays are special objects that represent collections of similar-type elements in JavaScript.

When it comes to JavaScript arrays, there are some ways to construct them:

// by array literal
var arrayname = [value1,value2.....valueN];  

// by directly creating an instance of an array using the new keyword.
var arrayname = new Array();  

// by using the new keyword and an Array constructor
var emp = new Array("Red", "Green", "Blue");

Array Methods

Array methods can help make our JavaScript code cleaner and more efficient. In this article, we'll explore some of the most commonly used array methods and how they can help simplify our code.

1. concat( ) 

The concat() function joins two or more arrays and creates a new array without altering the original one.

const arr1 = [ 2, 4, 6];
const arr2 = [ 8, 10, 12];
const arr3 = [ 14, 16, 18];
console.log(arr1.concat(arr2, arr3));

// Output 
[2, 4, 6, 8, 10, 12, 14, 16, 18]

You can also pass a string as an argument.

const arr1 = ["Red", "Green", "Blue"];
console.log(arr1.concat("Yellow"));

// Output
[ "Red", "Green", "Blue", "Yellow" ]

2. forEach( ) 

The forEach( ) method helps to loop through an array with the execution of a provided callback function for every item in the array.

var colors = ["Red", "Green", "Blue"];    
colors.forEach(function(color) {  
console.log(color);  
}); 

// Output 
"Red"
"Green"
"Blue"

3. indexOf( )

The indexOf( ) method gives you the index of the first existence of the element that you are searching for or gives you -1 if the item is not there.

var numbers = [30, 40, 50, 60, 30, 40];
console.log(numbers.indexOf(40)); // 1
console.log(numbers.indexOf(60)); // 3

4. lastIndexOf( )

The lastIndexOf( ) method gives you the index of the last existence of the element you are looking for or gives you -1 if the item is not there. It uses backward search to find items.

var numbers = [30, 40, 50, 60, 30, 40, 60];
console.log(numbers.lastIndexOf(40)); // 5
console.log(numbers.lastIndexOf(60)); // 6

5. join( )

The join( ) method concatenates all of the elements, each of which is separated by the given spacer and returns a new string.

const alphabets = ["A", "B", "C", "D"];
console.log(alphabets.join('  '));

// Output 
"A  B  C  D"

7. pop()  

The pop( ) method deletes the last item of the array and returns that element.

const alphabets = ["A", "B", "C", "D"];
alphabets.pop( );
console.log(alphabets);

// Output 
[ "A", "B", "C" ]

8. push( )  

The push( ) method helps to add one or more items at the back of an array and outputs an updated length.

let colors = ["Red", "Green", "Blue"];
colors.push("Yellow");
console.log(colors);

// Output 
[ "Red", "Green", "Blue", "Yellow" ]

9. reverse( )  

The reverse( ) method flips an array in position. The element at the last index will be first, and the item at the first index will be last.

const alphabets = ["A", "B", "C", "D"];
console.log(alphabets.reverse( ));

// Output 
[ "D", "C", "B", "A" ]

10. shift( )

The shift() method deletes the first element from an array and gives back that item.

const alphabets = ["A", "B", "C", "D"];
alphabets.shift( );
console.log(alphabets);

// Output 
[ "B", "C", "D" ]

11. unshift( )

Unshift( ) adds one or more items to the start of an array and returns the new array length.

let colors = ["Red", "Green", "Blue"];
colors.unshift("Yellow");
console.log(colors);

// Output
[ "Yellow", "Red", "Green", "Blue" ]

12. slice( )

 The slice( ) method is used to duplicate a section of an array into another array.

const colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
const greenBlue = colors.slice(1, 3);
console.log(greenBlue); 

// Output 
[ "Green", "Blue" ]

where (1) is the starting parameter and (3) is the stopping parameter.

13. splice( )

The splice( ) method allows you to add elements to an array in the middle. If you want to delete or replace existing elements, you can also use this method.

let numbers = [1, 2, 3, 4];
numbers.splice(2, 0, 5, 6)
console.log(numbers);

// Output
[ 1, 2, 5, 6, 3, 4 ]

14. sort( )   

You can sort array elements in either ascending or descending order using the sort( ) method.

const alphabets = ["B", "A", "D", "C"];
console.log(alphabets.sort( ));

// Output
[ "A", "B", "C", "D" ]

15. includes( )

The includes( ) method checks for a value. If it is present in an array, it will return true; otherwise, it will return false.

const alphabets = ["A", "B", "C", "D"];
console.log(alphabets.includes("B")); // return true
console.log(alphabets.includes("G")); // return false

16. find( )

ES5 uses the indexOf() and lastIndexOf() methods for finding elements in arrays. The find( ) method was introduced in ES6. This method gives the first item as output in the array that meets the specific criteria.

The following example finds the first even number in an array.

let numbers = [1, 3, 4, 6, 7];
console.log(numbers.find(e => e % 2 == 0));

// Output 
4

17. map( )

This method calls a given function on each item of the existing array and generates a new array with the output. The following example demonstrates how to alter an array of integers using callback() and the Math built-in function.

let numbers = [36, 49, 64, 81];
console.log(numbers.map(Math.sqrt));

// Output 
[ 6, 7, 8, 9 ]

18. filter ( )

The filter() method creates a new array from only the elements that satisfy the criteria of the given mechanism.

const numbers = [55, 14, 29, 16, 75];
let over20 = numbers.filter(function (value) {
    return value > 20;
});
console.log(over20);

// Output
[ 55, 29, 75 ]

19. reduce ( )

The reduce() method allows you to reduce an array to a single value.

const numbers = [5, 4, 9, 6, 2];
let result = numbers.reduce((sum, current) => sum + current, 0);  
console.log(result);

// Output
26

20. toString( )

The toString() method returns an array of strings separated by a comma. It does not modify the original array.

const colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
console.log(colors.toString( )); 

// Output
"Red, Green, Blue, Yellow, Purple"

21. every( )

The every() method is used to check if all elements in an array pass a certain condition. If all elements pass the condition, the method returns true. Otherwise, it returns false.

let numbers = [1, 3, 5];
let result = numbers.every(function (e) {
    return e > 0;
});
console.log(result); // return true

22. some( )

The some() method determines whether at least one element of an array satisfies an established state. According to the answer to the requirement, this either returns true or false.

let marks = [ 6, 5, 7, 9, 10, 16 ];
lessThanSeven = marks.some(function(e) {
    return e < 7;
});
console.log(lessThanSeven); // return true

23. findIndex( )

The findIndex() method yields the index of the entry of the element in an array.

let numbers = [1, 15, 7, 8, 10, 15];
let index = numbers.findIndex(number => number === 15);
console.log(index); // 1

Learn more about Arrays and Array Methods:

  1. Array - JavaScript | MDN
  2. JAVASCRIPT.INFO - Array Methods
  3. JAVASCRIPT TUTORIAL - Array Methods

Wrap Up

For this article, that is all. Thank you for reading. I hope this was helpful to you. For more articles like this, you can follow me on Hashnode Ishrat as well as on Twitter Ishrat.

Happy learning!

Did you find this article valuable?

Support Ishrat by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this