JavaScript Partial Application and Currying

JavaScript is a versatile language that supports a wide range of programming paradigms, including functional programming. Two key concepts in functional programming are Partial Application and Currying. These techniques allow you to create more flexible and reusable functions by breaking down complex operations into smaller, composable pieces.

Introduction

Partial Application and Currying are two powerful functional programming techniques that allow for greater flexibility and reusability in JavaScript. These concepts are closely related but distinct, and understanding them can significantly enhance your ability to write clean, modular, and efficient code.

Partial Application

What is Partial Application?

Partial Application is the process of fixing a number of arguments to a function, producing another function of smaller arity (number of arguments). In other words, it's a way to create a new function by pre-filling some of the arguments to the original function.

Implementing Partial Application

Let's look at how we can implement partial application in JavaScript:

function partialApply(fn, ...args) {
  return function(...moreArgs) {
    return fn(...args, ...moreArgs);
  };
}

// Example usage
function add(a, b, c) {
  return a + b + c;
}

const add5 = partialApply(add, 5);
console.log(add5(10, 15)); // Output: 30

const add5and10 = partialApply(add, 5, 10);
console.log(add5and10(15)); // Output: 30

In this example, partialApply is a higher-order function that takes a function and some initial arguments, and returns a new function. This new function, when called, combines the initial arguments with the new arguments and calls the original function.

Use Cases for Partial Application

1. Configuration: Partial application is useful for creating configured versions of more generic functions.

function fetchData(baseUrl, endpoint, id) {
  return fetch(`${baseUrl}/${endpoint}/${id}`);
}

const fetchFromApi = partialApply(fetchData, 'https://api.example.com');
const fetchUser = fetchFromApi('users');

fetchUser(123).then(response => console.log(response));

2. Event Handling: It's often used in event handling to pass additional data to the handler.

function handleClick(userId, event) {
  console.log(`User ${userId} clicked`);
}

element.addEventListener('click', partialApply(handleClick, 123));

Currying

What is Currying?

Currying is the technique of translating a function that takes multiple arguments into a sequence of functions, each taking a single argument. It's named after mathematician Haskell Curry.

Implementing Currying

Here's a basic implementation of currying in JavaScript:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

// Example usage
function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // Output: 6
console.log(curriedAdd(1, 2)(3)); // Output: 6
console.log(curriedAdd(1)(2, 3)); // Output: 6

In this implementation, curry returns a new function that keeps collecting arguments until it has enough to call the original function.

Use Cases for Currying

1. Function Composition: Currying makes it easier to compose functions.

const add = curry((a, b) => a + b);
const multiply = curry((a, b) => a * b);

const addThenMultiply = x => multiply(2)(add(x)(3));

console.log(addThenMultiply(5)); // Output: 16

2. Creating Specialized Functions: Currying allows you to create more specialized functions from more generalized ones.

const filter = curry((predicate, array) => array.filter(predicate));

const filterEvens = filter(x => x % 2 === 0);

console.log(filterEvens([1, 2, 3, 4, 5, 6])); // Output: [2, 4, 6]

Differences Between Partial Application and Currying

While both partial application and currying are techniques for working with functions, they have some key differences:

1. Number of Arguments: Partial application produces a function with fewer arguments, while currying always produces a chain of unary (single-argument) functions.
2. Flexibility: Partial application allows you to fix any number of arguments, while currying typically works from left to right, one argument at a time.
3. Result: Partial application returns a function that waits for the remaining arguments, while currying returns a series of functions, each waiting for the next argument.

Advanced Techniques

1. Placeholder Currying: This allows for more flexible argument ordering.

const _ = Symbol('placeholder');

function advancedCurry(fn) {
  return function curried(...args) {
    const complete = args.length >= fn.length && !args.slice(0, fn.length).includes(_);
    if (complete) return fn.apply(this, args);
    return function(...newArgs) {
      const res = args.map(arg => arg === _ ? newArgs.shift() : arg);
      return curried.apply(this, res.concat(newArgs));
    };
  };
}

const multiply = advancedCurry((a, b, c) => a * b * c);
console.log(multiply(_, 2)(_, 4)(3)); // Output: 24

2. Partial Application with Placeholders: Similar to placeholder currying, but for partial application.

function partialWithPlaceholders(fn, ...args) {
  return function(...moreArgs) {
    const newArgs = args.map(arg => arg === _ ? moreArgs.shift() : arg);
    return fn.apply(this, newArgs.concat(moreArgs));
  };
}

const greet = (greeting, title, name) => `${greeting}, ${title} ${name}!`;
const greetMister = partialWithPlaceholders(greet, 'Hello', 'Mr.', _);
console.log(greetMister('Johnson')); // Output: Hello, Mr. Johnson!

Performance Considerations

While partial application and currying can lead to more flexible and reusable code, they can also introduce performance overhead due to the creation of additional function closures. In performance-critical sections of your code, it's important to profile and compare curried/partially applied functions with their non-curried counterparts.

const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);

console.time('Normal function');
for (let i = 0; i < 1000000; i++) {
  add(1, 2, 3);
}
console.timeEnd('Normal function');

console.time('Curried function');
for (let i = 0; i < 1000000; i++) {
  curriedAdd(1)(2)(3);
}
console.timeEnd('Curried function');

Best Practices

1. Use Descriptive Names: When creating partially applied or curried functions, use names that clearly describe their specialized purpose.
2. Consider Readability: While these techniques can lead to concise code, ensure that the resulting code is still readable and maintainable.
3. Document Your Functions: Clearly document the expected arguments and behavior of your partially applied or curried functions.
4. Use TypeScript or JSDoc: For better type checking and autocompletion, consider using TypeScript or JSDoc annotations.
5. Be Mindful of 'this' Context: Remember that arrow functions don't have their own 'this' context, which can be important when using these techniques with methods.

Conclusion

Partial Application and Currying are powerful techniques in JavaScript that can lead to more flexible, reusable, and expressive code. By understanding these concepts and applying them judiciously, you can write cleaner, more modular JavaScript. However, it's important to balance their use with considerations for code readability and performance. As with any advanced technique, the key is to use them where they provide clear benefits to your codebase.