Hi learners, welcome to DesignWithRehana. In this article I am going to share Top 6 JavaScript Array Methods with examples and PDF. I hope these JavaScript array methods cheat-sheet will be helpful for you.
1. forEach()
This method allows a function to run for each array element. However, it does not execute on empty elements. Instead, it loops through the array items, applying the given function to each one.
Code Example
const givenArray = [1, 2, 3, 4, 5, 6];
givenArray.forEach(function (currentValue) {
console.log(currentValue);
});
// Expected Output: 1 2 3 4 5 62. sort()
sort() JavaScript array method is used to sort the given array. It compares two values and returns the same array as the reference which is now a sorted array.
Code Example
const givenArray = [40, 20, 50, 23, 3, 12];
givenArray .sort()
console.log(givenArray );
// Expected Output: [12, 20, 23, 3, 40, 50]3. join()
This javascript array method is used to merge all of the array’s items into a string. It also uses a comma (,) to divide the array elements. It won’t change the original array and will not generate a new array. It returns the specified array as a string, that is split by a comma (,) by default.
Code Example
const myEbooks = ['HTML', 'CSS', 'JavaScript', 'Bootstrap', 'ReactJS'];
const myEbooksString = myEbooks.join()
console.log(myEbooksString);
//Expected Output: true: HTML,CSS,JavaScript,Bootstrap,ReactJS4. reverse()
It returns the same array, but the first element moves to the last position, and vice versa. The remaining elements follow the same reversed order.
Code Example
const myEbooks = ['HTML', 'CSS', 'JavaScript', 'Bootstrap', 'ReactJS'];
const myEbooksString = myEbooks.reverse()
console.log(myEbooksString);
//Expected Output: true: ReactJS, Bootstrap, JavaScript, CSS, HTML5. reduce()
This array method is used to perform operations on an array in order to get a single value. It is an iterative process.
Code Example
const myValues= [2, 3, 4, 3, 2, 6, 9, 4, 5]
let sumOfValues = myValues.reduce(function (previousValue, currentValue) {
return previousValue + currentValue;
}, 0)
console.log(sumOfValues);
// Expected Output: 386. map()
This JavaScript array method iterates over an array and calls a function on each element. The function then returns a new array with modified values.
Code Example
const myEbooks= ['HTML', 'CSS', 'JavaScript', 'Bootstrap'];
myEbooks.forEach(function (currentValue) {
console.log(currentValue);
});
// Expected Output:
/*
0 HTML
1 CSS
2 JavaScript
3 Bootstrap
*/Here, we used sort(), map(), and filter() together to sort, modify, and filter an array in just a few lines of code.
### Bonus Tip: Combining Methods
One of the best parts about JavaScript arrays is that these methods can be **chained together** to perform multiple operations at once. For example:
```javascript
const numbers = [5, 2, 8, 1, 4];
const processed = numbers
.sort((a, b) => a - b)
.map(num => num * 2)
.filter(num => num > 5);
console.log(processed);
// Expected Output: [8, 10, 16]
Why Learn These Array Methods?
Core JavaScript Skill: Mastering these methods helps you write cleaner, shorter, and more efficient code.
Performance: These built-in methods are optimized for performance compared to manual loops.
Functional Programming: Understanding them introduces you to JavaScript’s functional style—using functions like map, reduce, and filter for data transformation.
Real-World Use: You’ll use these methods daily in frontend frameworks like React, Vue, and Angular when handling arrays of data or rendering lists.
Real-Life Example of Using Array Methods
To understand the practical use of array methods, let’s take a real-world scenario. Imagine you’re building a movie listing website where users can search, filter, and sort their favorite films. You can easily use JavaScript array methods to manage and transform your data.
For instance:
const movies = [
{ title: "Inception", rating: 8.8, genre: "Sci-Fi" },
{ title: "Interstellar", rating: 8.6, genre: "Adventure" },
{ title: "The Dark Knight", rating: 9.0, genre: "Action" },
{ title: "Tenet", rating: 7.5, genre: "Sci-Fi" }
];
const sciFiMovies = movies
.filter(movie => movie.genre === "Sci-Fi")
.sort((a, b) => b.rating - a.rating)
.map(movie => `${movie.title} - Rating: ${movie.rating}`);
console.log(sciFiMovies);
//Expected Output:
//["Inception - Rating: 8.8", "Tenet - Rating: 7.5"]Here, we used filter(), sort(), and map() together to create a refined, readable list of Sci-Fi movies sorted by rating. This is a common use case in modern web development.
Common Mistakes When Using Array Methods
While array methods are powerful, beginners often make some common mistakes:
Confusing map() with forEach():
map()returns a new array, whileforEach()simply executes a function without returning anything. Always choose based on your goal.Forgetting the return statement in reduce():
When usingreduce(), you must return a value inside the callback; otherwise, you’ll end up with unexpected results orundefined.Not copying arrays before sorting or reversing:
Methods likesort()andreverse()modify the original array. If you want to keep the original data intact, use the spread operator:
const sortedArray = [...myArray].sort();
- Ignoring empty slots:
Some methods likeforEach()skip empty array elements, which can cause missing data issues if your array isn’t clean.
Why Mastering These Methods Matters
In today’s JavaScript ecosystem, knowing array methods isn’t just optional — it’s essential. Whether you’re building a React app, handling API data, or managing state updates, arrays are everywhere. By using these methods correctly, you can drastically reduce code length and improve readability.
Example:
A simple task like doubling all numbers greater than 5 can be done in one elegant line:
const result = [2, 5, 7, 10, 3].filter(n => n > 5).map(n => n * 2);
console.log(result); // Output: [14, 20]
Without array methods, the same task would take multiple lines using loops.
Pro Tips for Developers
Chain Smartly: Combine
map(),filter(), andreduce()for complex operations, but avoid over-chaining for readability.Use Arrow Functions: Shorten your code and make it more modern by using ES6 syntax.
Immutable Coding: Prefer methods that return new arrays rather than mutating existing ones.
Debug Wisely: Use
console.table()to visualize array transformations during debugging.
Real-Life Applications
Array methods are everywhere in web projects:
In E-commerce: Filtering products, sorting prices, calculating totals.
In Social Media Apps: Mapping posts, counting likes, or filtering comments.
In Dashboards: Summarizing data using
reduce()for analytics.In APIs: Transforming response data into readable formats.
By understanding and combining these methods, developers can easily handle complex data tasks without relying heavily on external libraries or verbose loops.
Pro Developer Insight:
Most interviewers for JavaScript roles test your understanding of these array methods through coding challenges. Being comfortable with them can make you stand out as someone who writes modern, efficient, and production-ready JavaScript code.
Final Thoughts
Learning array methods is a must for anyone serious about JavaScript. These six methods — forEach(), sort(), join(), reverse(), reduce(), and map() — form the backbone of modern JavaScript programming. They not only make your code cleaner but also help you think like a developer who writes efficient and maintainable code.
Once you become comfortable with them, try exploring others like filter(), find(), some(), and every() — they’re just as powerful!