DEV Community

Nozibul Islam
Nozibul Islam

Posted on

11 6 6 6 6

JavaScript Array Methods Examples: A Comprehensive Guide (31 Methods)

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]
Enter fullscreen mode Exit fullscreen mode

2. join() - Creates a string from array elements

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.join(', ')); // Output: "Apple, Banana, Orange"
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

4. includes() - Checks if an array contains a specific element

const colors = ['red', 'blue', 'green'];
console.log(colors.includes('blue')); // Output: true
Enter fullscreen mode Exit fullscreen mode

5. indexOf() - Finds the first index of an element

const numbers2 = [1, 2, 3, 2];
console.log(numbers2.indexOf(2)); // Output: 1
Enter fullscreen mode Exit fullscreen mode

6. reverse() - Reverses array elements

const letters = ['a', 'b', 'c'];
console.log(letters.reverse()); // Output: ['c', 'b', 'a']
Enter fullscreen mode Exit fullscreen mode

7. sort() - Sorts array elements

const unsorted = [3, 1, 4, 1, 5];
console.log(unsorted.sort()); // Output: [1, 1, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

9. at() - Returns element at specified index

const array1 = [5, 12, 8, 130, 44];
console.log(array1.at(2)); // Output: 8
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

12. Array.from() - Creates array from array-like object

console.log(Array.from('hello')); // Output: ['h', 'e', 'l', 'l', 'o']
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

14. forEach() - Executes function for each array element

const numbers4 = [1, 2, 3];
numbers4.forEach(num => console.log(num * 2)); // Output: 2, 4, 6
Enter fullscreen mode Exit fullscreen mode

15. every() - Tests if all elements pass condition

const numbers5 = [1, 2, 3, 4, 5];
console.log(numbers5.every(num => num > 0)); // Output: true
Enter fullscreen mode Exit fullscreen mode

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']]
Enter fullscreen mode Exit fullscreen mode

17. values() - Returns array iterator with values

const fruits3 = ['Apple', 'Banana'];
const values = [...fruits3.values()];
console.log(values); // Output: ['Apple', 'Banana']
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

23. Array.of() - Creates array from arguments

console.log(Array.of(1, 2, 3)); // Output: [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

29. find() - Returns first element that passes condition

const numbers10 = [5, 12, 8, 130, 44];
console.log(numbers10.find(num => num > 10)); // Output: 12
Enter fullscreen mode Exit fullscreen mode

30. findIndex() - Returns first index that passes condition

const numbers11 = [5, 12, 8, 130, 44];
console.log(numbers11.findIndex(num => num > 10)); // Output: 1
Enter fullscreen mode Exit fullscreen mode

31. findLast() - Returns last element that passes condition

const numbers12 = [5, 12, 8, 130, 44];
console.log(numbers12.findLast(num => num > 10)); // Output: 44
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay