How Does Currying Work with Multiple Arrow Functions in JavaScript?

Currying with Multiple Arrow Functions in JavaScript

You may encounter code like this in React applications:

handleChange = field => e => {
  e.preventDefault();
  /// Do something here
}

This puzzling syntax represents what's known as a curried function.

What is Currying?

Currying is a technique that allows a function to be defined in parts. For example:

const add = x => y => x + y

This is equivalent to the traditional function:

const add = function (x) {
  return function (y) {
    return x + y
  }
}

Focusing on the Return Value

In arrow functions, the return value is represented as:

const f = someParam => returnValue

Therefore, our add function returns a function:

const add = x => (y => x + y)

Calling the function:

add(2)(3)  // returns 5

This occurs because the outer function call returns the inner function.

Understanding the handleChange Code

Applying this to the handleChange code:

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
  };
};

Because arrow functions preserve context, it effectively looks like:

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
  }.bind(this)
}.bind(this)

This code creates a function for a specific field. In React, it's used to set up listeners for various input fields without duplicating code.

Multiple Arrow Functions

Multiple arrow functions can be sequenced, allowing for surprising functionality like this:

const $ = x => k =>
  $ (k(x))

This curried function, called $ (as a pun on Lisp syntax), appears to accept an arbitrary number of arguments, abstracting the concept of arity.

The above is the detailed content of How Does Currying Work with Multiple Arrow Functions in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!