Practical Functional Programming in JavaScript - Control Flow

richytong

Richard Tong

Posted on July 23, 2020

Practical Functional Programming in JavaScript - Control Flow

Usually when authors use the terms "functional programming" and "control flow" together in the same sentence, it's to say functional programming should not have control flow.

I'm using the wikipedia definition for control flow in this case

control flow (or flow of control) is the order in which individual statements, instructions or function calls of an imperative program are executed or evaluated

Control flow explicitly refers to statements, which are different from expressions. Where JavaScript is concerned, statements have semicolons and expressions do not. This is an important distinction, and means the difference between imperative and functional programming in JavaScript.

a + b;
// a, b and a + b are expressions
// a + b; is a statement
Enter fullscreen mode Exit fullscreen mode

All of the articles above avoid if statements and instead prefer language equivalents of the conditional (ternary) operator. I'm here to agree with them in technicality and diverge a bit in practice. I diverge because the conditional operator can get messy in practice; I'm here to offer a cleaner, more scalable way. More on this later on.

The conditional (also referred to as "ternary") operator takes three operands: a condition expression, an expression to evaluate on truthy condition, and an expression to evaluate on falsy condition. It's like if and else, but instead of statements (yes semicolons), you put expressions (no semicolons).

condition ? a : b // if condition, evaluate expression a, else evaluate expression b
Enter fullscreen mode Exit fullscreen mode

Purely functional languages like Haskell don't have the notion of a semicolon; they rely on syntax resembling the conditional operator

if condition then a else b
Enter fullscreen mode Exit fullscreen mode

Python also has conditional-like syntax

a if condition else b
Enter fullscreen mode Exit fullscreen mode

As you can see, the concept of a "ternary", or that which is "composed of three parts", is common across languages. It just makes a ton of sense to express a choice with three things: if some condition, do this, else do that. With JavaScript, you can do this imperatively with if, else statements or functionally with the conditional operator.

// imperative
const describeNumber = number => {
  let description = '';
  if (number < 0) {
    description = 'negative';
  } else if (number === 0) {
    description = 'zero';
  } else {
    description = 'positive';
  }
  return description;
};

// functional
const describeNumber = number =>
  number < 0 ? 'negative'
  : number === 0 ? 'zero'
  : 'positive';
Enter fullscreen mode Exit fullscreen mode

You can go pretty far with the conditional operator alone, but there will be times when something more expressive could help you solve your problems better. This is especially true for code with a lot of branching or complex data handling. For these cases, I've devised a clean and declarative way for you to express conditional flow with my functional programming library, rubico.

Consider an entrypoint to a basic node command line interface application that accepts flags. The application is very simple; all it does is print its own version and its usage.

// argv [string] => ()
const cli = argv => {
  if (argv.includes('-h') || argv.includes('--help')) {
    console.log('usage: ./cli [-h] [--help] [-v] [--version]');
  } else if (argv.includes('-v') || argv.includes('--version')) {
    console.log('v0.0.1');
  } else {
    console.log('unrecognized command');
  };
};

cli(process.argv); // runs when the cli command is run
Enter fullscreen mode Exit fullscreen mode

This is nice and familiar, but it's imperative, and you're here about functional programming, after all. Let's refactor some functionality and use the conditional operator.

// flag string => argv [string] => boolean
const hasFlag = flag => argv => argv.includes(flag);

const USAGE = 'usage: ./cli [-h] [--help] [-v] [--version]';

// argv [string] => ()
const cli = argv =>
  hasFlag('--help')(argv) || hasFlag('-h')(argv) ? console.log(USAGE)
  : hasFlag('--version')(argv) || hasFlag('-v')(argv) ? console.log('v0.0.1')
  : console.log('unrecognized command');

cli(process.argv); // runs when the cli command is run
Enter fullscreen mode Exit fullscreen mode

Now it's looking real cool, but don't you think there's a lot of argvs everywhere? It gets better with rubico.

  • switchCase - like the conditional operator, but with functions. Each function is called with the same input
  • or - like the logical or (||) operator, but with functions. Each function is called with the same input
const { or, switchCase } = require('rubico');

// flag string => argv [string] => boolean
const hasFlag = flag => argv => argv.includes(flag);

const USAGE = 'usage: ./cli [-h] [--help] [-v] [--version]';

const log = message => () => console.log(message);

// argv [string] => ()
const cli = switchCase([
  or([
    hasFlag('--help'),
    hasFlag('-h'),
  ]), log(USAGE),
  or([
    hasFlag('--version'),
    hasFlag('-v'),
  ]), log('v0.0.1'),
  log('unrecognized command'),
]);

cli(process.argv); // runs when the cli command is run
Enter fullscreen mode Exit fullscreen mode

With switchCase and higher order logical functions like or, it's like you're just typing it as you're thinking it. If the argv has the flag --help or -h, print the usage. Otherwise, if it has the flag --version or -v, print the version v0.0.1. Otherwise, print unrecognized command. I think it's an intuitive way to go about expressing logic in functional programs.

My hope is with switchCase and the logical combining functions and, or, and not, we could have a good basis to scale conditional expressions in functional JavaScript beyond the conditional (ternary) operator. If you have any thoughts about this or anything, I would love to get back to you in the comments. Thank you for reading! I'll see you next time on Practical Functional Programming in JavaScript - Error Handling

You can find the rest of the series in rubico's awesome resources

Sources:

💖 💪 🙅 🚩
richytong
Richard Tong

Posted on July 23, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related