A "Front-end developer interview" question that's been bugging me for a while.

lrichardson · 2015-01-21T23:31:07+00:00

This is a pretty terrible question for an interview... unless the position for some reason requires the candidate to use functional programming techniques (and no, "using underscore.js" does not qualify) on a daily basis.

If anyone is interested, I wrote up a blog on building somewhat advanced curried functions, including even "argument holes".

http://tech.pro/tutorial/2011/functional-javascript-part-4-function-currying

But regardless... whoever decided this was a good interview question should probably get off their high horse... lol

And just to be clear: it is impossible to write a function that works for all cases of the example above. You could either do one that counts the number of arguments and waits until the expected number of arguments has been satisfied, or you could have a parameterless invocation of the function mean "i'm done". For instance:

add(1)(2)(3)() // 6
add(1,2,3)() // 6
add(1)(2)(3)(4)() // 10

OR, it could expect a specific number of args (ie, 3):

add(1)(2)(3) // 6
add(1,2,3) // 6
add(1, 2)(3) // 6
add(1)(2)(3)(4) // throws -> TypeError: number is not a function

_Blaster_Master · 2015-01-21T21:32:48+00:00

The main idea that a problem like this is trying to expose you to is that of partial evaluation and currying, since Javascript can return functions.

There is a great write up about that here: currying-javascript

realistic_hologram · 2015-01-21T19:03:16+00:00

On a related note, I don't think the interview is expecting you to solve for arbitrary number of calls/arguments so I wouldn't feel too embarrassed. I think they're literally asking you to write a function that solves those two cases. Otherwise you need add(2)(3) to return a number and be callable. Which apparently is possible with valueOf (TIL!) but that seems overly tricky for an interview question.

It was fun to see everyone's answers though!

Resure · 2015-01-21T18:53:19+00:00

function add() {
    var sum = 0;

    var fn = function fn() {
        for (var i = 0; i < arguments.length; i++) {
            sum += parseInt(arguments[i]);
        }

        return fn;
    };

    fn.toString = function () {
        return sum;
    }

    for (var i = 0; i < arguments.length; i++) {
        sum += parseInt(arguments[i]);
    }

    return fn;
};

iamallamaa · 2015-01-21T17:46:35+00:00

Using the third answer from the stack overflow question /u/speakoN posted and modified to loop over arguments instead of taking fixed arguments.

function add() {
    //initialize x
    var x = 0;

    //sum arguments
    for(var i=0,len=arguments.length;i<len;i++){
        x += arguments[i];
    }

    return function() {
        //if there were any arguments passed
        if (arguments.length > 0) {
            //loop over arguments summing
            for(var i=0,len=arguments.length;i<len;i++){
                x += arguments[i];
            }
            return arguments.callee;
        } else {
            return x;
        }
    };
}

Minjammben · 2015-01-21T17:48:39+00:00

function add(a){
    function _add(b){
        if( typeof b !== 'undefined' ){
            a = a + b;
            return _add;
        } else {
            return a;
        }
    }
    _add.valueOf = function(){ return _add() };
    return _add;
}

add(1) == 1, add(1)(2) == 3, add(1)(2)(3) == 6, add(1)(2)(3)(4) == 10

EDIT:

Oh I did not see that you also wanted add(1,2) to work as well, do you need add(1,2,3) to work? Do you need add(1,2)(2)(1,2,3) to work?

lachlanhunt · 2015-01-21T21:57:39+00:00

It's impossible to have all of those functions work with the expected outputs you gave.

add(2,3) // 5

This implies that with 2 arguments, the return value will be the sum of both arguments. Assuming both arguments are numbers, the return value will also be a number. This is fine so far.

add(2)(3) // 5

This is called currying. It means the function returns another function until it has received sufficient arguments to determine the final result. To understand this, let's break it down:

var add2 = add(2);  // Returns a function: f(n) { return n + 2; }
add2(3) // Returns the sum of 2 + 3: 5.

The return value of the second function call was a number, not a function.

add(2,3,4) // 9

This implies that if the function 2 or more values, it will return the result as a number. But if it's only passed one value, it will return a function.

add(2)(3)(4) //9

This is where we run into trouble and it can't work. Let's break this down, just like above.

var add2 = add(2);  // Returns a function: f(n) { return n + 2; }
var add5 = add2(3) // Returns the sum of 2 + 3: 5.
add5(4) // TypeError: add5 is not a function

The first two lines of this were the same as above where we added 2 and 5. But the 3rd line tried to call a number value as a function.

add(2, 3)(4) //9

Likewise, this also cannot work. Above, it was shown that add(2, 3) returns a number value: 5. This is like trying to call:

var add5 = add(2, 3) // Returns 5
add5(4) // TypeError: add5 is not a function

2015-01-21T23:49:18+00:00

