JavaScript arrays are a fundamental part of the language, and mastering the array functions it offers is essential for any senior developer. These functions allow you to handle data efficiently, write cleaner code, and implement advanced functionality with ease. In this post, we'll dive into 15 array functions that every senior developer should be well-versed in.
please subscribe to my YouTube channel to support my channel and get more web development tutorials.
1. map()
Description:
The map() function creates a new array populated with the results of calling a provided function on every element in the original array.
Why It’s Important:
map() is vital for transforming data in a functional programming style, allowing you to apply operations to each element in an array without mutating the original array.
Example:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
Explanation:
In this example, map() takes each element in the numbers array, doubles it, and returns a new array with the doubled values.
2. filter()
Description:
filter() creates a new array with all elements that pass the test implemented by the provided function.
Why It’s Important:
Use filter() to extract necessary data from an array without altering the original array, which is crucial for maintaining immutability in your code.
Example:
const words = ['spray', 'limit', 'elite', 'exuberant'];
const longWords = words.filter(word => word.length > 6);
console.log(longWords); // ['exuberant']
Explanation:
Here, filter() checks each word in the words array and returns a new array with only those words that have more than six letters.
3. reduce()
Description:
reduce() reduces an array to a single value by applying a function to each element, accumulating the result.
Why It’s Important:
reduce() is a powerful tool for performing operations that combine all elements in an array into a single output, such as summing values or constructing a new object.
Example:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10
Explanation:
In this example, reduce() sums all the numbers in the numbers array, starting from an initial value of 0.
4. find()
Description:
find() returns the first element in an array that satisfies the provided testing function.
Why It’s Important:
find() is useful for quickly locating a specific item in an array, especially when working with objects where you need to find a particular property value.
Example:
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Doe' }
];
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jane' }
Explanation:
Here, find() searches through the users array and returns the first user object with an id of 2.
5. some()
Description:
some() tests whether at least one element in the array passes the provided function’s test.
Why It’s Important:
some() is useful for scenarios where you need to check if any element in an array meets a certain condition, allowing you to validate inputs or check for specific values.
Example:
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
Explanation:
In this example, some() checks if there is at least one even number in the numbers array.
6. every()
Description:
every() tests whether all elements in the array pass the provided function’s test.
Why It’s Important:
every() is crucial when you need to ensure that all elements in an array meet a specific criterion, which is particularly useful for validation checks.
Example:
const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true
Explanation:
Here, every() checks if all the numbers in the numbers array are even.
7. forEach()
Description:
forEach() executes a provided function once for each array element.
Why It’s Important:
While forEach() is less flexible than some other methods, it’s straightforward and useful for running operations that produce side effects, such as logging or updating values.
Example:
const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8
Explanation:
In this example, forEach() doubles each number in the numbers array and logs the result to the console.
8. concat()
Description:
concat() merges two or more arrays into a new array.
Why It’s Important:
concat() is invaluable for combining datasets without altering the original arrays, preserving immutability.
Example:
const array1 = [1, 2];
const array2 = [3, 4];
const combined = array1.concat(array2);
console.log(combined); // [1, 2, 3, 4]
Explanation:
Here, concat() combines array1 and array2 into a new array without modifying the original arrays.
9. slice()
Description:
slice() returns a shallow copy of a portion of an array into a new array.
Why It’s Important:
slice() is ideal for creating subarrays without altering the original array, making it a safe method for extracting data.
Example:
const fruits = ['apple', 'banana', 'orange', 'grape'];
const citrus = fruits.slice(2, 4);
console.log(citrus); // ['orange', 'grape']
Explanation:
In this example, slice() extracts the elements from index 2 to 4 (excluding 4) from the fruits array.
10. splice()
Description:
splice() changes the contents of an array by removing or replacing existing elements and/or adding new elements.
Why It’s Important:
splice() is powerful for in-place edits of an array, but its mutative nature should be used with care to avoid unintended side effects.
Example:
const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 99);
console.log(numbers); // [1, 2, 99, 4, 5]
Explanation:
Here, splice() removes one element at index 2 and replaces it with 99.
11. includes()
Description:
includes() checks if an array includes a certain element, returning true or false.
Why It’s Important:
includes() is a simple yet powerful method for existence checks, making your code more readable compared to using indexOf.
Example:
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true
Explanation:
In this example, includes() checks if the fruits array contains the element 'banana'.
12. indexOf()
Description:
indexOf() returns the first index at which a given element can be found in the array, or -1 if it is not present.
Why It’s Important:
indexOf() is useful for finding the position of an element in an array, especially when you need the index for further operations.
Example:
const numbers = [1, 2, 3, 4];
const index = numbers.indexOf(3);
console.log(index); // 2
Explanation:
Here, indexOf() returns the index of the first occurrence of the number 3 in the numbers array.
13. lastIndexOf()
Description:
lastIndexOf() returns the last index at which a given element can be found in the array, or -1 if it is not present.
Why It’s Important:
lastIndexOf() is similar to indexOf(), but it searches the array from the end towards the beginning, making it useful when you need to find the last occurrence of an element.
Example:
const numbers = [1, 2, 3, 4, 3];
const index = numbers.lastIndexOf(3);
console.log(index); // 4
Explanation:
In this example, lastIndexOf() finds the last occurrence of the number 3 in the numbers array, returning the index 4.
14. join()
Description:
join() joins all elements of an array into a string, separated by a specified separator.
Why It’s Important:
join() is excellent for converting an array into a string, which is especially useful for displaying or formatting data.
Example:
const words = ['Hello', 'world'];
const sentence = words.join(' ');
console.log(sentence); // "Hello world"
Explanation:
Here, join() concatenates the elements of the words array into a single string, with each word separated by a space.
15. reverse()
Description:
reverse() reverses the order of the elements in an array in place.
Why It’s Important:
reverse() can be useful when you need to process or display data in the opposite order, although its mutative nature requires careful use.
Example:
const numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers); // [3, 2, 1]
Explanation:
In this example, reverse() reverses the order of elements in the numbers array, modifying the original array.
Conclusion
Mastering these 15 JavaScript array functions will greatly enhance your ability to manipulate data efficiently and write clean, maintainable code. As a senior developer, having these functions in your toolkit allows you to handle complex data operations with ease, making your code more robust and scalable.
Start Your JavaScript Journey
If you're new to JavaScript or want a refresher, visit my blog on BuyMeACoffee to get started with the basics.
👉 Introduction to JavaScript: Your First Steps in Coding
Series Index
| Part | Title | Link |
|---|---|---|
| 1 | Ditch Passwords: Add Facial Recognition to Your Website with FACEIO | Read |
| 2 | Modern API Development with Node.js, Express, and TypeScript using Clean Architecture | Read |
| 3 | The Ultimate Git Command Cheatsheet | Read |
| 4 | Top 12 JavaScript Resources for Learning and Mastery | Read |
| 5 | Angular vs. React: A Comprehensive Comparison | Read |
| 6 | Top 10 JavaScript Best Practices for Writing Clean Code | Read |
| 7 | Top 20 JavaScript Tricks and Tips for Every Developer 🚀 | Read |
| 8 | 8 Exciting New JavaScript Concepts You Need to Know | Read |
| 9 | Top 7 Tips for Managing State in JavaScript Applications | Read |
| 10 | 🔒 Essential Node.js Security Best Practices | Read |
| 11 | 10 Best Practices for Optimizing Angular Performance | Read |
| 12 | Top 10 React Performance Optimization Techniques | Read |
| 13 | Top 15 JavaScript Projects to Boost Your Portfolio | Read |
| 14 | 6 Repositories To Master Node.js | Read |
| 15 | Best 6 Repositories To Master Next.js | Read |
| 16 | Top 5 JavaScript Libraries for Building Interactive UI | Read |
| 17 | Top 3 JavaScript Concepts Every Developer Should Know | Read |
| 18 | 20 Ways to Improve Node.js Performance at Scale | Read |
| 19 | Boost Your Node.js App Performance with Compression Middleware | Read |
| 20 | Understanding Dijkstra's Algorithm: A Step-by-Step Guide | Read |
| 21 | Understanding NPM and NVM: Essential Tools for Node.js Development | Read |
Follow and Subscribe:
- YouTube: devDive with Dipak
- Website: Dipak Ahirav
- Whatsapp Channel:DevDiveWithDipak
- Email: dipaksahirav@gmail.com
- LinkedIn: Dipak Ahirav
Top comments (32)
Nice article Dipak,
For those wanting to know more on this topic, I recommend visiting the authoritative web site: MDN JavaScript Array.
I think it is also worth noting that some developers will highlight the fact that methods such as
forEachperform worse than a regularforloop. However, I would argue:I would go further to suggest that the declarative style of
forEachandmapetc. is easier to read and comprehend, but that might just be me.On the performance issue, one should ask the question "How performant does it need to be?" The usual answer for frontend is "fast enough so the user is not waiting and wondering if the browser has crashed". If the functionality really needs to be in the browser there are other options than using JS in the main thread such as Web Workers or even Web Assembly. On the backend there is no real reason (if performance really is paramount) to be using JS, there are plenty of other options.
Regards.
These should know every junior
Really, senior developers should know these? I think every developer should know some of them, others shouldn't be used since they mutate the array and we should instead use toSlice, toSort, etc which don't mutate the array.
sigh, just reiterating a well-known topic?
thanks for the explaination, but i still confuse about splice(),
const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 99);
console.log(numbers); // [1, 2, 99, 4, 5]
in splice parameter, it say '2' for index 2 which means refer to '3', and '99' parameter is refer to what number will be changed to. but '1' in parameter means to what? can someone explain me
btw, sorry for my bad english
Thank you for your question! @richantfebriel
The second parameter in
splice()specifies the number of elements to remove starting at the index given by the first parameter. For example:Here,
1means remove one element (which is3). If you change1to2:This removes two elements (
3and4), and then inserts99.I hope this clears up the confusion!
thanks for the explanation, easy to understand!
your welcome
Calling it array methods would be okay
Eh... So... In short: every developer should read the javascript documentation for Array and Hash... Surprising! What an article!
Thanks @petrfischer
Nice refresher! Sometimes I forget some of these exist. Also, for...of is useful as well.
Thanks for the list - certainly some things for me to try here!
thanks for the share. this list will help me immensely!
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more