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! ❤️
Focused on Frontend, love backend too
Thank you! I have bookmarked this one! 💯 Keep up your great works! 🙌
👋 Hi I'm Kieran | Front-end developer | Passionate about coding and helping aspiring developers
Definitely the kind of article you bookmark and end up keep coming back to. Thanks Marko!
Code district
Great content as always, keep it up. I enjoy the way you simplify the code into easily digestible pieces.
Good Job!
Comments (7)