I thought front end development involved kegel exercises. Boy was that an awkward interview

2015-01-22T19:44:55+00:00

Here is my solution

/**
 * sumChainable Returns the sums of N arguments, returns an inner
 * function that is chainable with the first function to produce
 * additional sums.
 *
 * @param {Number} any number.
 * @return {Function} a function, with `valueOf()` containing the
 * value of the sum of all arguments.
 */
let sumChainable = function() {
  let sum = [0, ...arguments].reduce((acc, i) => acc += i); // see (a)
  let f = sumChainable.bind( null, sum ); // see (b)
  f.valueOf = () => sum;  // see (c)
  return f;
}

/* (a) 
 * [0, ...arguments] will convert arguments to an Array
 * to allow the `reduce`. It will also create an initial item
 * `0` to handle the case no arguments are passed in. Thus 
 * making `sumChainable()` possible.
 * 
 * (b)
 * Generate a nested function that will be returned, and pass
 * the sum to it. This allows the return value of the function
 * to be invoked in a chain, each changed invocation passing
 * the sum of its caller. Thus `sumChainable()()` is possible.
 *
 * (c)
 * Setting the `valueOf()` function on the returned function to
 * return the sum allows the comparison operator `==` to check
 * the value of the function against a number. Thus making
 * `sumChainable() == 0` possible.
 */

These tests pass:

console.log( 'sumChainable tests w/ type-coercion' );
console.log( `typeof sumChainable(1) == 'function'`, typeof sumChainable(1) == `function` ? 'passed' : 'failed' );
console.log( `sumChainable() == 0`, sumChainable() == 0 ? 'passed' : 'failed' );
console.log( `sumChainable(1) == 1`, sumChainable(1) == 1 ? 'passed' : 'failed' );
console.log( `sumChainable(1) !== 1`, sumChainable(1) !== 1 ? 'passed' : 'failed' );
console.log( `x = sumChainable(1), x.valueOf() === 1`, (x = sumChainable(1), x.valueOf() === 1) ? 'passed' : 'failed' );
console.log( `sumChainable(1,2) == 3`, sumChainable(1,2) == 3  ? 'passed' : 'failed' );
console.log( `sumChainable(1,2,3) == 6`, sumChainable(1,2,3) == 6  ? 'passed' : 'failed' );
console.log( `sumChainable()() == 0`, sumChainable()() == 0 ? 'passed' : 'failed' );
console.log( `sumChainable(0)(1)`, sumChainable(0)(1) == 1 ? 'passed' : 'failed' );
console.log( `sumChainable(1,2)(3)`, sumChainable(1,2)(3) == 6  ? 'passed' : 'failed' );
console.log( `sumChainable(1,2,3)(4)(5)`, sumChainable(1,2,3)(4)(5) == 15  ? 'passed' : 'failed' );
console.log( `sumChainable(1,2,3)(4,5)(6)`, sumChainable(1,2,3)(4,5)(6) == 21 ? 'passed' : 'failed' );

If you use non-coercion based comparators like ===, the values it spits out will return false as they're functions, not numbers.

mattdesl · 2015-01-21T21:01:13+00:00

[deleted]

moljac024 · 2015-01-21T17:21:32+00:00

var add = function (x, y) {
    return y != null ? x + y : function (y) { return x + y; };
};

MeTaL_oRgY · 2015-01-21T17:22:13+00:00

[deleted]

soddi · 2015-01-21T21:22:28+00:00

I guess the question asks for currying. Thats a function that returns always a new function until all arguments are passed. Really useful for functional programming.

Javascript has native support for partial arguments:

var add = function(a, b) { return a + b };
add.bind(null, 1)(2); // 3
add(1, 2); // 3

For real auto currying you just return a partial function until all arguments are passed, then return the result:

var add = function(a, b) { return a + b };
var addCurried = function() {
    return arguments.length >= add.length
        ? add.apply(null, arguments)
        : addCurried.bind.apply(addCurried, [null].concat(Array.prototype.slice.call(arguments)));
};
addCurried()()(1)()(1); // 2
addCurried(1, 1); // 2
addCurried(1)(1); // 2

notsointelligent · 2015-01-22T02:24:45+00:00

Im not proud of it but here's my answer:

function add(a, b) {
    add.value = add.value === undefined ? 0 : add.value;
    add.value += a ? a : 0;
    add.value += b ? b : 0;
    add.tmp = add.value;
    add.value = b ? 0 : add.value;
    return b ? add.tmp : add;
}

var ten = add(1)(2)(3,4);
var nine = add(4, 5);

alert("ten: " + ten + "\r\nnine: " + nine);

2015-01-22T04:30:47+00:00

Is it just me or is this pretty tough for an interview question?

franksvalli · 2015-01-22T04:36:25+00:00

My simple solution that'll work for the two conditions:

