DEV Community

Cover image for JavaScript Array methods explained
Marko Denic
Marko Denic

Posted on

JavaScript Array methods explained

#webdev #javascript #programming #tutorial

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.

Top comments (7)

Collapse
 
adrianschmidt91 profile image
Adrian Schmidt •

Great article!

What about Array.reduce()?

Collapse
 
denicmarko profile image
Marko Denic •

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

In the meantime, check this article:

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

Collapse
 
stormytalent profile image
StormyTalent •

Perfect!

Collapse
 
denicmarko profile image
Marko Denic •

Thanks!

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Great examples!

Collapse
 
denicmarko profile image
Marko Denic •

Thanks, Andrew.