Top 10 Must-Know JavaScript Array Methods

JavaScript arrays are one of the most powerful and commonly used data structures. They come with built-in methods that make handling data much easier. If you’re a web developer, mastering these array methods will help you write cleaner, more efficient code.

Photo by Aslı Yaren Peker on Unsplash

Here are the top 10 JavaScript array methods you must know:

1. push() — Add Items to the End of an Array

The push() method adds one or more elements to the end of an array and returns the new length.

let fruits = ['Apple', 'Banana'];
fruits.push('Orange');
console.log(fruits); // ['Apple', 'Banana', 'Orange']

2. pop() — Remove the Last Item from an Array

The pop() method removes the last element from an array and returns it.

let fruits = ['Apple', 'Banana', 'Orange'];
fruits.pop();
console.log(fruits); // ['Apple', 'Banana']

3. shift() — Remove the First Item from an Array

The shift() method removes the first element of an array and returns it.

let fruits = ['Apple', 'Banana', 'Orange'];
fruits.shift();
console.log(fruits); // ['Banana', 'Orange']

4. unshift() — Add Items to the Beginning of an Array

The unshift() method adds one or more elements to the beginning of an array and returns the new length.

let fruits = ['Banana', 'Orange'];
fruits.unshift('Apple');
console.log(fruits); // ['Apple', 'Banana', 'Orange']

5. map() — Transform Each Item in an Array

The map() method creates a new array by applying a function to each element of the original array.

let numbers = [1, 2, 3];
let squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9]

6. filter() — Get Elements That Meet a Condition

The filter() method returns a new array containing elements that satisfy a condition.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

7. reduce() — Reduce an Array to a Single Value

The reduce() method executes a reducer function and returns a single value.

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

8. forEach() — Loop Through an Array

The forEach() method executes a function for each element in the array.

let fruits = ['Apple', 'Banana', 'Orange'];
fruits.forEach(fruit => console.log(fruit));
// Output:
// Apple
// Banana
// Orange

9. find() — Get the First Matching Element

The find() method returns the first element that satisfies a condition.

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(num => num > 10);
console.log(found); // 12

10. includes() — Check if an Array Contains a Value

The includes() method checks if an array contains a specific value.

let fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.includes('Banana')); // true
console.log(fruits.includes('Grapes')); // false

Conclusion

Mastering these JavaScript array methods will help you write better, more efficient code. These methods simplify tasks like modifying, searching, filtering, and transforming data. Whether you are a beginner or an experienced developer, knowing these methods will improve your JavaScript skills and make coding more fun!

Get Dinushan Sriskandaraja’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Which array method do you use the most? Let us know in the comments! 🚀