Dipping your toes in functional programming with JavaScript

Lagdani Kaoutar
May 19 · 6 min read
Dipping your toes in functional programming with JavaScript

Functions in JavaScript are one of many reasons some developers hate the language. But JavaScript functions are simply misunderstood little creatures! Once you get to know them, you won’t fear them and would even love them and all their little quirks.

So in this article and the next ones, we will go back to basics and enter the different world of JavaScript and its functions. What they are, how do they work, how they can be invoked, what are closures, what are function constructors and how do they work with prototypal inheritance? And what the hell is functional programming?

Well first, today let’s see what functions actually are in JavaScript.

Short answer : In JavaScript, functions are objects. A special kind of objects that is !

We all know that an object is a collection of name/value pairs that can be a primitive (number, string, boolean…) or another object, for example:

And this is how it sits in memory:

An Object sitting in memory

So an object in JavaScript takes a place in memory and has a bunch of references to other things that live in memory like primitives or other objects.

In JavaScript, a function does exactly the same thing, it sits in memory with a bunch of references to things like primitives, objects… So doing the following is totally fine in JavaScript:

But what makes a function different from a simple object? Well the function is a special object that has references to special things also sitting in memory and that define it as a function, for example:

  • Name : The function’s name
  • Code: The function’s code that will be executed when it’s called (which is a property of the function not the function itself)
  • Arguments: The function’s arguments
  • Length: How many arguments the function is expecting

Among others…

This is our function example sitting in memory:

A function sitting in memory

And just like an object, we can do with functions everything we can do with an object:

  • Assigning them to a variable
  • Passing them as parameters to other functions
  • Returning them from other functions
  • Creating them on the fly

And this is the definition of a First Class Function.

Which means, in JavaScript we can easily come up with some pretty strong patterns. Let’s see an example, and go through it:

Assigning a function to a variable: In this example we started by creating a function using a function expression and assigning it to a variable, this variable can be used later to pass around the function, invoke it, add properties to it…

Now this function we created in line 1 is what we call an anonymous function, it has no name. Well of course we have the variable multiplyByTen to access it, but truly multiplyByTen is not the function itself, it is an object created in the memory that points to a function that has no name, and it looks like this in memory:

Anonymous function in memory

Nota Bene: functions created as an expression and assigned to variables are not hoisted. If you want to know more about hoisting, please check .

Expecting a function as a parameter of another function: In line 5, we created a function with the name mapArray that takes two arguments, the first argument is an array of numbers and the second argument is a function. BAM, you’ve got yourself a Higher-order function !

A what? A Higher-order function, another fancy word that describes a simple concept:

When a function accepts another function as an argument, or returns another function as a result, or sometimes does both, it is called a Higher-order function.

In mapArray we loop through the array and for each element inside the array we execute a function that we got as an argument and push the result to a new array that will be then returned. Here it is in memory:

mapArray in memory

Passing a function as a parameter to another function: In line 15, we invoked the mapArray function with two parameters: an array of number 1 to 5 and the function referenced by the variable multiplyByTen that simply takes a number and multiply it by ten. mapArray’s Execution Context is then created. The code that will take each element in our array, apply the multiplyByTen function to it and store it in a new array is executed and the new array is returned.

With the console.log at the end of our example we get [10, 20, 30, 40, 50] printed to the screen.

> Welcome to functional programming!

This is the basis of functional programming: Functions are first class citizens, We are able to treat functions like any other type, just like a primitive or an object. Pass them around in functions, return them from a function, assign them to a variable and create them on the fly.

Let’s wrap up today’s article with another example, and go through it line by line:

We started in line 1 by creating a function attack(), where:

  • We created an anonymous function on the fly (line 2)
  • And returned it, making attack() a what? That’s right! A Higher-order function.

Then, we invoked the attack() function in line 7 and assigned its result to the variable throwAttack.

  • Now, what exactly does throwAttack variable refer to? That’s right again! A function.

Finally, we invoke the function to which throwAttack refers to, and we get the following printed on the screen: “Son Goku throws a Kamehameha

Now for some beginners, it may seem confusing at first and for those familiar with JavaScript it may seem obvious. But how did the anonymous function referred to by throwAttack knew that the attacker is “Son Goku” ? As far as the written code stands throwAttack() only has one argument and it is “Kamehameha”. So what exactly happened?

Spoiler: Closures, we will meet them next :) Stay tuned!


1- In JavaScript, functions are objects, special objects.

2- Functions have special properties, like name, arguments, length, code… that define it as a function

3- An anonymous function has no name, and it usually has an object referring to it.

4- When a function is first class, it is treated like any other type, just like primitives or objects: You can assign them to variables, return them from function, pass them as arguments to functions and create them on the fly.

5- Higher-Order Functions are simply functions that take other functions as argument, or return them as a result or both.

6- The basics of functional programming is treating functions as first class citizens.

Kaoutar Lagdani

A note from the Plain English team

Did you know that we have four publications? Show some love by giving them a follow: , , , — thank you and keep learning!

We’ve also launched a YouTube and would love for you to support us by

And as always, Plain English wants to help promote good content. If you have an article that you would like to submit to any of our publications, send an email to with your Medium username and what you are interested in writing about and we will get back to you!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store