DEV Community

Cover image for JavaScript Array methods explained
Marko Denic
Marko Denic

Posted on

JavaScript Array methods explained

Let's start!

1. concat()

Returns a new array that is this array joined with other array(s) and/or value(s).

const fruits = ['🍉', '🍎', '🍒', '🍌'];
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

// 1. concat()
const food = fruits.concat(vegetables); // ["🍉", "🍎", "🍒", "🍌", "🧅", "🌽", "🥕", "🥑"]
Enter fullscreen mode Exit fullscreen mode

2. copyWithin()

Copies a sequence of array elements within the array.

// 2. copyWithin()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const fruitsCopy = fruits.copyWithin(0, 2); // ["🍒", "🍌", "🍒", "🍌"]
Enter fullscreen mode Exit fullscreen mode

3. every()

Returns true if every element in this array satisfies the testing function.

// 3. every()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const allBananas = fruits.every(fruit => fruit === '🍌'); // false
Enter fullscreen mode Exit fullscreen mode

4. fill()

Fills all the elements of an array from a start index to an end index with a static value.

// 4. fill()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const lemons =  fruits.fill('🍋'); // ["🍋", "🍋", "🍋", "🍋"]
Enter fullscreen mode Exit fullscreen mode

5. filter()

Returns a new array containing all elements of the calling array for which the provided filtering function returns true.

// 5. filter()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const onlyBananas = ['🍉', '🍎', '🍌', '🍌'].filter(fruit => fruit === '🍌'); // ["🍌", "🍌"]
Enter fullscreen mode Exit fullscreen mode

6. find()

Returns the found element in the array, if some element in the array satisfies the testing function, or undefined if not found.

// 6. find()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const cherry = fruits.find(fruit => fruit === '🍒'); // "🍒"
Enter fullscreen mode Exit fullscreen mode

7. findIndex()

Returns the found index in the array, if an element in the array satisfies the testing function, or -1 if not found.

// 7. findIndex()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const cherryIndex = fruits.findIndex(fruit => fruit === '🍒'); // 2
Enter fullscreen mode Exit fullscreen mode

8. forEach()

Calls a function for each element in the array.

// 8. forEach()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

vegetables.forEach(vegetable => console.log(vegetable));
// "🥦"
// "🌽"
//  "🥕"
//  "🥑"
Enter fullscreen mode Exit fullscreen mode

9. includes()

Determines whether the array contains a value, returning true or false as appropriate.

// 9. includes()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const includesCorn = vegetables.includes('🌽'); // true
const includesTomato = vegetables.includes('🍅'); // false
Enter fullscreen mode Exit fullscreen mode

10. join()

Joins all elements of an array into a string.

// 10. join()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const vegetablesGroup = vegetables.join(''); // "🥦🌽🥕🥑"
Enter fullscreen mode Exit fullscreen mode

11. map()

Returns a new array containing the results of calling a function on every element in this array.

// 11. map()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const doubledVegetables = vegetables.map(vegetable => vegetable + vegetable); 
// ["🥦🥦", "🌽🌽", "🥕🥕", "🥑🥑"]
Enter fullscreen mode Exit fullscreen mode

12. push()

Adds one or more elements to the end of an array, and returns the new length of the array.

// 12. push()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.push('🥝'); // ["🍉", "🍎", "🍒", "🍌", "🥝"]
Enter fullscreen mode Exit fullscreen mode

13. reverse()

Reverses the order of the elements of an array in place.

// 13. reverse()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const fruits = ['🍉', '🍎', '🍒', '🍌'];

const reversedFruits = fruits.reverse(); // ["🍌", "🍒", "🍎", "🍉"]
Enter fullscreen mode Exit fullscreen mode

14. slice()

Extracts a section of the calling array and returns a new array.

// 14. slice()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.slice(2); // ["🍒", "🍌"]
Enter fullscreen mode Exit fullscreen mode

15. some()

Returns true if at least one element in this array satisfies the provided testing function.

// 15. some()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const bananaExists = fruits.some(fruit => fruit === '🍌')); // true
Enter fullscreen mode Exit fullscreen mode

16. sort()

Sorts the elements of an array in place and returns the array.

// 16. sort()
const fruits = ['🍉', '🍎', '🍒', '🍌', '🍉', '🍉', '🍒', '🍎', '🍌'];
fruits.sort(); // ["🍉", "🍉", "🍉", "🍌", "🍌", "🍎", "🍎", "🍒", "🍒"]
Enter fullscreen mode Exit fullscreen mode

17. splice()

Adds and/or removes elements from an array.

// 17. splice()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.splice(2, 1, '🥝'); // ["🍉", "🍎", "🥝", "🍌"]
Enter fullscreen mode Exit fullscreen mode

If you liked this article, be sure to ❤️ it.

Happy coding! ❤️

If you have any questions, you can contact me on Twitter.

You can find a ton of real-life tips and resources on my blog.

Discussion (7)

Collapse
adrianschmidt91 profile image
Adrian Schmidt

Great article!

What about Array.reduce()?

Collapse
denicmarko profile image
Marko Denic Author

A good point. I'll add one example for it.

In the meantime, check this article:

markodenic.com/10-javascript-array...

Collapse
zaff profile image
Zaff G.

const fruits = ['🍉', '🍎', '🍒', '🍌'];
const initialValue = 'Fruits I Love: ';
fruits.reduce((previous, current) => previous + ' ' + current, initialValue);

Enter fullscreen mode Exit fullscreen mode
Collapse
andrewbaisden profile image
Andrew Baisden

Great examples!

Collapse
denicmarko profile image
Marko Denic Author

Thanks, Andrew.

Collapse
stormytalent profile image
StormyTalent

Perfect!

Collapse
denicmarko profile image
Marko Denic Author

Thanks!