Functional Programming in JavaScript

Functional Programming (FP) is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data.

🎯 Core Concepts

✨ Pure Functions

Same input always produces same output
No side effects (don't modify external state)
Easier to test and reason about
Referentially transparent

🛡️ Immutability

Data cannot be changed after creation
Create new data instead of modifying
Prevents unintended side effects
Thread-safe and predictable

🔗 Function Composition

Combine simple functions to build complex ones
Small, focused, reusable functions
Declarative rather than imperative
Enables code reuse

🌀 Recursion

Functions that call themselves
Alternative to loops
Natural for tree/graph structures
Requires base case to prevent infinite loops

🔧 Examples

JavaScript Editor

// Immutability: Don't change data, create new data

// MUTABLE approach (avoid in functional programming)
let numbers = [1, 2, 3, 4, 5];

function addElementMutable(arr, element) {
  arr.push(element); // Modifies original array
  return arr;
}

let mutableResult = addElementMutable(numbers, 6);
console.log("Original array:", numbers); // Changed!
console.log("Result:", mutableResult);

// IMMUTABLE approach (preferred)
let numbers2 = [1, 2, 3, 4, 5];

function addElementImmutable(arr, element) {
  return [...arr, element]; // Returns new array
}

let immutableResult = addElementImmutable(numbers2, 6);
console.log("\nOriginal array:", numbers2); // Unchanged!
console.log("Result:", immutableResult);

// Working with objects immutably
let user = { name: "Bob", age: 30, skills: ["JavaScript"] };

// Add new skill immutably
let updatedUser = {
  ...user,
  skills: [...user.skills, "React"], // New array
  level: "Intermediate" // Add new property
};

console.log("\nOriginal user:", user);
console.log("Updated user:", updatedUser);

JavaScript Editor

// Function Composition: Combining functions

// Simple functions
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const square = x => x * x;
const double = x => x * 2;

// Manual composition
let result1 = double(square(add(2, 3)));
console.log("Manual composition:", result1); // 50

// Create compose function (right-to-left)
function compose(...fns) {
  return function(initialValue) {
    return fns.reduceRight((value, fn) => fn(value), initialValue);
  };
}

// Create pipe function (left-to-right, often more readable)
function pipe(...fns) {
  return function(initialValue) {
    return fns.reduce((value, fn) => fn(value), initialValue);
  };
}

// Create reusable pipelines
const addThenSquareThenDouble = pipe(
  x => add(x, 3),    // Add 3
  square,           // Square result
  double           // Double result
);

console.log("Pipeline (5):", addThenSquareThenDouble(5)); // 128

// More complex example
const users = [
  { name: "Alice", age: 25, active: true },
  { name: "Bob", age: 30, active: false },
  { name: "Charlie", age: 35, active: true },
  { name: "Diana", age: 28, active: true }
];

// Small, focused functions
const filterActive = users => users.filter(u => u.active);
const filterByAge = minAge => users => users.filter(u => u.age > minAge);
const getNames = users => users.map(u => u.name);
const sortNames = names => names.sort();

// Compose pipeline
const getActiveOver25 = pipe(
  filterActive,
  filterByAge(25),
  getNames,
  sortNames
);

console.log("\nActive users over 25:", getActiveOver25(users));

JavaScript Editor

// Recursion: Functions that call themselves

// Iterative approach (with loops)
function factorialIterative(n) {
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}

// Recursive approach (functional style)
function factorialRecursive(n) {
  // Base case
  if (n <= 1) return 1;
  // Recursive case
  return n * factorialRecursive(n - 1);
}

console.log("Factorial iterative (5):", factorialIterative(5)); // 120
console.log("Factorial recursive (5):", factorialRecursive(5)); // 120

// Recursive tree traversal
const fileSystem = {
  name: "root",
  type: "directory",
  children: [
    {
      name: "documents",
      type: "directory",
      children: [
        { name: "resume.pdf", type: "file", size: 100 },
        { name: "letter.docx", type: "file", size: 50 }
      ]
    },
    {
      name: "photos",
      type: "directory",
      children: [
        { name: "vacation.jpg", type: "file", size: 200 },
        {
          name: "family",
          type: "directory",
          children: [
            { name: "birthday.png", type: "file", size: 150 }
          ]
        }
      ]
    }
  ]
};

console.log("\nFile System Structure:");
listFiles(fileSystem);

💪 Practice Exercise

JavaScript Editor

// Practice Functional Programming

// Task 1: Create pure functions
function calculateTotal(products) {
  // Calculate total price without modifying input
  // Your code here
}

// Task 2: Implement map and filter using reduce
function myMap(arr, fn) {
  // Implement map using reduce
  // Your code here
}

function myFilter(arr, fn) {
  // Implement filter using reduce
  // Your code here
}

// Task 3: Recursive Fibonacci with memoization
function createMemoizedFibonacci() {
  const cache = {};
  
  return function fibonacci(n) {
    // Implement memoized fibonacci
    // Your code here
  };
}

// Task 4: Function composition challenge
const data = [
  { value: 10, active: true },
  { value: 20, active: false },
  { value: 30, active: true },
  { value: 40, active: true },
  { value: 50, active: false }
];

// Create a pipeline that:
// 1. Filters active items
// 2. Extracts values
// 3. Doubles each value
// 4. Calculates sum

const processData = pipe(
  // Your code here
);

console.log("Result:", processData(data)); // Should be 160

🎖️ FP Benefits

🧪

Easier Testing

Pure functions are predictable and testable

🔍

Better Debugging

No side effects to track

🧩

Code Reuse

Composable functions are highly reusable

⚡

Concurrency

Immutable data is thread-safe

← Higher Order Functions Currying →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Functional Programming in JavaScript

🎯 Core Concepts

✨ Pure Functions

🛡️ Immutability

🔗 Function Composition

🌀 Recursion

🔧 Examples

💪 Practice Exercise

🎖️ FP Benefits

Easier Testing

Better Debugging

Code Reuse

Concurrency

Follow Us

Our Tools

Our Company

Special Tools

JavaScript Tutorial

Functional Programming in JavaScript

🎯 Core Concepts

✨ Pure Functions

🛡️ Immutability

🔗 Function Composition

🌀 Recursion

🔧 Examples

Example 1: Pure Functions

Example 2: Immutability

Example 3: Function Composition

Example 4: Recursion

💪 Practice Exercise

🎖️ FP Benefits

Easier Testing

Better Debugging

Code Reuse

Concurrency

Follow Us

Our Tools

Our Company

Special Tools