Introduction to Functional Programming

What is Functional Programming?

Functional Programming (FP) is a programming paradigm that treats computation as the evaluation of mathematical functions. Instead of changing state and mutating data, FP emphasizes immutability, pure functions, and declarative code.

JavaScript is a multi-paradigm language that supports functional programming alongside object-oriented and imperative styles. Modern JavaScript and libraries like React have embraced FP concepts, making it essential for frontend developers.

Imperative vs Declarative

The key mindset shift in FP is moving from imperative (how to do it) to declarative (what to do) programming.

// Imperative: HOW to do it (step by step)
const numbers = [1, 2, 3, 4, 5];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}
console.log(doubled); // [2, 4, 6, 8, 10]

// Declarative/Functional: WHAT to do
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// The declarative version:
// - Is shorter and more readable
// - Expresses intent clearly
// - Doesn't mutate external state
// - Returns a new array

Functions as First-Class Citizens

In JavaScript, functions are first-class citizens, meaning they can be:

// 1. Assigned to variables
const greet = function(name) {
  return `Hello, ${name}!`;
};

// 2. Passed as arguments
function executeCallback(callback, value) {
  return callback(value);
}
executeCallback(greet, 'World'); // "Hello, World!"

// 3. Returned from functions
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
double(5); // 10
triple(5); // 15

// 4. Stored in data structures
const operations = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
};
operations.add(2, 3); // 5

Why Functional Programming?

FP in Modern JavaScript

// Array methods embrace FP
const users = [
  { name: 'Alice', age: 25, active: true },
  { name: 'Bob', age: 30, active: false },
  { name: 'Carol', age: 35, active: true },
];

// Chain declarative operations
const result = users
  .filter(user => user.active)        // Keep active users
  .map(user => user.name)             // Extract names
  .map(name => name.toUpperCase());   // Transform to uppercase

console.log(result); // ['ALICE', 'CAROL']

// Each method:
// - Returns a new array (immutability)
// - Takes a function as argument (higher-order)
// - Describes what, not how (declarative)

FP in React

// React components are essentially functions
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Same input (props) → Same output (JSX)
// This is a pure function!

// useState embraces immutability
function Counter() {
  const [count, setCount] = useState(0);
  
  // Don't mutate state directly
  // setCount(count++) ❌
  
  // Create new state instead
  // setCount(count + 1) ✅
  // setCount(prev => prev + 1) ✅
  
  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Count: {count}
    </button>
  );
}

// useReducer is pure function: (state, action) => newState
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

📖 MDN: First-Class Functions →

FP vs OOP