AlgoDaily - Introduction to Functional Programming

Home > Frontend Engineering and Javascript > Intermediate Javascript Concepts > Introduction to Functional Programming

JavaScript is an incredibly versatile language. It brings together object-oriented, functional, and procedural programming paradigms in a single place. It is therefore not closely associated with any one of them, but all three.

Today, we will get acquainted with functional programming, some of the concepts associated with it, and a few examples of how to implement them in JavaScript.

What is functional programming?

Functional programming is a programming paradigm just like object-oriented programming and procedural programming. It follows a declarative programming style rather than an imperative programming style.

To put it simply, declarative programming is like asking your friend to fix your computer, but you don’t care how he or she does it. In imperative, each and every step of the process is detailed.

Suppose we have the following basket of food:

JAVASCRIPT

1const basket = [
2    {
3        name: "mango",
4        type: "fruit"
5    },
6    {
7        name: "onion",
8        type: "vegetable"
9    },
10    {
11        name: "potato",
12        type: "vegetable"
13    },
14    {
15        name: "apple",
16        type: "fruit"
17    }
18];

Let’s take a look at an imperatively written program. We have a basket of fruits and vegetables and we want to segregate the fruits into a different basket. This could be a simple program and you may already have the following solution in mind.

JAVASCRIPT

1function findFruit(basket){
2    let fruits = [];
3    for(let i = 0; i < basket.length; i++){
4        const item = basket[i]
5        if(item.type == "fruit"){
6            fruits.push(item);
7        }
8    }
9    return fruits;
10}
11
12let fruits = findFruit(basket);
13console.log(fruits);

The example above is done through imperative programming. We use a loop to find the one of interest and add it to a new array and return the new array. Now, using declarative programming, the same function would be written in the following way.

This is declarative programming. From 8 lines of code, it has come down to just 2 lines of code. We are making use of the filter function on the array without having to go through each item in the basket because we are not worried about how it is implemented but only about the end result.

xxxxxxxxxx
 
const basket = [
    {
        name: "mango",
        type: "fruit"
    },
    {
        name: "onion",
        type: "vegetable"
    },
    {
        name: "potato",
        type: "vegetable"
    },
    {
        name: "apple",
        type: "fruit"
    }
];
​
const findFruit = (basket) => {
    const fruits = basket.filter(item => item.type == "fruit");
    return fruits;
}
​
let fruits = findFruit(basket);
console.log(fruits);

Build your intuition. Fill in the missing part by typing it in.

The three major programming paradigms are , , and __.

Write the missing line below.

Pure Functions

Pure functions make functional programming a reality. So, what are these pure functions? Let’s dissect the term into two here. The second word refers to functions, as with any programming language. They take an input, perform some computation and give an output.

JAVASCRIPT

1const impure = (a) => {
2    return Math.random()*a;
3}

The above function is impure as it takes an input number a and returns a random number multiplied with a. So, how does a function become pure? The purity of a function is described by the results that it computes when given an argument. The result should always be the same when the arguments are the same, no matter how many times it has been passed to it. Here is a simple example of a pure function.

xxxxxxxxxx
 
const multiply = (a, b) => {
    return a * b;
}

Are you sure you're getting this? Click the correct answer from the options.

Pure functions have side effects. True or False?

Click the option that best answers the question.

True
False

Referential Transparency

A term that is closely associated with pure functions is referential transparency. Just like how we had previously said a pure function returns the same output for the same input (no matter how many times we invoke it)-- referential transparency means that we can replace a function invocation without changing its meaning. If that was confusing, take a look at the following example.

In it, we can see that 5 + 1 * 2 will give us the output of 12 through two function calls. According to referential transparency, if we put the absolute values that the function returns, it should give us the same output. In our case, this will be 6 * 2, which is 12.

xxxxxxxxxx
 
function addOne(a) {
    return a + 1;
}
​
function multiplyTwo(a) {
    return a * 2;
}
​
let x = 5;
​
console.log("(5 + 1) * 2 is: " + multiplyTwo(addOne(x)));

Side effects

Side effects are observed "outside" a function and are not related to the return value from the function itself. For example, all I/O operations are considered to be side effects. The same multiply method that we saw above will become impure if we simply add a console.log() statement. Some of the common side effects are given below.

I/O operations (writing to the screen, writing to a file)
Network operations (writing to network)
Invoking other processes or functions that have side effects

But how can we build a useful application that doesn’t interact with the outside world? Without I/O operations, network operations, or invoking other processes or functions, how do we create value? It is a recommended best practice to keep functions as pure as possible and then move these operations to the edge of your application.

Build your intuition. Click the correct answer from the options.

Is this a pure function?

JAVASCRIPT

1const multiply = (a,b) => {
2    return a*b;
3}
4console.log(multiply(2,4));

Click the option that best answers the question.

Higher Order Functions

Functions are like any other variables in JavaScript, making them first-class citizens. They can be operated upon, returned, passed as an argument just like any other conventional variable. A higher-order function takes another function as an argument and returns a function or a result. What if we say, you’ve seen a higher-order function in this article already?

JAVASCRIPT

1const findFruit = (basket) => {
2    const fruits = basket.filter(item => item.type == "fruit");
3    return fruits;
4}

Remember this example from above? The filter() method is a higher-order function that has an anonymous function at the beginning that accepts each item in the basket as an argument and checks for its type. The filter method then uses the return value from that to add elements to the basket that satisfy this equality.

Other examples of higher-order functions are forEach(), map() and reduce(). Higher-order functions promote reusability in our code, helps to isolate actions or abstract them, perform function composition, etc.

Wrapping Up

That’s it for this quick one on functional programming. The biggest advice we would like to give when learning functional programming is to be curious about the new terms rather than being afraid of them. Most of them are concepts that can be easily grasped with a little bit of practice. Functional programs are easy to grow, maintain and most of all understand. We hope you start getting your hands dirty with functional programming soon. Happy coding!

Try this exercise. Click the correct answer from the options.

Pick the odd one out

Click the option that best answers the question.

map()
length()
reduce()
filter()

One Pager Cheat Sheet

JavaScript allows for the implementation of functional programming, combining object-oriented, functional and procedural programming paradigms.
Functional programming is a programming paradigm which uses a declarative rather than an imperative style, allowing for concise instruction and improved readability.
The three main programming paradigms are Object-oriented, Procedural and Functional, each of which have different approaches to programming computers, such as data representation with classes and objects for Object-oriented programming and declarative programming for Functional programming.
Apure functionis a type of function which always returns the same output when given the same input, regardless of the number of times it has been called.
False, referential transparency applies to pure functions, which can be easily tested, reused and have no side effects.
Referential Transparency is the ability to replace a function with its return value without changing its meaning.
No functions with side effects are considered pure; therefore this is an impure function.
Higher-order functions promote reusability and allow us to isolate actions and perform function composition, among other uses, such as the example of filter() shown in the article.
Be curious and practice - it's easy to understand, grow and maintain Functional Programs - Happy Coding!
The length() function is the odd one out, as it is not related to functional programming like the other terms.

What is functional programming?

Build your intuition. Fill in the missing part by typing it in.

Pure Functions

Are you sure you're getting this? Click the correct answer from the options.

Click the option that best answers the question.

Referential Transparency

Side effects

Build your intuition. Click the correct answer from the options.

Click the option that best answers the question.

Higher Order Functions

Wrapping Up

Try this exercise. Click the correct answer from the options.

Click the option that best answers the question.

One Pager Cheat Sheet

Programming Categories

Popular Lessons