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
Top comments (0)