Functional Programming in JavaScript: The Basics
FP is about pure functions, immutability, and composition. Here is how JS supports it.
Functional Programming in JavaScript: The Basics
Functional programming (FP) is a style of programming based on pure functions, immutability, and composition. JavaScript supports FP because functions are first-class citizens.
Core Principles
- Pure functions: same input, same output, no side effects.
- Immutability: do not mutate data; return new copies.
- Function composition: chain small functions into pipelines.
- First-class functions: functions are values.
- Higher-order functions: functions take/return functions.
Pure Functions
// pure: same input, same output, no side effects function add(a, b) { return a + b; } // impure: modifies external state let total = 0; function addToTotal(n) { total += n; return total; } `` Pure functions are easier to test, debug, and reason about. ### Immutability ```js // bad: mutates the array arr.push(4); // good: returns a new array const newArr = [...arr, 4]; // bad: mutates the object obj.x = 2; // good: returns a new object const newObj = { ...obj, x: 2 }; `` Immutable data is easier to track and prevents bugs from shared mutation. ### Composition ```js const addOne = (n) => n + 1; const double = (n) => n * 2; const addOneThenDouble = (n) => double(addOne(n)); addOneThenDouble(5); // 12 `` Or with a `compose` utility: ```js const compose = (f, g) => (x) => f(g(x)); const result = compose(double, addOne)(5); // 12 `` ### Declarative vs Imperative ```js // imperative: how to do it const result = []; for (let i = 0; i < arr.length; i++) { if (arr[i] > 1) result.push(arr[i] * 2); } // declarative: what to do const result = arr.filter((n) => n > 1).map((n) => n * 2); `` FP is declarative: you describe what you want, not how to do it. ### The Takeaway Functional programming in JS is based on pure functions (no side effects), immutability (return new copies, do not mutate), composition (chain small functions), and declarative style (what, not how). Use `map`/`filter`/`reduce` and spread/ `Object.assign` for immutability.
A style based on pure functions (no side effects), immutability (return new copies, do not mutate), function composition (chain small functions), and declarative style (describe what, not how). JS supports it because functions are first-class.
A function that given the same input always returns the same output and has no side effects (does not modify external state, does not read mutable external state). Pure functions are easy to test and reason about.
Use spread to create new arrays/objects instead of mutating: [...arr, 4] instead of arr.push(4); { ...obj, x: 2 } instead of obj.x = 2. Use libraries like Immer or Immutable.js for complex state.
Chaining small functions into a pipeline. compose(f, g)(x) = f(g(x)). Each function's output is the next function's input. This lets you build complex behavior from simple, reusable functions.
Imperative describes how to do it (loops, mutations). Declarative describes what to do (map, filter, reduce). FP is declarative: arr.filter(n => n > 1).map(n => n * 2) instead of a for loop with push.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.

