Note: This is part of the “Javascript and Functional ” series on functional programming techniques in JavaScript ES6+. Check out To start from the ground up check out Programming learning Part 3 (the next post in the series) here. <Part 1> Welcome to the Upside Down Before we get started, there’s something you need to know … If you’ve ever programmed in JS you’ve probably used FP patterns before! These patterns and paradigms have been there all along, we just haven’t been able to see them properly. We are going to start from the familiar and explore new territory. Things may get a bit … well … strange. But fear not! Together we will survive! First Class Functions In Javascript, functions are Like I mentioned earlier, we don’t like cryptic terminology, so let’s explain. According to the Mozilla developer glossary: first class objects. A programming language is said to have when functions in that language are treated like any other variable. For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. First-class functions Functions as constants In the following example we will declare a const and assign it an anonymous arrow functions. After the initial assignment is a constant with a value of a function. We verify that by logging the constFunction variable in the Chrome inspector. Because is a function we can also invoke it. constFunction constFunction Functions as values of keys of an object Now that we understand that variables can hold functions, let’s demonstrate a function as a value of a key in an object. This should be familiar for anyone who has done any object oriented programming before. Functions as array items When functions are we can pass them as data to an array, . Let’s use the Chrome console and check this out. first class objects just like any other data type Higher order functions Now that we’ve warmed up, let’s get to the interesting stuff :) JS developers see on a daily basis. If you’re coming from a language that doesn’t support FP this should seem a bit weird 😳😳😳😳😳😳😳 Let’s acquaint ourselves with this concept by looking at some examples. functions that accept other functions as arguments An asynchronous function that accepts a callback function. We’re using the npm module in this example for the _writeFile m_ethod. The third parameter that is expecting is a function. When the method executes it will either succeed or fail. If it fails it will execute the Alternatively, we could have gone for a more terse syntax, and dropped the named function: jsonfile writeFile jsonfile.writeFile errorLoggerFunction. setTimeout This example shows the built in asynchronous method which accepts 2 arguments. Let’s formalize this a little bit and explain the function in functional programming terms. setTimeout setTimeout Let’s start by reading the signature of the function. We can observe that the number of arguments that takes is two. In functional programming the from words like unary, binary, ternary etc. So we can say that is of arity 2, or equivalently say that is a binary function. setTimeout number of arguments a function takes is called its Arity, setTimeout The arguments that expects is a function and a time interval to wait before executing the given function. Hmmm … setTimeout another function that accepts a function as input? In functional programming this is so common that these types of functions even have a name! They are called higher order functions. A is a that takes a as an argument, or returns a . higher order function function function function There you go. Now you can drop this term low key in any random conversation at work / with friends and sound like a boss! 😂😂😂 You can’t be wrong if no one understands what you’re saying Let’s get a little funkier and in the next example. create an array (list) of functions On line 5 we are declaring an array of functions. We are then using the forEach method to iterate over the array. is a natively supported ES6+ function, that to execute on every item in the array. Therefore, forEach accepts a function forEach is also a higher order function! Our accepts an anonymous function as input. will iterate over the array and implicitly access the current item in the array and call it It is worth noting that implicitly accesses array elements, in comparison to how we would have accessed the current element if we had used a regular for loop — ie. . Every item in our array is a function, therefore we invoke with the arguments that it is expecting. forEach forEach getCalculation. forEach arrayOfFunctions[i] getCalculation Fantastic. This example illustrates that . functions in functional programming can be passed into arrays (lists) just like any other data type Functions can go anywhere! Now let’s build our own higher order function! The function returns a simple addition function when called. By invoking the result of the function and supplying it two arguments, we have access to the anonymous addition function. addWrapper addWrapper We could get even crazier with our level of indirection and write a function that returns a function, that in turn returns its own function! This is a very powerful pattern in functional programming. We will explore it in depth in the coming posts when we talk about . currying and partial applications The main point that you should take away from our discussion about is that functions can be assigned as constants, variables, placed as array elements and even set as values of keys on an object. Additionally, (and most importantly ?!) functions can be returned to and from functions — First class functions are the cornerstones of any functional programming language. first class functions just like any other data type! Check out the next post , where we discuss pure functions in JS, why they will make your codebase cleaner and how you can start utilizing them immediately. If this post was helpful, please click the clap 👏 button below to show your support! ⬇⬇ You can follow me on , and . Instagram Linkedin Medium
