Arrays are fundamental data structures in JavaScript, and having a solid understanding of array methods is essential for efficient manipulation and transformation of data.
In this blog post, we’ll present a comprehensive cheat sheet that covers all the major methods available for arrays in JavaScript.
Let’s dive into the Array Methods Cheatsheet in JavaScript.
No. | Method | Description | Example |
---|---|---|---|
1. | push() | Adds elements to the end of an array. Syntax: array.push(element1, element2, …); Returns: Length of the updated array. – Overwrites the original array. | var array = [ 1, 2, 3 ]; var returnValue = array.push( 4, 5 ); Output: array = [ 1, 2, 3, 4, 5 ]; // Updated array. returnValue = 5 // Length of the array. |
2. | pop() | Removes the last element from an array. Syntax: array.pop(); Returns: The removed element. – Overwrites the original array. | var array = [ 1, 2, 3 ]; var returnValue = array.pop(); Output: array = [ 1, 2 ]; // Updated array. returnValue = 3 // Removed element. |
3. | unshift() | Adds elements to the beginning of an array. Syntax: array.unshift(element1, element2, …); Returns: Length of the updated array. – Overwrites the original array. | var array = [ 1, 2, 3 ]; var returnValue = array.unshift( 4, 5 ); Output: array = [ 4, 5, 1, 2, 3 ]; // Updated array. returnValue = 5 // Length of the array. |
4. | shift() | Removes the first element from an array. Syntax: array.shift(); Returns: The removed element. – Overwrites the original array. | var array = [ 1, 2, 3 ]; var returnValue = array.shift(); Output: array = [ 2, 3 ]; // Updated array. returnValue = 1 // Removed element. |
5. | concat() | Returns the first element in the array that satisfies a provided testing function. Syntax: array.find(function(currentValue, index, arr),thisValue); Returns: The value of the first element that passes the test. Otherwise, it returns undefined. | var array1 = [ 1, 2 ]; var array2 = [ 3, 4 ]; var newArray = array1.concat(array2); Output: newArray = [ 1, 2, 3, 4 ]; |
6. | slice() | Extracts a section of an array. Syntax: array.slice(start_position, end_position) – start_position = default is 0. – end_position = default is the last element. Returns: New array with extracted elements. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var newArray = array.slice( 1, 3 ); Output: newArray = [ 2, 3 ]; array = [ 1, 2, 3, 4, 5 ]; // original array. var array = [ 1, 2, 3, 4, 5 ]; var newArray = array.slice( 1 ); Output: newArray = [ 2, 3, 4, 5 ]; array = [ 1, 2, 3, 4, 5 ];; // original array. |
7. | splice() | Joins all elements of an array into a string with provided separator. Syntax: array.join(separator); Returns: Joined elements as a string. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var newArray = array.splice( 2, 1, ‘a’, ‘b’ ); Output: newArray = [ 3 ]; array = [ 1, 2, ‘a’, ‘b’, 4, 5 ]; |
8. | join() | Returns the first element in the array that satisfies a provided testing function. Syntax: array.find(function(currentValue, index, arr),thisValue); Returns: The value of the first element that passes the test. Otherwise it returns undefined. | var array = [ 1, 2, 3 ]; var joinedString = array.join( ‘-‘ ); Output: joinedString = “1-2-3” |
9. | indexOf() | Returns the first index at which a given element is found in the array. Syntax: array.indexOf(item, start_position_for_search) start_position_for_search = default 0; Returns: index of search element. Returns -1 if the value is not found. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var index = array.indexOf( 3 ); Output: index = 2 // Index of 3 var index = array.indexOf( 3, 3 ); Output: index = -1 // Index of 3 searched from index 3 hence not found. |
10. | lastIndexOf() | Returns the last index at which a given element is found in the array. Syntax: array.lastIndexOf(item, start_position_for_search) – start_position_for_search = Default is the last element. Returns: Last index of search element. Returns -1 if the index is not found. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5, 3 ]; (indexes –> 0, 1, 2, 3, 4, 5) var lastIndex = array.lastIndexOf( 3 ); Output: lastIndex = 5 // Last index of 3 |
11. | includes() | Checks if an array includes a certain element. Syntax: array.includes(element, start_position_for_search); – start_position_for_search = default as 0. Returns: True if the value is found, otherwise false. – Does not change the original array. | var array = [ 1, 2, 3 ]; var includesThree = array.includes( 3 ); Output: includesThree = true; |
12. | forEach() | Executes a provided function once for each array element. Syntax: array.forEach(function(currentValue, index, arr), thisValue); Returns: undefined. – Does not change the original array. | var array = [ 1, 2, 3 ]; array.forEach(element => console.log(element)); Output: 1, 2, 3 |
13. | map() | Creates a new array with the results of calling a provided function on every element in the array. Syntax: array.map(function(currentValue, index, arr), thisValue); Returns: new array with updated results. – Does not change the original array. | var array = [ 1, 2, 3 ]; var newArray = array.map(element => element * 2); Output: newArray = [ 2, 4, 6 ]; |
14. | filter() | Creates a new array with all elements that pass a test implemented by the provided function. Syntax: array.filter(function(currentValue, index, arr), thisValue); Returns: Array of elements that pass the test. Empty array if no elements pass the test. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var filteredArray = array.filter(element => element % 2 === 0); Output: filteredArray = [ 2, 4 ]; var filteredArray = array.filter(element => element % 6 === 0); Output: filteredArray = [ ]; |
15. | reduce() | Applies a function to reduce the array to a single value. Syntax: array.reduce(function(total, currentValue, currentIndex, arr), initialValue) – total = initialValue, or the previously returned value of the function. – currentValue = optional. – currentIndex = optional. – arr = optional. Returns: The accumulated result. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var sum = array.reduce((acc, curr) => acc + curr, 0); Output: sum = 15 |
16. | reduceRight() | Similar to reduce(), but processes the array from right to left. Returns: The accumulated result. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var result = array.reduceRight((acc, curr) => acc – curr); Output: result = -13 |
17. | find() | Returns the index of the first element in the array that satisfies a provided testing function. Syntax: array.findIndex(function(currentValue, index, arr), thisValue) Returns: The value of the first element that passes the test. Otherwise it returns undefined. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var foundElement = array.find(element => element > 3); Output: foundElement = 4 |
18. | findIndex() | Checks if at least one element in the array satisfies a provided testing function. Syntax: array.some(function(value, index, arr), this); Returns: true if any of the array elements pass the test, otherwise false. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var foundIndex = array.findIndex(element => element > 3); Output: foundIndex = 3 // Index of 4 |
19. | some() | Checks if at least one element in the array satisfies a provided testing function. Syntax: array.some(function(value, index, arr), this); Returns: true if any of the array elements pass the test, otherwise false. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var hasEvenNumber = array.some(element => element % 2 === 0); Output: hasEvenNumber = true |
20. | every() | Checks if all elements in the array satisfy a provided testing function. Syntax: array.every(function(currentValue, index, arr), thisValue); Returns: true if all elements pass the test, otherwise false. – Does not change the original array. | var array = [ 1, 2, 3, 4, 5 ]; var allPositive = array.every(element => element > 0); Output: allPositive = true |
21. | sort() | Sorts the elements of an array in place. Syntax: array.sort(compareFunction); Returns: The array with the items sorted. – Overwrites the original array. – Does not change the original array. | var array = [ 3, 1, 4, 2, 5 ]; var sortedArray = array.sort(); Output: sortedArray = [1, 2, 3, 4, 5] // returned array. array = [1, 2, 3, 4, 5] // Original array. |
22. | reverse() | Reverses the order of the elements in an array. Syntax: array.reverse(); Returns: The reversed array. – Overwrites the original array. | var array = [ 1, 2, 3, 4, 5 ]; var reversedArray = array.reverse(); Output: reversedArray = [ 5, 4, 3, 2, 1 ] // returned array. array = [ 5, 4, 3, 2, 1 ] // original array. |
23. | isArray() | Checks if a value is an array. Syntax: Array.isArray(obj); Returns: true if the object is an array, otherwise false. – Does not change the original array. | var array = [ 1, 2, 3 ]; var isArrayTrue = Array.isArray(array); Output: isArrayTrue = true |
24. | length | Property that represents the number of elements in an array. Syntax: array.length; Returns: The number of elements in the array. – Does not change the original array. | var array = [ 1, 2, 3 ]; var length = array.length; Output: length = 3 // length of the array. |
Visit Techtalkbook to find more related topics.