Using JavaScript to filter even numbers from an array

JavaScript has some cool new array iteration methods such as forEach, map, every, some and filter.
I write about them with easy to understand examples on my latest book JavaScript Objects Functions and Arrays Explained.

Today I am going to spend a bit of time introducing filter by giving an example where filter works very well: filtering out items from an array by returning a new array.

We know how to check if a certain number is odd or even, right?

x = 4 % 2 === 0; // returns true
y = 5 % 2 ==== 0; // returns false

When JavaScript see a % it knows we want the modulus of the two numbers. As you remember from arithmetic, the modulus (sometimes called modulo) operation finds the remainder of division of one number by another. In our example, JavaScript verifies if 4 / 2 has a remainder of zero. If it does, the number is an even number, and because the condition matches, it returns the Boolean true. Else, it returns false and we know the number is odd.

So knowing this, we could build a function that checks for even numbers:

var even = function (num) {
return num % 2 === 0;
};

If we fire up our Google Chrome or Opera console by pressing CTRL j we could plug in the above function and call it with an argument that feeds num. An argument of  3 would return false and a 6 would return true, meaning 6 is an even number.

Now let’s look at a more complex data system such as an array:

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12];

If we wanted to get all the even (or odd) numbers, we could use the above function “even”. However, we need to feed into the function each array item to be evaluated. In the olden days we would create a for loop. Today we have something better thanks to the latest ECMAScript standard. We have filter().

Filter returns a new array with the results of the function we feed it as an argument.

So we could create a new array and assign it the results of filtering out myArray with the help of our previous function.

Here’s how the filter assignment is coded:

var myEvenArray = myArray.filter(even);
// even is the function name we coded above
// returns [2, 4, 6, 8, 10, 12]

If you want to learn more about these cool new methods take a look at my latest book at Amazon.

Note: A more common way to include a function as an argument to filter() is to code the function inside the filter’s parentheses as an anonymous function. It will work the same way and it will be destroyed in the end, clearing out memory space in the browser.

You can see a sample on the following text file: JavaScript filter sample file.

Advertisements

Author: tarau

technical writer, web technologies

1 thought on “Using JavaScript to filter even numbers from an array”

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s