Learn Functional Programming by JavaScript

functional programming

As a Salesforce developer who is all the time in the Object-Oriented Programming (OO) world, I always wanted to explore the beauty of the other popular programming paradigm — Functional Programming (FP).

In the past, I have learned the basics of FP and scratched the surface of Clojure, Haskell, and Scala in my spare time. However, the major challenge is that these languages are not used in my work, thus I don’t have enough time to practice and keep up with them. Therefore, a lot of things were learned and then unlearned as time passes, and I cannot memorize much at all.

Now with the new Lightning Web Component front-end framework in the Salesforce, we are able to use state-of-art JavaScript and finally, have the chance to learn FP in my work. Exciting isn’t it!?

What is Functional Programming?

The first step apparently is to understand what is FP.

Depending on whom you are talking to, the answer to this question may vary a lot. Often times people say, “It is all about lambda calculus” — which explains nothing to people who aren’t armed with a solid mathematical background.

For the sake of simplicity, and to help people who are true FP beginners like me, I tend to perceive FP as a different way to manipulate data.

In OO, we design applications by mimicking real-world objects. There are classes with methods, properties reflecting objects with features. We construct these objects and build communications among them to fulfill the needs.

object oriented design
OO Design

FP, by contrast, cares little about objects. It is all about effectively and efficiently composing, slicing, reordering data in a mathematic manner.

What do I mean? Let’s see an example.

Build Tower – Walkthrough a JavaScript Kata example

Build Tower is a javaScript kata exercise in codewars. You can read and understand the kata assignment here.

It is a simple assignment. We need to build a function towerBuilder(n) that accepts an integer n as the number of tower floors and outputs an array as the screenshot below.

build tower kata assignment
Build Tower Kata

Using Object-Oriented Mindset

As you can see above, the assignment is simple and can definitely be resolved with OO mindset. We use a for loop to go from 1 to n and store the string values accordingly. That’s it. Let’s check the code below.

function towerBuilder(n) {
  let result = [];
  for(let k = 0; k < n; k++){
    let currentItem = '';
    
    let spaces = '';
    for(let j = 0; j < n - k - 1; n++){
      spaces += ' ';
    }
    
    let stars = '';
    for(let s = 0; s < k + k + 1; s ++){
      stars += '*';
    }
    
    currentItem = spaces + stars + spaces;
    result.push(currentItem);
  }
  return result;
}

Despite that, the code above is very clumsy and inefficient — it has one for loop with two nested child loops, it clearly depicts the logic.

The logic is that we need to construct the prefix spaces, number of stars, and suffix spaces for each array item.

Using Function Programming Mindset

We all know the code above is suboptimal. JavaScript is more an FP than an OO language. I’d like to use this opportunity to learn and use the JavaScript FP APIs. The point is, I don’t know how to do it in an elegant FP way.

A very good feature in Codewars is that you get to see the best answer submitted by others to this question.

Let’s do the spying now :D. The best solution is shown below.

function towerBuilder(n) {
  return Array.from({length: n}, function(v, k) {
    const spaces = ' '.repeat(n - k - 1);
    return spaces + '*'.repeat(k + k + 1) + spaces;
  });
}

It will take us time to grasp useful APIs/tricks, like array.from(), string.repeat(), constructing an array with ascending numbers. This is what I refer to as “FP is all about efficiently and effectively manipulate data“.

In addition, you might also notice that for loop is not in use at all in FP.

As you can see, FP is a totally different paradigm comparing to OO. We, as salesforce developers, can take this chance to see what’s going on on the other side of the world :).

Leave a Reply