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.
