Functional Programming in JavaScript

Welcome to the ultimate guide on Functional Programming (FP) in JavaScript! This document covers all the essential concepts, techniques, and best practices to help you master functional programming.

🚀 Introduction to Programming Paradigms

Overview of Programming Paradigms

Programming paradigms are styles or "ways" of programming. They provide a structure and approach for solving problems and organizing code.

• Imperative Programming:
  • Focuses on how to perform tasks through explicit commands and control flow.
  • Analogy: Think of it as following a recipe step-by-step to cook a meal.
  • Example:
  imperative-js

  let total = 0;
  for (let i = 0; i < 10; i++) {
      total += i;
  }
  console.log(total); // 45
  

  Copy to clipboard
• Object-Oriented Programming (OOP):
  • Organizes code into objects that combine state and behavior.
  • Analogy: Imagine a car. It has properties like color and model (state) and actions like drive and brake (behavior).
  • Example:
  oop.js

  class Car {
      constructor(model, color) {
          this.model = model;
          this.color = color;
      }
      drive() {
          console.log('Driving');
      }
      }
  const myCar = new Car('Toyota', 'Red');
  myCar.drive(); // Driving
  

  Copy to clipboard
• Functional Programming (FP):
  • Emphasizes the use of pure functions, immutability, and higher-order functions.
  • Analogy: Think of it like a math function where the same input always gives the same output without side effects.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

Comparing Paradigms

• Key Differences:
  • Imperative: Directly changes program state using statements.
  • OOP: Encapsulates state and behavior in objects.
  • FP: Treats computation as the evaluation of functions.
• Use Cases:
  • Imperative: Simple scripts, performance-critical sections.
  • OOP: Large applications with complex state management.
  • FP: Data transformations, concurrent and parallel processing

Core Concepts

First-Class

• Functions are treated as first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

const greet = () => 'Hello, World!';
const sayGreeting = greet;
console.log(sayGreeting()); // Hello, World!

Higher-Order Functions

• Functions that can take other functions as arguments or return functions as results.

const greet = () => 'Hello, World!';
const callFunction = (fn) => fn();
console.log(callFunction(greet)); // Hello, World!

Immutability

• Data objects cannot be modified after they are created. Instead, new objects are created with the desired changes, promoting predictability and easier debugging.

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4];
console.log(originalArray); // [1, 2, 3]
console.log(newArray); // [1, 2, 3, 4]

Recursion

• A technique where a function calls itself to solve smaller instances of the same problem. It is often used as an alternative to loops.

const factorial = (n) => {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
};
console.log(factorial(5)); // 120

Function Composition

• The process of combining two or more functions to produce a new function. It allows for modular and reusable code.

const add = (a) => a + 1;
const multiply = (a) => a * 2;
const compose = (f, g) => (x) => f(g(x));
const addThenMultiply = compose(multiply, add);
console.log(addThenMultiply(5)); // 12

Currying and Partial Application

• Currying
  • Transforming a function with multiple arguments into a series of functions that each take a single argument.
  currying.js

  const add = (a) => (b) => a + b;
  const addFive = add(5);
  console.log(addFive(3)); // 8
  

  Copy to clipboard
• Partial Application
  • Fixing a number of arguments to a function, producing another function of smaller arity.
  partial-app.js

  const add = (a, b) => a + b;
  const addFive = add.bind(null, 5);
  console.log(addFive(3)); // 8
  

  Copy to clipboard

Advanced Concepts

Functors and Monads

• Functors
  • Objects that implement a map method, allowing functions to be applied over wrapped values.

const array = [1, 2, 3];
const doubled = array.map((x) => x * 2);
console.log(doubled); // [2, 4, 6]

• Monads
  • A type of functor that implements flatMap (or chain), allowing for the composition of functions that return wrapped values.

const maybe = (value) => ({
  map: (fn) => (value ? maybe(fn(value)) : maybe(null)),
  flatMap: (fn) => (value ? fn(value) : maybe(null)),
  getOrElse: (defaultValue) => (value ? value : defaultValue),
});
const result = maybe(5)
  .flatMap((x) => maybe(x + 1))
  .flatMap((x) => maybe(x * 2))
  .getOrElse(0);
console.log(result); // 12

Lazy Evaluation

• An evaluation strategy that delays the computation of expressions until their values are needed, improving performance and allowing for infinite data structures.

const lazyValue = (fn) => ({
  compute: () => fn(),
});
const value = lazyValue(() => {
  console.log('Computing...');
  return 5;
});
console.log('Before compute');
console.log(value.compute()); // Computing... 5

Closures

• Functions that capture and remember the environment in which they were created, allowing for data encapsulation and private variables.

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

Transducers

• Composable and efficient data transformation functions that decouple the process of transforming data from its consumption.

const map = (fn) => (reducer) => (acc, value) => reducer(acc, fn(value));
const filter = (predicate) => (reducer) => (acc, value) => predicate(value) ? reducer(acc, value) : acc;
const transduce = (transducer, reducer, init, array) => array.reduce(transducer(reducer), init);

const array = [1, 2, 3, 4];
const add = (a, b) => a + b;
const isEven = (x) => x % 2 === 0;
const double = (x) => x * 2;

const result = transduce(
  filter(isEven)(map(double)),
  add,
  0,
  array
);
console.log(result); // 12 (2 * 2 + 4 * 2)

Best Practice

Avoiding Side Effects

• Ensure functions do not modify external state or depend on it. This makes functions predictable and easier to test.

let globalVariable = 0;
const impureAdd = (a, b) => {
  globalVariable++;
  return a + b + globalVariable;
};
console.log(impureAdd(2, 3)); // Unpredictable result due to side effect

const pureAdd = (a, b) => a + b;
console.log(pureAdd(2, 3)); // 5 (predictable and no side effects)

Declarative Code

• Write declaratively
  • Focus on what to do rather than how to do it. Use expressions over statements to describe computations.

// Imperative approach
let total = 0;
for (let i = 0; i < 10; i++) {
  total += i;
}
console.log(total); // 45

// Declarative approach
const total = Array.from({ length: 10 }, (_, i) => i).reduce((sum, value) => sum + value, 0);
console.log(total); // 45

Readability and Maintainability

• Prioritize readability
  • Write clear and self-explanatory code. Use meaningful names and break down complex functions.

// Complex function
const processArray = (arr) => arr.filter((x) => x % 2 === 0).map((x) => x * 2).reduce((sum, x) => sum + x, 0);

// Readable function
const isEven = (x) => x % 2 === 0;
const double = (x) => x * 2;
const sum = (a, b) => a + b;
const processArray = (arr) => arr.filter(isEven).map(double).reduce(sum, 0);

FAQs