BLOG

Functional Programming with JavaScript

by Sysco Labs Articles 9 January 2018

What is functional programming? A quick google search will define functional programming as: ”A programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.” Today we will be diving into what exactly this means.

Functional programming is nothing new. In fact, the foundations for functional programming was laid in the 1930’s with Lambda Calculus, with the first functional programming language following in the 1960’s with LISP. A widely used functional programming language today is Erlang, which was developed by Ericsson for telecom applications.

Programming Paradigms

Programming paradigms have two main branches – Imperative and Declarative (functional programming comes under the Declarative branch).

Imperative Programming

A classic example of Imperative programming is one you may have written back in school. You might have been asked to create an algorithm that makes coffee. In this algorithm, the steps that you would have created are “Put water to boil, add a spoon of coffee into the mug, add a spoon of sugar into the mug, pour boiling water into the mug, mix well”

This is basically imperative programming. A program that tells the computer how to do something.

 

Declarative Programming

Declarative programming takes a different route to that of Imperative Programming. Instead of giving the computer instructions of what exactly to do, we ask the computer what we want. In other words, we tell the computer what we want rather than how we want it.

For example, we need the numbers of an array summed up, and to do this we simply write a program that asks the computer the sum of the numbers rather than writing a step by step program.

 

Using JavaScript for Functional Programming

Using the example above, where we are looking to get the sum of an element in an array, let’s look at the program you would write in both the Imperative and Declarative programming style.

 

Imperative:

let arr = [3,5,5];
let sum = 0
for (let i = 0 <arr.length; i++){
sum + arr[i];
}

The above program goes element by element, and then it sums up to a variable.

The functional programming equivalent is:

let arr =[3,5,5];
let sum = arr.reduce ((sum, element)=> {
return sum + element;
}

What we’ve done here is to use the array reduce in order to get the sum. This is declarative.

 

Concepts of Functional Programming

To grasp functional programming, it’s important to get the concepts right. Below, we will be going over some of the concepts, along with some of the traits of that concept.

  • First Class functions:
    • No restrictions about functions.
    • Functions can be used as any other variable.
  • Higher Order Functions
    • Functions that take functions as parameters.
    • Functions that return other functions.
  • Side Effects

Picture by John Stevenson

A side effect is anything that your program does other than getting your inputs and computing a value/returning it. Some examples of side effects are:

  • Changing the value of a variable
  • Writing some data to the disk
  • Reading from the database
  • Writing to the console

 

  • Pure Functions

If you write a function that only gets the value from the inputs, and it only computes the value and returns it, that is a pure function.

  • Return value is only determined by its input values
  • No observable side effects

 

  • Avoid Iterating

Iterating is imperative. We need to avoid iterating when working with functional programming (use recursion, map, reduce etc).

  • Tail Call Optimization

Recursion is heavily used in functional programming, but the main problem that we run in to while doing recursion is if the stack is too deep, we get stack overflow. Most of the time we use tail recursion (refer here if you are not familiar with tail recursion, and here to understand tail call optimization). Most functional programming languages support this. ES6 introduces tail call optimization to JavaScript. It is currently only supported by Safari .

  • Immutability

Immutability does not allow the modification of the state of an object after creation. This solves a lot of problems that are associated with mutability. For example, syncing issues in multi-threading.

  • Currying

Currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument.

  • Composition

Composing is creating new functions by composing existing functions. For example, take a look the following:

1. function h(x) {
2. return x + 1;
3. }
4.

5. function g(x) {
6. return x * x;
7. }
8.

9. function f(x) {
10. return x.toString();
11. }
12. // R = Ramda
13. const composite = R.compose(f, g, h);

One Comment for “Functional Programming with JavaScript”

  1. Azmeer says:

    Thank you for the article. Please use line numbing and indentation to improve code readability. Perhaps the “code-prettify” library?

Leave a Comment