3.5: Functional Programming in JavaScript

Last updated
Save as PDF

Page ID: 27549

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

JavaScript is really a multi-paradigm language. Having the ability to handle more than one paradigm can be a blessing and a curse, as having access to multiple ways to program gives a programmer a lot of power in JavaScript, but it also makes the language hard to use and easy to misuse. As we have seen in this chapter, JavaScript supports Imperative or Procedural Programming. JavaScript supports Object Oriented Programming (OOP) through the use of prototypes, though it is a very different type of OOP than most readers are familiar with in Java/C#/C++ etc. JavaScript supports Event Driven Programming²³.

JavaScript also supports some elements of Functional Programming, in particular lambda functions. The forEach iterator is introduced here to introduce lambda functions, anonymous functions, and the basic concepts of Functional Programming. Note that entire books are written on Functional Programming, and so this meant to give a flavor of what Functional Programming is, and how it is used in JavaScript. The Functional Programming introduction given here is enough to be able to read and understand JavaScript examples, but is not enough to explain how to use Functional Programming.

To understand Functional Programming, the following program a forEach function to iterate over the weekDays array is presented.

Program 68 - Final program to process a form

<script>
    function printDay(day, index) {
        alert("Weekday " + (index+1) + " is " + day)
    }
    let weekDays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
    weekDays.forEach(printDay)
</script>

This program illustrates one aspect of functional programming: that a functional program is built by allowing functions to call other functions that are parameters to the first function. The forEach() function takes another function, the printDay() function. The printDay() function is evaluated in the forEach function for each member of the array²⁴, and the object and its index are passed as parameters to the function.

The use of functions as data in a language is called a lambda function. A lambda function is a function that is treated as data and can be passed as a parameter to other functions, assigned to variables, or used as any other data type. Another example of using functional programming is given in the Exercises at the end of this chapter.

In the example of Functional Programming in Program 68, the function printDay is only defined to pass to the forEach method. Thus, there is really no reason to give it a name, and the function would be better written as an anonymous function, as in the following example.

Program 69 - Final program to process a form

<script>    
    let weekDays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
    weekDays.forEach(function(day, index) {
        alert("Weekday " + (index+1) + " is " + day)
    })
</script>

One Functional Programming pattern, the map reduce pattern, has gained a large following for implementing Parallel Processing and Big Data processing, and so it is useful to be at least somewhat familiar with Functional Programming.

²³ For more information, see https://softwareengineering.stackexc...-javascript-a- functional-programming-language.

²⁴ Note here the printDay function is named, but it is a lambda value since it is passed as data to another function. Do not fall into the trap of believing all anonymous functions are lambda functions, of all lambdas functions are anonymous. For more information about lambda verses anonymous functions, see https://gist.github.com/ericelliott/...be82128443f6df.