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); // ["🍉", "🍎", "🍒", "🍌", "🧅", "🌽", "🥕", "🥑"]

2. copyWithin()

Copies a sequence of array elements within the array.

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

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

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

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('🍋'); // ["🍋", "🍋", "🍋", "🍋"]

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 === '🍌'); // ["🍌", "🍌"]

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 === '🍒'); // "🍒"

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

8. forEach()

Calls a function for each element in the array.

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

vegetables.forEach(vegetable => console.log(vegetable));
// "🧅"
// "🌽"
//  "🥕"
//  "🥑"

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

10. join()

Joins all elements of an array into a string.

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

const vegetablesGroup = vegetables.join(''); // "🧅🌽🥕🥑"

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); 
// ["🧅🧅", "🌽🌽", "🥕🥕", "🥑🥑"]

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('🥝'); // ["🍉", "🍎", "🍒", "🍌", "🥝"]

13. reverse()

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

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

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

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

14. slice()

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

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

fruits.slice(2); // ["🍒", "🍌"]

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

16. sort()

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

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

17. splice()

Adds and/or removes elements from an array.

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

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

Initially created on Twitter:

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

Happy coding! ❤️

Savio Martin's photo

Thank you! I have bookmarked this one! 💯 Keep up your great works! 🙌

Marko Denic's photo

Thank you, Savio. I will definitely try my best.

Shamel Lakin's photo

Great content as always, keep it up. I enjoy the way you simplify the code into easily digestible pieces.

Good Job!

Kieran Roberts's photo

Definitely the kind of article you bookmark and end up keep coming back to. Thanks Marko!

Marko Denic's photo

Glad you like it, Kieran. Enjoy!

Tan Ahmed's photo

brilliant article