Unlocking JavaScript Functional Programming: Practical Patterns and Pitfalls

JavaScript functional programming has been around for a long time, but it became especially popular after 2016, thanks to ES6 syntax and libraries such as RxJS. This article focuses on concrete practice of functional programming in JavaScript, showing real code, differences from imperative style, benefits, and common functional models.

My Understanding of Functional Programming

Functional programming can be understood as a programming style that uses functions as the main building blocks to decompose and abstract ordinary expressions.

Compared with imperative programming, functional code offers clearer semantics, higher reusability, better maintainability, and limited side effects.

Basic Functional Example

The following snippet demonstrates a functional way to capitalize the first letter of each word in an array.

// array of words, capitalize first letter
const arr = ['apple', 'pen', 'apple-pen'];
function upperFirst(word) {
  return word[0].toUpperCase() + word.slice(1);
}
function wordToUpperCase(arr) {
  return arr.map(upperFirst);
}
console.log(wordToUpperCase(['apple', 'pen', 'apple-pen']));

When code becomes more complex, plain loops can become hard to read and maintain. Functional code solves these problems by using higher‑order functions such as Array.map instead of explicit for loops.

Chain Optimization

Deeply nested functional code can lead to horizontal expansion, making it hard to read. The example below shows an extreme case of nested functions and then rewrites it using a chainable style (similar to lodash's chain).

const utils = {
  chain(a) {
    this._temp = a;
    return this;
  },
  sum(b) {
    this._temp += b;
    return this;
  },
  sub(b) {
    this._temp -= b;
    return this;
  },
  value() {
    const _temp = this._temp;
    this._temp = undefined;
    return _temp;
  }
};
console.log(utils.chain(1).sum(2).sum(3).sub(4).value());

This chain makes the flow clearer and isolates each step. The same idea applies to callback‑based code versus Promise chains, where Promises keep the structure vertical and easier to maintain.

Common Functional Programming Models

Closure

A closure is a code block that retains access to its surrounding lexical scope even after the outer function has finished executing.

Example of a simple counter created with a closure:

function makeCounter() {
  let k = 0;
  return function() {
    return ++k;
  };
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Closures are useful for creating private persistent variables, such as a lightweight cache:

const cache = (function() {
  const store = {};
  return {
    get(key) { return store[key]; },
    set(key, val) { store[key] = val; }
  };
})();
cache.set('a', 1);
console.log(cache.get('a')); // 1

Because the stored variables are never released automatically, closures can cause memory leaks if not cleaned up.

Higher‑Order Functions

A higher‑order function is a function that takes another function as an argument or returns a function.

JavaScript natively supports higher‑order functions like Array.map, Array.reduce, and Array.filter. Example using map to increment each number:

const arr = [1, 2, 3];
const rs = arr.map(n => ++n);
console.log(rs); // [2,3,4]

Currying

Currying transforms a function that takes multiple arguments into a sequence of functions each taking a single argument.

Using lodash’s _.partial to pre‑fill the base path for path.relative:

const BASE = '/path/to/base';
const relativeFromBase = _.partial(path.relative, BASE);
const relativePath = relativeFromBase('/some/path');

Composition

Composition combines several functions into a new function that applies them from left to right (or right to left).

With lodash’s _.flow we can compose upper‑casing and Base64 encoding:

const upperAndBase64 = _.flow(
  _.upperCase,
  btoa
);
console.log(upperAndBase64('pen')); // "UEVOPQ=="

My Viewpoint

Functional programming in JavaScript is not a strict rule but another tool in the toolbox. It can be combined with object‑oriented or imperative styles, and the choice should depend on the problem at hand.

References

https://lodash.com/

http://reactivex.io/

Image credit: https://unsplash.com/photos/XJXWbfSo2f0 By Luca Bravo