JavaScript Array methods explained

JavaScript Array methods explained

ยท

6 min read

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! โค๏ธ