loading...
Cover image for 4 Javascript Array Methods to Use Daily

4 Javascript Array Methods to Use Daily

kenovienadu profile image Ovienadu Ken ・2 min read

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?

Posted on by:

kenovienadu profile

Ovienadu Ken

@kenovienadu

Full stack javascript developer. I love Angular but I appreciate the simplicity of Vue and React.

Discussion

markdown guide
 

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 array

One 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.