As developers, dealing with arrays is a thing we just cannot do without. Whether it's a list of items in a shopping cart, or a list of users, or even a list of todo items, we regularly manipulate these to get various results.
My favorite javascript array methods are forEach, map, filter, and find. Before now, the good old for-loop, was used to loop through arrays and perform manipulations using the common variable i. And while we can still do everything with a for-loop, the newer array methods make things a lot simpler. Let's go over them briefly and see how to use each of them.
forEach
The forEach method is normally used to loop through an array and perform a callback on each item. For example:
const students = ["James","Rita","Jean","Francis"]
students.forEach(student => console.log(student))
// expected output: "James"
// expected output: "Rita"
// expected output: "Jean"
// expected output: "Francis"
map
The map method works just like the forEach method with a little modification. While the forEach method simply runs the callback method, the map method returns a new array. For example:
const positiveIntegers = [1,3,4,5]
const modified = positiveIntegers.map(i => i+2)
console.log(positiveIntegers)
console.log(modified)
// expected output: [1,3,4,5]
// expected output: [3,5,6,7]
filter
The filter method works just like the name implies, it filters through a list and returns a new list based on the conditions supplied in the callback function. For example, lets get the students whose names do not begin with the letter a
const students = ["angel","angela","becky","james"]
const filtered = students.filter(name => name[0] !== "a")
console.log(filtered)
//expected output: ["james"]
find
The find method loops through an array and returns the first element that matches the condition provided in the callback. For example, let's get the first number that is greater than 5 in a list of numbers.
const numbers = [3,2,4,7,9,12,3]
const matched = numbers.find(item => item > 5)
console.log(matched) // returns 7
Indeed these methods are invaluable in the day to day workflow of a javascript developer. Theres are other interesting javascript array methods. Which is your favorite?
Top comments (2)
My favorite has become
Array.prototype.reduce. I haven't written JS seriously in over two years, though. Reduce is so general purpose that it can be used to mimic all of the above. I resort to this often if I need a new data type, like performing some operation on the elements in the array and dumping them into a map or object or simply to avoid mutating the original input arrayOne thing that may also be worth noting is that all of the above should only be used if the intention is to enumerate the entire array with no early termination conditions. In those scenarios, one must use the standard for-loop, while loop, or reduce (skipping past values on conditions).
Nice write-up, though!
You're absolutely right. Array.prototype.reduce has been a major helper in dire situations.