Fundamentals of Functional Programming: Learn with JavaScript

ryosuke

Ryosuke Yano

Posted on August 5, 2023

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

šŸ’– šŸ’Ŗ šŸ™… šŸš©
ryosuke
Ryosuke Yano

Posted on August 5, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related