As a Software Engineering student, I’ve found myself responsible for all sorts of common, but tedious, tasks, such as iterating over arrays. In JavaScript, we often work with arrays to collect or filter through values that are important for our problem at hand. A methodical path that developers take in solving this problem would be to use aWhile orFor loop. Loops are helpful in allowing us to filter, find or do something to each value inside of an array.
But let’s say that something goes wrong with our code, thus hindering our loops from completing their flow. We would end up with a broken application that can take some time to debug and will leave our functions that are dependent on the correct values to be nonoperational, as a result of this issue. And all of us who have coded a fair amount can say that it feels very unDRY (Don’t Repeat Yourself) of us to have such repetitive code to have to type out.
Today I’ll be talking about a couple of methods that can make our code more readable and understandable and help prevent annoying bugs from halting our progress. These methods include: filter(), find(), map(), reduce(), every() and some().
Javascript array methods:
How To Use filter()
filter() is a method that creates a new array with all elements that pass the test implemented by the provided function.
When using the filter() method, you need to set the conditional. Example:
In the example above, the filter function lets friend represent a single item in the array, which in this case is an object. Whats returned within the filter() is then put into a new array.
Return Value => Friends: [Sam, Dillon, Donald]
How to use find()
The find() method returns the value of the first element in the provided array that satisfies the provided testing function.
When you first look at find()it looks very similar to filter() , but they unique! The filter() returns an array of matched objects whereas find() returns the first matched object.
Return Value => Friend: “Sam”
Example:
How to use map()
Mapping lets you move the values around, reassign them to different selectors and whatever else you want to do to them. In my case, the result of map() is an array of objects that lets you store key-pair values, but in a simplified setting just an array of simple values.
Example:
In my above example, I am mapping over the friends array, using an arrow function with a parameter of friend, and returning a new array of objects with a key/value pair.
How to use reduce()
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
You can use the reduce() method that takes two arguments. The first is the function that determines what happens to the two values and the second sets the starting value.
For Example:
How to use every()
every() method tests whether all the elements in the array pass the test implemented by the provided function. This method will return a Boolean value. This method returns true for any condition put on an empty array.
This method is great for quickly checking whether everything inside an array meets the criteria.
For Example:
How to use some()
The some() method tests whether at least one element in the array passes the test implemented by the provided function. This method returns a Boolean value. This method returns false for any condition put on an empty array.
For Example:
In the real-world, you can use some() and every() methods to check values in an array before sending the results to the database.
Or maybe you want to make sure that there is a certain category of an item in a cart before applying a special discount. Or you’re coding a booking system and you wanted to make sure that every customer who can book satisfies the minimum age requirements. There are many ways that someone can use these two functions, and it also helps to cutdown on the repetitious loops in your code.
These are just some of the many wonderful methods available to us in JavaScript. Instead of having to loop through our arrays to check for specific conditions, these functions provide a clean way for us to manage our code and prevent bugs from occurring. The W3School JavaScript Docs provide many more great methods that can be used to help you iterate over complicated arrays. Use them to your advantage to continuously make your life easier day by day!
