JavaScript find() and filter() Array Iteration Methods Made Easy

JavaScript find() and filter() Array Iteration Methods Made Easy

JavaScript find() and filter() Array Iteration Methods Made Easy

With the ever-improving ecosystem of JavaScript, the ES6 version of JavaScript unwraps the array iteration methods that help its developers write clean and readable code. Some of these iteration methods are immutable, which means they do not change the original array.

Using these methods reduces the use of for, while, do-while loops and the likes which have more verbose syntax relative to the array iteration methods.

While this article will be more focused on making you understand these two array iteration methods, it will also create a fun, interesting and easy learning experience to its readers.

Let’s have fun as we get started.

How to Get the Most Out of This Article

  • If you are conversant with these iteration methods already, this article will serve as a great reference piece to you in the future.
  • If you are new to the iteration methods in JavaScript, I urge you to get your hands on your keyboard and type along as this will help retain the syntax associated with these methods to your memory.
  • Ensure that all doubts and misunderstandings are cleared by leaving your questions and comments for this article in the comment section.

What is an Array

According to MDN: An array is an ordered collection of data (either primitive or object depending upon the language). Arrays are used to store multiple values in a single variable. This is compared to a variable that can store only one value.

Each item in an array has a number attached to it, called a numeric index, that allows you to access it. In JavaScript, arrays start at index zero and can be manipulated with various methods.

To simplify this definition, let’s visualize an array as a container that stores Different kinds of elements in an orderly manner.

As earlier said, we will have lots of fun while learning. Since I am a football fanatic, we will analyze some top football stars in the world of football.

Common guys, let’s get to the pitch…

Brace-up, let’s go have some fun learning these iteration methods.

Array.prototype.find() iteration method

The ES6 find method looks through each element in an array in search of the first item that passes the conditions in its callback function and when found, that element is returned else a value of undefined is returned. This look-up is carried out only once for an array.

Syntax

Callback function

Syntax

This is the function that houses the conditions to be executed over each element of the array. The first item that meets the conditions is returned.

The callback function receives 3 parameters which include:

  • array: the array that is currently being processed. It is optional.
  • index: the index of the current item. It is optional.
  • element: this is the element currently being executed. It is usually required.

The array.find() method in action

Let’s implement a feature to find the hitman goal scorer in the world.

Diego Maradona happens to be the highest goalscorer of all time with carrer_goals of 730.
Our hitman goal scorer is any player who breaks Maradona’s goalscoring record by scoring more goals than him.

Results

Index

The index parameter of the callback function is applicable in getting an element in an array at a specific index.
Let’s illustrate with the code snippet below:

In this snippet, the find() method is implemented with the ES6 arrow function.

Array.prototype.filter() iteration method

The ES6 filter() method creates a new array with all elements that meet the conditions implemented by the callback function. An empty array will be returned if no elements meet the conditions

Syntax

Callback function

Syntax

This is the function that houses the conditions to be executed over each element of the array thereby returning a new array containing the items that passed the conditions.

The callback function receives 3 parameters which include:

  • array: the array that is currently being processed. It is optional.
  • index: the index of the current item. It is optional.
  • element: this is the element currently being executed. It is usually required.

The array.filter() method in action

Let’s implement a feature to filter all the midfielders in the list of my favorite players.

Results

Differences between the find iteration method and filter iteration method

Returned value: the filter method returns a new array containing the items that met the conditions stated in the callback function while the find method returns just a single item from the array.

Conclusion

Consequently, the array.find method is a great method for searching for a certain item in an array in JavaScript. But if you are considering the search for items more than one, the JavaScript array.filter method is just what you need.

I hope you had lots of fun learning these iteration methods. For any question or comment, hit the comment section.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #15: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of ...

23.09.2020

Minimize Downtime by Creating a Health-check for Your NodeJS Application

When an API receives more traffic than it can handle, it will crash and be unavailable until someone manually brings it back online. This is referred ...

21.09.2020

Understanding Data Structures in JavaScript (Linked Lists)

Understanding Linked Lists can be a difficult task when you are a beginner JavaScript developer since JavaScript does not provide built-in Linked ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy