preface

This article mainly from the perspective of 3W (what, how, why) to explain what is the function of Currization, and how to use three lines of code to achieve add(1)(2)(3) this very common interview questions.

What is a function Curryization?

Curry is the concept of functional programming. Curry’s concept is simple: Call a function with just a few arguments and let it return a function that handles the rest.

To put it simply: each time a function is called, it takes only a few arguments and returns a function until all the arguments are passed.

For example 🌰 change the following function that takes two arguments to a function that takes one.

const add = (x, y) = > x + y;
add(1.2);
Copy the code

Change to a function that takes one argument at a time

const add = x= > y= > x + y;
add(1) (2);
Copy the code

Currification, immutable data types, and pure functions are all concepts in functional programming. These concepts are common in React because React involves a lot of functional programming concepts. To learn more about functional programming, see the JS Functional Programming Guide

add(1)(2)(3)

We could try adding (1), (2), (3) ourselves.

const add = x= > y= > z= > x + y + z;
console.log(add(1) (2) (3));
Copy the code

It doesn’t seem that difficult, but what if the interviewer asks you to implement an Add function that supports both of these uses

add(1.2.3);
add(1.2) (3);
add(1) (2.3);
Copy the code

If we still follow the above thinking, do we have to write many kinds of…

We could, of course, implement a utility function of our own to generate a Currified function.

The main idea is to determine whether the number of parameters (args. Length) of the current function is greater than or equal to the number of parameters required by the original function (fn.length), if so, then execute the current function; If it is less than, a function is returned.

const curry = (fn, ... args) = > 
    // The number of arguments to a function can be accessed directly from the.length attribute of the function number
    args.length >= fn.length // This judgment is critical!!
    // If the number of arguments passed to fn is greater than or equal to the number of arguments in the original function, the function is executed directly? fn(... args)/** * If the number of arguments passed in is less than the number of arguments in the original function fn *, the current function continues to be currized, returning a function that takes all arguments (current and remaining arguments) */
    : (. _args) = >curry(fn, ... args, ... _args);function add1(x, y, z) {
    return x + y + z;
}
const add = curry(add1);
console.log(add(1.2.3));
console.log(add(1) (2) (3));
console.log(add(1.2) (3));
console.log(add(1) (2.3));
Copy the code

Ramda

All functions in Ramda support Currization. That is, all multi-argument functions can use single-argument functions by default.

Let’s take the example above

const addThreeNumbers = (x, y, z) = > x + y + z;
const curriedAddaddThreeNumbers = R.curry(addThreeNumbers);
const f = curriedAddaddThreeNumbers(1.2);
console.log(f(3));
Copy the code

Lodash also offers currified functions, so how does it differ from Ramda

Lodash is a powerful library of utility functions, such as throttling, stabilization, deep copy, and so on, that we can use directly once we introduce LoDash. Ramda is a functional programming style library.

What does corrification do

There are three main functions: parameter reuse, early return, and delayed execution

Parameter multiplexing: take the function f above as an example. As long as you pass in a parameter z and execute it, the calculation result is 1 + 2 + z, and the two parameters 1 and 2 can be directly multiplexed.

Early return and delayed execution are also easy to understand, because each time a function is called, it takes only a few arguments and returns a function (early return) until all the arguments (delayed execution) have been passed.

reference

  • Ramda
  • Currying in JS
  • Functional Programming in the React World