20 JavaScript Array Methods You Need to Know

JavaScript is a powerful language, and one of the key reasons for its versatility is the Array object. With array methods, we can perform a ton of operations on arrays—like transforming data, flattening arrays, and checking conditions—all without needing loops or counters. 🙌

In this post, I'll walk you through 20 of the most commonly used array methods. Whether you're new to JavaScript or just need a refresher, these methods will help make your code cleaner and more efficient. Ready? Let's dive in! 🚀

1. concat() ➕

What it does:

concat() combines two or more arrays into a new array.

Returned Value:

A new array containing all the elements from the combined arrays.

const fruits = ['apple 🍎', 'banana 🍌'];
const moreFruits = ['mango 🥭', 'pineapple 🍍', 'kiwi 🥝'];
const combined = fruits.concat(moreFruits);
console.log(combined); // ['apple 🍎', 'banana 🍌', 'mango 🥭', 'pineapple 🍍', 'kiwi 🥝']

2. slice() 🍰

What it does:

slice() returns a shallow copy of a portion of an array, without modifying the original array.

Returned Value:

A new array with the sliced elements.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭', 'pineapple 🍍'];
const slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // ['banana 🍌', 'mango 🥭']

3. at() 🏃‍♀️

What it does:

at() returns an element at a specific index, supporting negative indices to count from the end.

Returned Value:

The element at the specified index.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭', 'kiwi 🥝'];
console.log(fruits.at(1)); // 'banana 🍌'
console.log(fruits.at(-1)); // 'kiwi 🥝'

4. join() 🍴

What it does:

join() joins all the elements of an array into a single string, separated by a specified delimiter.

Returned Value:

A string with all array elements joined.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭'];
const fruitString = fruits.join(', ');
console.log(fruitString); // 'apple 🍎, banana 🍌, mango 🥭'

5. reverse() 🔄

What it does:

reverse() reverses the order of elements in an array in place.

Returned Value:

The reversed array.

const animals = ['Lion 🦁', 'Koala 🐨', 'Kangaroo 🦘'];
const reversedAnimals = animals.reverse();
console.log(reversedAnimals); // ['Kangaroo 🦘', 'Koala 🐨', 'Lion 🦁']

6. sort() 🔢

What it does:

sort() sorts the elements of an array in place (modifies the original array).

Returned Value:

The sorted array.

const animals = ['Lion 🦁', 'Koala 🐨', 'Kangaroo 🦘', 'Giraffe 🦒'];
const sortedAnimals = animals.sort();
console.log(sortedAnimals); // ['Giraffe 🦒', 'Kangaroo 🦘', 'Koala 🐨', 'Lion 🦁']

7. fill() 🖍️

What it does:

fill() replaces all or part of an array with a specific value.

Returned Value:

The modified array.

const animals = ['Lion 🦁', 'Koala 🐨', 'Kangaroo 🦘', 'Giraffe 🦒'];
animals.fill('Elephant 🐘', 1, 3);
console.log(animals); // ['Lion 🦁', 'Elephant 🐘', 'Elephant 🐘', 'Giraffe 🦒']

8. forEach() 🔁

What it does:

forEach() executes a provided function on each element, but does not return anything.

Returned Value:

undefined.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭'];
fruits.forEach(fruit => console.log(fruit + ' is tasty'));

9. map() 🔄

What it does:

map() allows you to transform each element in an array according to a given function.

Returned Value:

A new array with the transformed elements.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭'];
const fruitLengths = fruits.map(fruit => fruit.length);
console.log(fruitLengths); // [5, 6, 5]

10. flat() 🏞️

What it does:

flat() flattens an array, meaning it removes nested arrays.

Returned Value:

A new flattened array.

const nestedArr = [1, [2, 3], 4, [5, 6]];
const flattened = nestedArr.flat();
console.log(flattened); // [1, 2, 3, 4, 5, 6]

11. flatMap() 🌍

What it does:

flatMap() maps each element to a new array and then flattens the result.

Returned Value:

A new flattened array.

const numbers = [1, [2, 3], 4, [5, 6]];
const flattenedNumbers = numbers.flatMap(num => num);
console.log(flattenedNumbers); // [1, 2, 3, 4, 5, 6]

12. reduce() ➗

What it does:

reduce() applies a function to each element in the array to reduce the array to a single value.

Returned Value:

A single value (could be a number, string, object, etc.).

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

13. filter() 🧹

What it does:

filter() checks each element and returns a new array with only those elements that pass a test.

Returned Value:

A new array with the elements that satisfy the condition.

const ages = [12, 5, 8, 21];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [21]

14. some() 🔍

What it does:

some() checks if at least one element in the array satisfies a condition.

Returned Value:

true or false.

const ages = [15, 22, 34, 11];
const hasAdult = ages.some(age => age >= 18);
console.log(hasAdult); // true

15. every() ✔️

What it does:

every() checks if all elements in the array satisfy a condition.

Returned Value:

true or false.

const ages = [15, 22, 34, 11];
const allAdults = ages.every(age => age >= 18);
console.log(allAdults); // false

16. includes() ✅

What it does:

includes() checks if an array contains a specific element.

Returned Value:

true or false.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭'];
console.log(fruits.includes('banana 🍌')); // true

17. find() 🔎

What it does:

find() searches for and returns the first element that satisfies a condition.

Returned Value:

The first element that passes the condition, or undefined if no match is found.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭'];
const foundFruit = fruits.find(fruit => fruit.startsWith('m'));
console

.log(foundFruit); // 'mango 🥭'

18. findIndex() 🔍

What it does:

findIndex() returns the index of the first element that satisfies a condition.

Returned Value:

The index of the element, or -1 if no match is found.

const fruits = ['apple 🍎', 'banana 🍌', 'mango 🥭'];
const index = fruits.findIndex(fruit => fruit.startsWith('b'));
console.log(index); // 1

19. Array.from() 🆕

What it does:

Array.from() creates a new array from an iterable (like a string or set).

Returned Value:

A new array.

const str = 'hello';
const arrayFromStr = Array.from(str);
console.log(arrayFromStr); // ['h', 'e', 'l', 'l', 'o']

20. splice() ✂️

What it does:

splice() adds/removes elements from an array at a specified index.

Returned Value:

The removed elements.

const animals = ['Lion 🦁', 'Koala 🐨', 'Kangaroo 🦘', 'Giraffe 🦒'];
const removedAnimals = animals.splice(1, 2, 'Elephant 🐘');
console.log(animals); // ['Lion 🦁', 'Elephant 🐘', 'Giraffe 🦒']
console.log(removedAnimals); // ['Koala 🐨', 'Kangaroo 🦘']

Summary of Array Methods 📝

With these 20 JavaScript array methods, you’ll be able to tackle a wide variety of array manipulation tasks. 🌟 Whether you're transforming, filtering, searching, or flattening, there's a method for nearly every operation you need. Happy coding! 🎉