What do multiple arrow functions mean in JavaScript?

javascript

functional-programming

currying

arrow-functions

byNikita Barsukov·Sep 25, 2024

Multiple arrow functions in JavaScript represent a curried function. They are like shining pearls of functional programming, increasing code clarity and efficiency while decreasing verbosity.

Example:

// Define a multiplier function
const multiply = x => y => x * y; // Because x * y is too mainstream :D
// Create a doubler function
const double = multiply(2);
console.log(double(4)); // Outputs: 8, not bad for a doubler, huh?

Here, multiply is curried to create double, a specific multiplier by 2.

The Currying Phenomenon

In functional programming, currying is a technique used to translate the evaluation of a function that takes multiple arguments into the evaluation of a sequence of functions, each with a single argument; it's not just for madras lovers!

The Art of Arrow Functions

While arrow functions represent a more concise syntax for writing functions in JavaScript, they also have another major advantage: lexical this. Their ability to capture the this value of the enclosing context lends itself exceptionally well to React and other functional programming patterns.

Functional Programming with Arrow Functions

Functional programming (FP) has become increasingly popular in JavaScript, and arrow functions are a golden ticket to this magical world.

Function Composition

Function composition lies at the heart of FP. Arrow functions promote cleaner syntax for creating functions that take and return other functions, which is analogous to matryoshka dolls, but without the risk of losing the smallest one.

Implicit and Explicit Returns

Arrow functions simplify things further with implicit and explicit returns. A single expression arrow function implicitly returns the result without the need for an explicit return statement. Literal block bodies conversely need the return keyword.

Higher-Order Functions? No Problem

HOFs are functions that operate on other functions, by either taking them as arguments or returning them. JavaScript's arrow functions are syntactically suited to this essential FP aspect, like a coat tailored to fit perfectly.

Practical Usage Examples

Curried functions can feel abstract, but their practical implications are wide-ranging. Here are some scenarios where using curried functions streamline the logic flow:

Implementing Event Handlers

In React, instead of binding this or creating global variables, use curried functions in event handling:

const Button = ({ id }) => {
  // why use .bind(this) when you can curry? :)
  const handleClick = value => event => {
    console.log(`Button ${id} clicked with value ${value}`);
  };
  // Good old onClick, now with curried flavor
  return <button onClick={handleClick('relevantValue')}>Click me</button>
};

This approach results in clean and palatable code.

Constructing Complex Queries

Currying can help build SQL or NoSQL query parameters part by part, similar to assembling a Lego masterpiece, one block at a time.

const queryBuilder = table => criteria => order => `SELECT * FROM ${table} WHERE ${criteria} ORDER BY ${order}`;
const getUsersByName = queryBuilder('users')('name = "John Doe"'); 
console.log(getUsersByName('date_created DESC')); // 007 has nothing on this guy