Author name: Sandip Bhandari

Learn how JavaScript’s built-in functions like map() and filter(), as well as compose() and chain(), support a more elegant handling of JavaScript arrays. JavaScript arrays are an incredibly flexible way to model collections using techniques from functional programming. This article introduces you to using tools like forEach(), map(), and reduce() for functional-style arrays.Table of Contents Traditional JavaScript arrays JavaScript arrays can hold heterogeneous types, change size on the fly, and readily insert or remove elements. Traditional methods like slice, splice, and push/pop do this by operating on the array itself, modifying the collection in a “destructive” way: Functional programming with JavaScript arrays Although JavaScript arrays are very capable out of the box, the functional paradigm improves the clarity and maintainability of array code. In general, functional programming looks to use functions as operators that can be passed into arrays. This allows for operating over the array like the head on a tape, rather than traditional imperative loops that describe in detail what is to occur. Read Also: Frontend Developer Roadmap, 0 to Hero path for your success. Let’s look at a few examples of working with JavaScript arrays in the functional paradigm. forEach() Array.forEach() is our first example. This lets you pass in a function that performs arbitrary operations on the elements iteratively. It’s a common alternative to the traditional for loop: In this example, we are just outputting each element to the console. The equivalent in a for loop would be: You’ll notice that there are fewer moving parts in the functional version. In particular, we eliminate the iterator (i), which is an extraneous variable used to express the logic of the mechanics, rather than a part of the actual intention. Note that I’m not suggesting for loops have no place; they are sometimes the right tool, but often, forEach() is a cleaner approach. Functional programming as a philosophy promotes “immutability.” That means simply that it likes to avoid modifying variables. Instead, functional programming prefers to take an existing variable and pass it through a “pipeline” (a function or functions) that transforms it into a new variable, leaving the original as-is. forEach is often used in this way, but it’s also often used “destructively,” as shown here: This example might not be considered the purest form of functional programming, but it utilizes key functional characteristics such as “first-order functions.” When we refer to a first-order function, we mean that we are using a function like any other reference, in this case, by passing it in as an argument. The long and the short of that story is that functions can act as portable bundles of functionality that are passed around to do jobs in predictable ways. Note, too, that there are still many cases where an old-fashioned for loop is the best approach. For example, when iterating by a number other than 1, iterating backward, and when handling complex scenarios requiring multiple iterators. Array.map() Functions that are non-destructive and avoid any other “side-effects” are said to be “pure functions.” We can use forEach in this way, but the Array.map() function is specifically designed for this purpose. It does not operate on the array itself, but instead runs the function operator and returns the result as a new array: Array.map() is a very powerful mechanism for transforming arrays. It gives you the ability to do almost anything with an array in a clean fashion. In particular, it avoids complexity in changing the original array, where other code elsewhere might depend on it in unknown or unexpected ways.  On the other hand, it’s important to bear in mind that Array.map() always makes a copy, which has performance implications. You don’t want to use it on very large arrays. Sometimes, memory considerations dictate that you use another approach. How this works is that whatever the provided function returns will be kept in the new array. So, we could use the automatically returning version of a function: This approach can be a lot cleaner for short functions. Array.filter() Array.map() outputs an array with the same length as the source. If the function doesn’t return something, the output array will be labeled undefined in that position. To create an array with a different length, you can use Array.filter(). In that case, when the functional argument doesn’t return anything, that element will be removed from the target array: In this example, we take an array of objects holding rock bands and the year they were formed and then use bands.filter() to provide a function that will give us a new array holding only the bands from the 1970s.  Array.reduce() Sometimes, you need to take a whole JavaScript arrays and turn it into a single value. For that, you can use Array.reduce: The function passed to reduce() has two arguments: the “accumulator” and the current element. The accumulator is what will be finally returned, and holds its state across each iteration, allowing you to “collect” everything into a single output. The reduce function is a very handy tool when you need it. As another quick example, say you wanted a string containing all the band names in a string. You could do this: Composing functions The built-in functions you’ve seen so far are fundamental to functional programming (and its programming-in-the-large sibling, reactive programming). Now, let’s consider the idea of linking functions together to achieve some desired functionality. Two of the most basic and important linking functions are compose() and chain(). Many functional programming and utility libraries include them, but they are also easy to implement. This next example gives you a clear look at how they work: compose() combines many functions, so that each function’s output is fed into the next, from right to left (based on their ordering as passed to the function). chain() does the same thing, but from left to right. These functions also give you a look at reduceRight(), the mirror image of reduce(), which you’ve already seen. The reduceRight() function lets you accumulate by going backward across the functional arguments. The compose() and chain() functions are not specific to arrays, but they can be used with them. Here’s a simple example of using compose() with an array: Conclusion of JavaScript arrays Arranging functions is central to both functional and reactive programming. It allows you to reuse and combine functions into new functions. In essence, you can define composite functions that are composed of the capabilities of other, more focused ones. This is similar, conceptually, to how an object-oriented programmer