Understanding currying in javascript

Simply speaking, currying in javascript enhances the reusability of functional code with multiple arguments. It is used to transform your function to one or more arguments. Let us understand with one simple example first.

Normal javascript (not using currying):

/**
 * Webkul Software.
 *
 * @category Webkul
 * @package JavaScript Concepts
 * @author Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
var set = function (header, site) {
  console.log(header + ' ' + site);
}

set('visit', 'webkul.com'); // visit webkul.com
set('visit', 'store.webkul.com'); // visit store.webkul.com

Now using currying:

/**
 * Webkul Software.
 *
 * @category Webkul
 * @package JavaScript Concepts
 * @author Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
var set = function (header) {
  return function (site) {
    console.log(header + ' ' + site);
  }
}

var visit = set('visit');
visit('webkul.com'); // visit webkul.com
visit('store.webkul.com'); // visit store.webkul.com

Here, in this example, we have passed an argument first and using that variable for passing the further argument.

Now, I’m providing a better example in which currying is used to a bit more extent and it will also help you understand it better. Here, I’m providing an example for the formatting of currency.

First, I’m providing an example without using currying.

/**
 * Webkul Software.
 *
 * @category Webkul
 * @package JavaScript Concepts
 * @author Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
var format = function (symbol_place, currency, decimal, value) {
  if (!decimal) {
    decimal = 2; // if decimal in not provided
  }
  if (symbol_place == 'left') {
    return currency + parseFloat(value).toFixed(decimal);
  } else {
    return parseFloat(value).toFixed(decimal) + currency;
  }
}

var currency_format1 = format('left', '$', 2, '50.4343');
console.log(currency_format1); // $50.43
var currency_format2 = format('left', '$', 4, '50.4343');
console.log(currency_format2); // $50.4343
var currency_format3 = format('left', '£', 2, '50.4343');
console.log(currency_format3); // £50.43
var currency_format4 = format('right', '€', 2, '50.4343');
console.log(currency_format4); // 50.43€

Now, the same has been done after applying currying.

/**
 * Webkul Software.
 *
 * @category Webkul
 * @package JavaScript Concepts
 * @author Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
var format = function (symbol_place) {
  return function (currency) {
    return function (decimal) {
      return function (value) {
        if (!decimal) {
          decimal = 2; // if decimal is not provided
        }
        if (symbol_place == 'left') {
          return currency + parseFloat(value).toFixed(decimal);
        } else {
          return parseFloat(value).toFixed(decimal) + currency;
        }
      }
    }
  }
}

var currency_left = format('left');
var currency_right = format('right');

var usd = currency_left('$');
var pound = currency_left('£');

var usd_decimal2 = usd(2);
var usd_decimal4 = usd(4);
var pound_decimal2 = pound(2);

console.log(usd_decimal2('50.4343')); // $50.43
console.log(usd_decimal4('50.4343')); // $50.4343
console.log(pound_decimal2('50.4343')); // £50.43

var currency_format = format('right')('€')()('50.4343');// we can pass empty arguments as well
console.log(currency_format); // 50.43€

Here, you have noted that we have made a better use of functional code by using it for multiple cases. You can do a lot more with the currying. Hope, this blog helps you to learn something about currying.