Intro to Functional JavaScript — Part 1

This is Part 1 in an ongoing series of articles that will talk about the Functional Programming Paradigm in JavaScript. More parts to follow.


Now, why am I doing this? I recently started learning about functional programming in CS 4003: Organization of Programming Languages. Needless to say, I was overwhelmed the first time I saw Haskell code, not to say confused at the very least. So I decided to learn the fundamentals of functional programming in a language and syntax I was familiar with. And so began my journey in functional programming with JavaScript…

What is functional programming?

Good question! I like people who are curious and ask. Quoting Wikipedia here:

In computer science, functional programming is a programming paradigm — a style of building the structure and elements of computer programs — that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.

Wow. Look how much that definition helped. Well, let’s take a deep breath and reword it. Functional programming, in essence, is one of the many ways of writing code (remember procedural paradigm?.) A specific model, or say a set of rules that we define while creating the language and writing code with it.

The paradigm reads calculations as the results of mathematical function i.e given some input parameters , the output for those parameters will always be the same. This paradigm also emphasizes heavily on immutability — data that can not be changed at a later state.

Let’s get started, maybe?

Functional programming has a steep learning curve. For some, it might get take more time but you’ll get there.

The good news? If you have been working with JavaScript and following the latest updates to the language, chances are you have stumbled across and used some functional language concepts already. I know I did. Remember, JavaScript is a multi-paradigm language. Bad news? No more good news.

Code Snippet 1 : Assigning a string to a variable

What did we do? Assign a string to a variable. Now we can assign data types to a variable be it arrays, int, floats, and what not. What about functions? In other words, will var foobar = doSomething() work? In procedural programming, we learned the concept that a function is code that performs a specific task every time it is called. Functions are treated as first-class objects in JavaScript. So they can be assigned to variables or passed as a parameter in other functions or pretty much anything else we do with other data types.

Code Snippet 2: Passing function as an argument to another function

In this snippet, the function printElement() takes in a variable and logs it onto the console. The function, doSomething() accepts a function and a datatype and then plugs in the data with the function it just accepted. So we can define as many new functions we want and call doSomething() to run that function for us. Amazing, right? Oh so you want me to show it you don’t you?

Code Snippet 3: Created a template to run any function with one argument

Higher Order functions vs Functions as First class objects?

I was really confused between the two concepts. Let‘s see the amazing doSomething() function again. It accepts a function, someAction() and then returns it with the completed result of someAction() and element. That is a true mark of a higher order function (your ancestor higher order functions would be so proud of you doSomething().) But in this article, I am calling it a first class function. Now there must be some relation between these two concepts, right?


This Stack Overflow answer by Haskell expert and author, Don Stewart explains the relation perfectly.

To paraphrase, higher order functions are a consequence of making functions as first class i.e functions should be treated just like other objects, arrays, floats etc.

Wrapping up Part 1

So where are we? We learned what functional languages are. It is a new way to write code with different features than procedural languages. Functions in functional languages are first-class objects and computations are interpreted as mathematical functions. For a set of input the output will always be the same. We also learned that data types in these languages are immutable. More on that in part 2.

JavaScript is a multi-paradigm language and treats functions as first class objects. This makes JavaScript a decent language to start with though it should not be used primarily as one. Languages such as Haskell are much more equipped to follow the functional paradigm. Again, more on that later.

In the next part, we will study specific terminologies related to functional language and then judge how JavaScript scores in each aspect. Then we will dive deeper into arrays and lists and see how this paradigm helps in working with arrays easier.