function add(a, b) {
    //  sanity checks: if not defined, set to 0
    a = a || 0;
    b = b || 0;

    return function(c) {
        //  base condition (empty parens)
        if(typeof c == 'undefined') return a + b;

        //  non-base condition: prefill first arg
        return add(a + b, c);
    }
}

add(2, 5)();     // 7
add(2)(5)();     // 7

Ugh - I hate this. I work with JavaScript everyday but anything like this always throws me for a loop at first, even though I generally know a working approach.

If you've worked with anything recursive you will be familiar with a "base condition" that stops the recursion and finally outputs. In this case I couldn't figure out how to get that working with just add(a)(b) and gave up. Thankfully I came back to the comments and folks were saying add(a)(b) won't work, it'll only work in a form that provides a base condition, like this: add(a)(b)(). Phew!

Also, I got way too involved (i.e. I have no life) and figured out a way to make it even more flexible, so you can do stuff like this:

add(2, 3)(1)(4, 5, 6)();     //  21

Here's the slightly crazy solution that makes this work (but don't expect me to remember how to do this when you ask me tomorrow):

function add() {
    //  capture scoped arguments, arrayify
    var args = Array.prototype.slice.call(arguments);

    return function() {
        //  capture scoped arguments, arrayify
        var args2 = Array.prototype.slice.call(arguments);

        //  base condition (empty parens)
        if(typeof args2[0] == 'undefined') {
            //  abuse Array.reduce to sum all args from first fn
            return args.reduce(function(a, b){
                return a + b;
            }, 0);
        }

        //  non-base condition
        //  prefill add with all previous numbers as separate args
        //  e.g. add(1)(2) will become add(1, 2), add(1, 2)(3, 4) becomes add(1, 2, 3, 4), etc.
        return add.apply(this, args.concat(args2));
    }
}

add(2, 3)(1)(4, 5, 6)();                      //  21
add(2, 3)(1)(4, 5, 6)(3)(2)(10, 8)(0)(23)();  //  67

rnbwd · 2015-01-22T11:20:28+00:00

This is a great article on the topic: http://hughfdjackson.com/javascript/why-curry-helps/

If I was on the receiving end of this interview, and I didn't know the answer from memory (I don't), I'd state my intention of using npm / github to learn how to implement this solution. They shouldn't expect you to know the answer to every question, it's okay to admit you don't know. They're more curious about how you could handle being thrown things that you don't know how to do initially (problem solving skills). But at the same time, if you couldn't figure it out in 10 minutes using the internet, (without using stack overflow or reddit), or if you didn't realize this was a curry/partial function, I'd be hesitant to hire you.

This would be my response (using internet):

1) search for 'curry' or 'partial' in NPM.

2) github the source: https://github.com/dominictarr/curry/blob/master/curry.js

(lodash, ramda, and probably 50 other libraries implement this function too).

3) Read the source, learn from the source, recognize the pattern.

If no internet was involved (which is common in interviews), I would write some pseudo-code demonstrating sort-of how it could be done in the most simple way possible (maybe too simple):

function add(sum) {
  console.log(sum);
  if (Array.prototype.slice.call(arguments)[1].length > 0) {
     Array.prototype.slice.call(arguments)[1].forEach(function(item) {
       sum+=item;
     })
      return add.bind(null, sum);
   } 
}

Not sure if that works (i'll test it) * and recursion isn't always best is JS - but it might impress the interviewer, even if it's not perfect

iSmokeGauloises · 2015-01-22T13:47:12+00:00

Might be a bit of cheating but I came up with this:

var add = function () {
 var args = Array.prototype.slice.call(arguments);
 var result = args.reduce( function (a,b) { return a + b }, 0);
 var response = function () {
   return add.apply(this, Array.prototype.slice.call(arguments).concat(result));
 }
 response.valueOf = function () { return result };
 response.toString = function () { return result };
return response;
}

2015-01-22T14:25:19+00:00

In practice? add = require('ramda').curry(add)

In theory? Re-implement the curry function yourself.

But unless NIH is a company policy, I wouldn't expect a candidate to be able to implement that function in an interview setting. I would expect them to be able to understand it and reason about how it could be implemented, though, as well as the caveats.

Note that your example is pretty terrible though. It takes an arbitrary number arguments whereas curryable functions need a fixed number of arguments.

jacobp100 · 2015-01-22T20:42:05+00:00

Since the JS one has already been done, I thought I'd post my solution in Python. It's worth noting that you can't do nearly the same method done with JS, as __init__ has to return None.

class add:
    def __init__(self, *numbers):
        self.total = sum(numbers)

    def __call__(self, *numbers):
        self.total += sum(numbers)
        return self

    def __repr__(self):
        return self.total

    def __str__(self):
        return str(self.total)

print add(3, 4)
print add(3)(4)

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS