Fundamentals of Functional Programming: Learn with JavaScript

Introduction

Functional Programming is a coding approach that treats computation as the evaluation of mathematical functions, avoiding state changes and focusing on creating maintainable, reusable, and robust code. It is well-suited for tasks like data transformation, mathematical computations, concurrent processing, asynchronous programming, and building code that is easy to maintain and test. In this article, we will explore the core concepts of functional programming in JavaScript, supported by practical code examples.

1. Pure Functions

Pure functions are the cornerstone of functional programming. They always produce the same output for the same input and have no side effects.

// Impure Function
let total = 0;

function impureAdd(num) {
  total += num;
  return total;
}

// Pure Function
function pureAdd(num1, num2) {
  return num1 + num2;
}

2. Higher-Order Functions

Higher-Order Functions are functions that take other functions as arguments or return functions as values. They enable powerful abstractions and composition in functional programming.

// Higher-Order Function
function multiplyBy(factor) {
  return function (num) {
    return num * factor;
  };
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5)); // Output: 10
console.log(triple(5)); // Output: 15

3. Immutability

Functional programming encourages immutable data structure to prevent unintended changes to the data.

// Mutable Approach
let mutableArray = [1, 2, 3];
mutableArray.push(4); // Changes the original array
console.log(mutableArray); // Output: [1, 2, 3, 4]

// Immutable Approach
let immutableArray = [1, 2, 3];
let newArray = [...immutableArray, 4];
console.log(immutableArray); // Output: [1, 2, 3]
console.log(newArray); // Output: [1, 2, 3, 4]

4. Recursion

Functional programming favors recursion over loops for iteration.

// Sum of an array using recursion
function sum(arr) {
  if (arr.length === 0) return 0;
  return arr[0] + sum(arr.slice(1));
}

const nums = [1, 2, 3, 4, 5];
console.log(sum(nums)) // Output: 15

5. Array Methods

JavaScript's Array methods like map, filter, and reduce are essential for functional programming.

// Using map to double each element in an array
const nums = [1, 2, 3, 4];
const doubled = nums.map((num) => num * 2);
console.log(doubles); // Output: [2, 4, 6, 8]

// Using filter to get even numbers
const evenNumbers = nums.filter((num) => num % 2 === 0);
console.log(evenNumbers) // Output: [2, 4]

// Using reduce to get the sum of an array
const sum = nums.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

Conclusion:

Functional programming is a powerful paradigm that promotes writing predictable, modular, and scalable code. By embracing pure functions, high-order functions, immutability, recursion, and array methods, you can leverage the full potential of functional programming in JavaScript. Start applying these concepts in your projects to write cleaner and more maintainable code.

Comments

[Sharmila kannan]

Hi Ryosuke! Just I came across the functional programming there is a article about this was very useful to me .thank you!!

[Ryosuke Yano]

Thank you too for your comment! I hope this article will be helpful for you.