ES6箭头函数返回值差异解析：func1与func2的区别及应用

Hey there! Let's break down these two arrow functions clearly—they might look similar at first glance, but they behave totally differently, and each has its own use cases. First, a quick correction: your test result saying func2(1) returns 1 is probably a mix-up! When you call func2(1), you're actually getting a function (not a number) that's waiting for the y parameter. Call func2(1)(1) and you'll get 3, just like func1(1,1).

Core Behavior #

• func1 is a standard two-parameter arrow function: It takes both x and y as inputs right away, runs the calculation x * y * 3, and returns the numeric result immediately. That's why func1(1,1) gives you 3—it's a straightforward, single-step operation.
• func2 is a curried function: It's a function that takes one parameter (x) and returns another arrow function that takes the second parameter (y). The inner function "remembers" the x value from the outer scope, so when you finally pass y, it uses both values to compute the result. Here's how it unwinds:

  func2(1) // Returns: y => 1 * y * 3 (a function waiting for y)
  func2(1)(1) // Calls that inner function with y=1, returns 1*1*3=3
  

Key Advantages of Each #

Advantages of func1 #

• Dead simple: No nested layers, easy to read and debug for basic calculations where you have both parameters available upfront.
• Minimal overhead: It's a single function call, so there's no extra function creation overhead unless you need it.

Advantages of func2 (Curried Function) #

• Partial application: You can "lock in" one parameter and reuse the resulting function for different values of the second parameter. This is super useful for repetitive tasks. For example:

  // Create a function where x is fixed to 5
  const multiplyBy5Then3 = func2(5);
  multiplyBy5Then3(2); // 5*2*3 = 30
  multiplyBy5Then3(4); // 5*4*3 = 60
  

• Flexible function composition: Curried functions play beautifully with functional programming patterns. You can combine them with other functions more cleanly than multi-parameter functions.
• Deferred parameter input: If you don't have both parameters available at the same time (e.g., waiting for user input or async data for y), you can pass x first and save the inner function to use later.

When to Use func2? #

Reach for curried functions like func2 when:

• You need to reuse a function with some fixed parameters (partial application, as shown above).
• You're working in a functional programming style (e.g., writing composable utilities, or using libraries that favor curried functions).
• You need to split up parameter input across different parts of your code (e.g., one parameter comes from an API call, the other from user input).

Practical Demo of func2 #

Let's put this into a relatable scenario. Suppose you're building a tool to calculate shipping costs, where the base rate is multiplied by the package weight and a fixed factor (3, like your example). You can use func2 to create reusable calculators for different base rates:

const calculateShipping = baseRate => weight => baseRate * weight * 3;

// Create a calculator for a base rate of $2
const standardShipping = calculateShipping(2);
console.log(standardShipping(5)); // 2*5*3 = $30 (cost for 5lb package)
console.log(standardShipping(10)); // 2*10*3 = $60 (cost for 10lb package)

// Create another calculator for expedited shipping (base rate $4)
const expeditedShipping = calculateShipping(4);
console.log(expeditedShipping(5)); // 4*5*3 = $60

You can also use it directly without saving the intermediate function if you have both parameters ready:

console.log(calculateShipping(3)(7)); // 3*7*3 = $63

内容的提问来源于stack exchange，提问作者Keith Bonarrigo