Home > Hot in web development > Filtering and Chaining in Functional JavaScript

Filtering and Chaining in Functional JavaScript

One of the things I appreciate about JavaScript is its versatility. JavaScript gives you the opportunity to use object oriented programming, imperative programming, and even functional programming. And you can go back and forth among them depending on your current needs and the preferences and expectations of your team.

Although JavaScript supports functional techniques, it’s not optimized for pure functional programming the way a language such as Haskell or Scala is. While I don’t usually structure my JavaScript programs to be 100 percent functional, I enjoy using functional programming concepts to help me keep my code clean and focus on designing code that can be reused easily and tested cleanly.

Filtering to Limit a Data Set

With the advent of ES5, JavaScript Arrays inherited a few methods that make functional programming even more convenient. JavaScript Arrays can now map, reduce, and filter natively. Each of these methods goes through every one of the items in an array, and without the need for a loop or local state changes, performs an analysis that can return a result that’s ready to use immediately or pass-through to be operated on further.

In this article I want to introduce you to filtering. Filtering allows you to evaluate every item of an array, and based on a test condition you pass in, determine whether to return a new array that contains that element. When you use the filter method of Array, what you get back as another array that is either the same length as the original array or smaller, containing a subset of the items in the original that match the condition you set.

Using a Loop to Demonstrate Filtering

A simple example of the sort of problem that might benefit from filtering is limiting an array of strings to only the strings that have three characters. That’s not a complicated problem to solve, and we can do it pretty handily using vanilla JavaScript for loops without the filter method. It might look something like this:

var animals = ["cat","dog","fish"];  var threeLetterAnimals = [];  for (let count = 0; count < animals.length; count++){    if (animals[count].length === 3) {      threeLetterAnimals.push(animals[count]);    }  }  console.log(threeLetterAnimals); // ["cat", "dog"]  

What we’re doing here is defining an array containing three strings, and creating an empty array where we can store just the strings that only have three characters. We’re defining a count variable to use in the for loop as we iterate through the array. Every time that we come across a string that has exactly three characters, we push it into our new empty array. And once were done, we just log the result.

There’s nothing stopping us from modifying the original array in our loop, but by doing that we would permanently lose the original values. It’s much cleaner to create a new array and leave the original untouched.

Read Full Article

admin
The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.
http://webrecital.com/

Leave a Reply

Your email address will not be published. Required fields are marked *