Functional Programming Concepts

40 min

Functional Programming (FP) is a paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. JavaScript, being multi-paradigm, supports FP extremely well.

**Pure Functions** are the core: they depend only on their inputs and produce no side effects (like modifying global variables or DOM). This makes them predictable and easy to test.

**Higher-Order Functions** are functions that take other functions as arguments or return them. This is the basis for callbacks, event handlers, and array methods like `.map()`.

**Currying** and **Composition** are advanced techniques. Currying transforms a function with multiple arguments into a sequence of functions. Composition combines simple functions to build complex ones.

Key Concepts

Pure Functions & Side Effects.
Immutability.
Higher-Order Functions.
Function Composition.
Currying and Partial Application.

Learning Objectives

Master

Writing pure functions
Avoiding side effects in logic
Composing functions with `pipe` or `compose`
Creating custom higher-order functions

Develop

Declarative coding style
Testability and predictability
State management architecture (Redux-like)

Tips

If a function doesn't return a value, it probably has a side effect.
Use `const` and spread operators to enforce immutability.
Keep functions small and focused on doing one thing well.
Name your higher-order functions clearly (e.g., `createValidator`, `withLogging`).

Common Pitfalls

Mutating arguments passed to a function (pass-by-reference trap).
Over-engineering with complex composition when a simple loop would be clearer.
Confusing `this` context inside functional patterns (FP usually avoids `this`).
Thinking FP means 'no variables' (it means no *mutable* variables).

Summary

FP promotes predictable code.
Pure functions are easy to test.
Immutability prevents bugs.
Composition builds complex logic.

Exercise

Create a higher-order function that takes a function and returns a new function with logging.

function withLogging(fn) {
  return function(...args) {
    console.log('Calling function with args:', args);
    const result = fn(...args);
    console.log('Function returned:', result);
    return result;
  };
}

const addWithLogging = withLogging((a, b) => a + b);
addWithLogging(2, 3);

Exercise Tips

Try creating a memoization higher-order function to cache function results.
Create a function that retries failed operations: function withRetry(fn, maxAttempts).
Experiment with function composition: const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
Create a curried function: const add = (a) => (b) => a + b;

Functional Programming Concepts