Magic of Function returning Function in javascript

What curry do you want for dinner

Let’s start a restaurant in India that makes curries. Unlike other places we have 3 kinds of people in India.

1. Non veg : it has everything except maybe beef
2. Veg : same as non veg but don’t have meat
3. Jains : same as veg but don’t have onion, garlic

Let create a function to make curry

function makeCurry(style, …items) {
  toppings = items.join(“,”);
  return “Making “ + style + “ style curry with “ + toppings ;
};
console.log(makeCurry(‘indian’,’onion’,’garlic’,’mushroom’));
//Prints "Making indian style curry with onion,garlic,mushroom​​​​​"

...items is the es6 rest/spread syntax. It makes all other args as a array.

Before we proceed you need to know one thing about several ordinary indian restaurant. You order any dish of a particular style it tastes same albeit the key ingredient changes. Like the difference between Chicken 65 and Mushroom 65 is that in one Chicken is replaced with Mushroom. Also the difference between Mushroom 65 and Mushroom chilly is that chilly is added to first one. This is done to cut cost i guess.

Now i am starting such a restaurant, so lets make a chicken curry, veg curry and jain curry.

jainCurry = makeCurry(‘indian’,’tomato’);
vegCurry = makeCurry(‘indian’,’tomato’, ‘onion’,’garlic’);
chickenCurry = makeCurry(‘indian’,’tomato’, ‘onion’,’garlic’, ‘chicken’);

Done. 3 orders down. Now if you notice each one is a subset of the previous. So to speed up the orders, what if i keep jainCurry always ready and then add the extra as needed. Sound simple right ? Lets get coding on my profit making idea.

Pause for a moment and think how to achieve it. Done? Procede Further

You could create 3 functions makeJainCurry, makeVegCurry, makeChickenCurry with each one calling the other one. This a decent approach but we can polish it a bit.

jainCurry = makeCurry.bind(null, ‘chinese’, ‘tomato’);
jainOrder = jainCurry(); //Chinese is the style and tomato is items
vegCurry = jainCurry.bind(null, ‘onion’, ‘garlic’);
vegOrder = vegCurry(); //All are items as style is already taken above
chickenCurry = vegCurry.bind(null, ‘chicken’);
chickenOrder = chickenCurry();

Here we created 3 functions but without explicitly creating one. This is function returning another function and as you can see it’s a very powerful thing. To understand this you need to first understand bind

In jainCurry the first argument style is set as Chinese and tomato is taken as an item. By the time we create vegCurry all args of makeCurry are set. But since items is a rest/spread array everything else is taken as part of that. Same goes for chickenCurry.

We have 3 items ready in our menu. Chicken 65, Veg 65, Jain 65. How do we create Chicken, Veg and Jain Chilly. As i said earlier only difference is we add chilly. Again You can use bind on the 3 curry functions.

JainChillyCurry = jainCurry.bind(null, ‘chilly’);

But lets do things a bit better. Lets create a function that adds chilly. Less duplicate code is always better.

function makeItSpicy(func) {
  return func.bind(null, ‘chilly’);
}
JainChillyCurry = makeItSpicy(JainCurry);

This is another form of partial functions. You can use this form in many other languages except the bind part which is a js specfic thing. A function returning new function.

Want us to write more

Hit claps if you liked it. It will encourage us to write more. Follow, for more posts on JavaScript. Comment below if you have any other suggestions or inputs. And wherever you are go, have an Indian Curry today.