This content originally appeared on DEV Community and was authored by Nozibul Islam
Complete examples of all major JavaScript array methods.
Categories of Array Methods:
1. Modification Methods (modify original array)
- push(), pop(), shift(), unshift(), reverse(), sort(), splice(), fill()
2. Non-modifying Methods (return new array/value)
- map(), filter(), concat(), slice(), toReversed(), toSorted(), toSpliced()
3. Search Methods
- indexOf(), includes(), find(), findIndex(), findLast(), findLastIndex()
4. Iteration Methods
- forEach(), map(), filter(), reduce(), every(), some()
5. Array Creation Methods
- Array.from(), Array.of(), Array.fromAsync()
6. Other Utility Methods
- join(), flat(), flatMap(), entries(), values(), with()
Examples of all 31 methods below:
1. concat() - Merges two or more arrays
const arr1 = [1, 2];
const arr2 = [3, 4];
console.log(arr1.concat(arr2)); // Output: [1, 2, 3, 4]
2. join() - Creates a string from array elements
const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.join(', ')); // Output: "Apple, Banana, Orange"
3. fill() - Fills array elements with a static value
const numbers = [1, 2, 3, 4];
console.log(numbers.fill(0)); // Output: [0, 0, 0, 0]
4. includes() - Checks if an array contains a specific element
const colors = ['red', 'blue', 'green'];
console.log(colors.includes('blue')); // Output: true
5. indexOf() - Finds the first index of an element
const numbers2 = [1, 2, 3, 2];
console.log(numbers2.indexOf(2)); // Output: 1
6. reverse() - Reverses array elements
const letters = ['a', 'b', 'c'];
console.log(letters.reverse()); // Output: ['c', 'b', 'a']
7. sort() - Sorts array elements
const unsorted = [3, 1, 4, 1, 5];
console.log(unsorted.sort()); // Output: [1, 1, 3, 4, 5]
8. splice() - Adds/removes elements from array
const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb');
console.log(months); // Output: ['Jan', 'Feb', 'March', 'April']
9. at() - Returns element at specified index
const array1 = [5, 12, 8, 130, 44];
console.log(array1.at(2)); // Output: 8
10. copyWithin() - Copies array elements to another position
const array2 = ['a', 'b', 'c', 'd', 'e'];
console.log(array2.copyWithin(0, 3, 4)); // Output: ['d', 'b', 'c', 'd', 'e']
11. flat() - Creates a new array with sub-array elements concatenated
const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // Output: [1, 2, 3, 4, 5, 6]
12. Array.from() - Creates array from array-like object
console.log(Array.from('hello')); // Output: ['h', 'e', 'l', 'l', 'o']
13. findLastIndex() - Returns last index that satisfies condition
const numbers3 = [5, 12, 8, 130, 44, 8];
console.log(numbers3.findLastIndex(num => num === 8)); // Output: 5
14. forEach() - Executes function for each array element
const numbers4 = [1, 2, 3];
numbers4.forEach(num => console.log(num * 2)); // Output: 2, 4, 6
15. every() - Tests if all elements pass condition
const numbers5 = [1, 2, 3, 4, 5];
console.log(numbers5.every(num => num > 0)); // Output: true
16. entries() - Returns array iterator with key/value pairs
const fruits2 = ['Apple', 'Banana'];
const iterator = fruits2.entries();
console.log([...iterator]); // Output: [[0, 'Apple'], [1, 'Banana']]
17. values() - Returns array iterator with values
const fruits3 = ['Apple', 'Banana'];
const values = [...fruits3.values()];
console.log(values); // Output: ['Apple', 'Banana']
18. toReversed() - Returns new reversed array
const arr4 = [1, 2, 3];
console.log(arr4.toReversed()); // Output: [3, 2, 1]
console.log(arr4); // Original array unchanged: [1, 2, 3]
19. toSorted() - Returns new sorted array
const arr5 = [3, 1, 2];
console.log(arr5.toSorted()); // Output: [1, 2, 3]
console.log(arr5); // Original array unchanged: [3, 1, 2]
20. toSpliced() - Returns new array with splice operation
const arr6 = [1, 2, 3];
console.log(arr6.toSpliced(1, 1, 'two')); // Output: [1, 'two', 3]
console.log(arr6); // Original array unchanged: [1, 2, 3]
21. with() - Returns new array with element replaced
const arr7 = [1, 2, 3];
console.log(arr7.with(1, 'two')); // Output: [1, 'two', 3]
console.log(arr7); // Original array unchanged: [1, 2, 3]
22. Array.fromAsync() - Creates array from async iterable
async function* asyncGenerator() {
yield 1;
yield 2;
}
Array.fromAsync(asyncGenerator()).then(array => console.log(array)); // Output: [1, 2]
23. Array.of() - Creates array from arguments
console.log(Array.of(1, 2, 3)); // Output: [1, 2, 3]
24. map() - Creates new array with results of callback
const numbers6 = [1, 2, 3];
console.log(numbers6.map(x => x * 2)); // Output: [2, 4, 6]
25. flatMap() - Maps and flattens result
const arr8 = [1, 2, 3];
console.log(arr8.flatMap(x => [x, x * 2])); // Output: [1, 2, 2, 4, 3, 6]
26. reduce() - Reduces array to single value (left to right)
const numbers7 = [1, 2, 3, 4];
console.log(numbers7.reduce((acc, curr) => acc + curr, 0)); // Output: 10
27. reduceRight() - Reduces array to single value (right to left)
const numbers8 = [1, 2, 3, 4];
console.log(numbers8.reduceRight((acc, curr) => acc + curr, 0)); // Output: 10
28. some() - Tests if at least one element passes condition
const numbers9 = [1, 2, 3, 4, 5];
console.log(numbers9.some(num => num > 4)); // Output: true
29. find() - Returns first element that passes condition
const numbers10 = [5, 12, 8, 130, 44];
console.log(numbers10.find(num => num > 10)); // Output: 12
30. findIndex() - Returns first index that passes condition
const numbers11 = [5, 12, 8, 130, 44];
console.log(numbers11.findIndex(num => num > 10)); // Output: 1
31. findLast() - Returns last element that passes condition
const numbers12 = [5, 12, 8, 130, 44];
console.log(numbers12.findLast(num => num > 10)); // Output: 44
Key points:
- Each method has a specific task, such as sorting, reversing, or finding an element in an array.
- Some methods modify the original array, like sort() and reverse().
- Some methods return a new array, like map() and filter().
- Some modern methods, like toSorted() and toReversed(), keep the original array unchanged and return a new array.
🔗 Connect with me on LinkedIn:
I regularly share insights on JavaScript, Node.js, React, Next.js, software engineering, data structures, algorithms, and more. Let’s connect, learn, and grow together!
Follow me: Nozibul Islam
This content originally appeared on DEV Community and was authored by Nozibul Islam
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Nozibul Islam | Sciencx (2024-11-02T16:10:58+00:00) JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods). Retrieved from https://www.scien.cx/2024/11/02/javascript-array-methods-examples-a-comprehensive-guide-31-methods/
" » JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods)." Nozibul Islam | Sciencx - Saturday November 2, 2024, https://www.scien.cx/2024/11/02/javascript-array-methods-examples-a-comprehensive-guide-31-methods/
HARVARDNozibul Islam | Sciencx Saturday November 2, 2024 » JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods)., viewed ,<https://www.scien.cx/2024/11/02/javascript-array-methods-examples-a-comprehensive-guide-31-methods/>
VANCOUVERNozibul Islam | Sciencx - » JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/11/02/javascript-array-methods-examples-a-comprehensive-guide-31-methods/
CHICAGO" » JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods)." Nozibul Islam | Sciencx - Accessed . https://www.scien.cx/2024/11/02/javascript-array-methods-examples-a-comprehensive-guide-31-methods/
IEEE" » JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods)." Nozibul Islam | Sciencx [Online]. Available: https://www.scien.cx/2024/11/02/javascript-array-methods-examples-a-comprehensive-guide-31-methods/. [Accessed: ]
rf:citation » JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods) | Nozibul Islam | Sciencx | https://www.scien.cx/2024/11/02/javascript-array-methods-examples-a-comprehensive-guide-31-methods/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.