DEV Community

Cover image for Fundamentals of Functional Programming: Learn with JavaScript
Ryosuke Yano
Ryosuke Yano

Posted on

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.

Top comments (2)

Collapse
 
sharmi2020 profile image
Sharmila kannan

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

Collapse
 
ryosuke profile image
Ryosuke Yano

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