JavaScript – It's Study Time

This is a very frequently asked question in interviews to write a program for following problem.

The question goes something like this: Write a program to find out the angle between the hour hand and minute hand at a given time when two inputs, Hour and Minute are given.

Lets try to understand the problem first before diving into writing the solution.

We know that a complete rotation on the clock is 360 degrees. So for every hour the hour hand will move by 360/12 degreess

Similarly for every 60 minutes the minute hand will move 360 degree. So, for every minute it will move 360/60 degrees.

This looks very simiple till now but when the minute hand moves the hour hand moves too. So for every minute the hour hand moves a little too by 360/12 ÷ 60 .

As we have all the details lets create the program in our favorite language JavaScript.

const claculateClockHandAngle = (hour, minute) => {
    const MINUTE_HAND_ANGLE_PER_MINUTE = 6, //360/60
        HOUR_HAND_ANGLE_PER_HOUR = 30, //360/12
        HOUR_HAND_ANGLE_PER_MINUTE = 0.5; //30/60

    const calculatedMinuteHandAngle = minute * MINUTE_HAND_ANGLE_PER_MINUTE;
    const claculatedHourHandAngle = hour * HOUR_HAND_ANGLE_PER_HOUR + minute * HOUR_HAND_ANGLE_PER_MINUTE;

    const angleBetweenHands = Math.abs(claculatedHourHandAngle - calculatedMinuteHandAngle);
    
    //return only acute angle
    return Math.min(360-angleBetweenHands, angleBetweenHands);
};

Currying converts a multi argument function to sequence of function calls with single arguments. Like below

//In normal function syntax

const multiply = function (a, b){
    return a * b;
};
const output = multiply(2, 3);
console.log(output);

//In Arrow function syntax

const multiply = (a, b) => a * b;

const output = multiply(2, 3);
console.log(output);

//In normal function syntax

cont multiply = function (a) {
    return function (b) {
        return a * b;
    };
};

const output = multiply(2)(3);
console.log(output);
// 6

//In Arrow function syntax

const multiply = a => b => a * b;

const output = multiply(2)(3);
console.log(output);
// 6

To the naked eye currying looks like converting a very simple function like in the first function to a little complex function unnecessarily. But there are usecases which will make this very useful.

Lets dive in. Lets say, I have a function requirement with three arguments. And the first argument remains same for few calls. In that case, I will have to pass the same argument again and again for each call. Currying can be a great way to avoid that.

Lets take the example of logging a series of messages into console with time after an even is fired. Obviously I would like to log the same time for all the logging in the series.

Lets code that

const logData = time => id => message => {
    console.log(`Time is ${time} and data is ${id} and ${message}`);
};

const logDataWithTime = logData(new Date());

logDataWithTime(1234)('Dummy Message 1');
logDataWithTime(1235)('Dummy Message 2');
logDataWithTime(1236)('Dummy Message 3');

/*
Time is Wed Jan 05 2022 06:25:49 GMT+0530 (India Standard Time) and data is 1234 and Dummy Message 1
Time is Wed Jan 05 2022 06:25:49 GMT+0530 (India Standard Time) and data is 1235 and Dummy Message 2
Time is Wed Jan 05 2022 06:25:49 GMT+0530 (India Standard Time) and data is 1236 and Dummy Message 3 
*/

As you can see in the above example we do not have to pass the date/time to the function again and again for each call.

How does this work?

Its simple to understand if you take one function at a time. If you look into the first function it creates a lexical scope for the variable a and returns another function like below. As the returned function has access to variable a, it will be like below to understand.

return function (b) {
        return 2 * b;
    };
//2 inplace of a that was passed in the first function

There many applications of currying in JavaScript like in events, logging etc.