Search code examples
javascriptfunctionoptional-parametersnamed-parameters

Is there a way to provide named parameters in a function call in JavaScript?


C#, for example, allows using named parameters like so:

calculateBMI(70, height: 175);

I find this quite useful. How can I get a similar effect in JavaScript?

I've tried doing things like

myFunction({ param1: 70, param2: 175 });

function myFunction(params){
  // Check if params is an object
  // Check if the parameters I need are non-null
  // Blah blah
}

but it seems awkward. Is there a simpler way?


Solution

  • ES2015 and later

    In ES2015, parameter destructuring can be used to simulate named parameters. It would require the caller to pass an object, but you can avoid all of the checks inside the function if you also use default parameters:

    myFunction({ param1 : 70, param2 : 175});
    
    function myFunction({param1, param2}={}){
      // ...function body...
    }
    
    // Or with defaults, 
    function myFunc({
      name = 'Default user',
      age = 'N/A'
    }={}) {
      // ...function body...
    }
    

    ES5

    There is a way to come close to what you want, but it is based on the output of Function.prototype.toString [ES5], which is implementation dependent to some degree, so it might not be cross-browser compatible.

    The idea is to parse the parameter names from the string representation of the function so that you can associate the properties of an object with the corresponding parameter.

    A function call could then look like

    func(a, b, {someArg: ..., someOtherArg: ...});
    

    where a and b are positional arguments and the last argument is an object with named arguments.

    For example:

    var parameterfy = (function() {
        var pattern = /function[^(]*\(([^)]*)\)/;
    
        return function(func) {
            // fails horribly for parameterless functions ;)
            var args = func.toString().match(pattern)[1].split(/,\s*/);
    
            return function() {
                var named_params = arguments[arguments.length - 1];
                if (typeof named_params === 'object') {
                    var params = [].slice.call(arguments, 0, -1);
                    if (params.length < args.length) {
                        for (var i = params.length, l = args.length; i < l; i++) {
                            params.push(named_params[args[i]]);
                        }
                        return func.apply(this, params);
                    }
                }
                return func.apply(null, arguments);
            };
        };
    }());
    

    Which you would use as:

    var foo = parameterfy(function(a, b, c) {
        console.log('a is ' + a, ' | b is ' + b, ' | c is ' + c);     
    });
    
    foo(1, 2, 3); // a is 1  | b is 2  | c is 3
    foo(1, {b:2, c:3}); // a is 1  | b is 2  | c is 3
    foo(1, {c:3}); // a is 1  | b is undefined  | c is 3
    foo({a: 1, c:3}); // a is 1  | b is undefined  | c is 3 
    

    DEMO

    There are some drawbacks to this approach (you have been warned!):

    • If the last argument is an object, it is treated as a "named argument objects"
    • You will always get as many arguments as you defined in the function, but some of them might have the value undefined (that's different from having no value at all). That means you cannot use arguments.length to test how many arguments have been passed.

    Instead of having a function creating the wrapper, you could also have a function which accepts a function and various values as arguments, such as

    call(func, a, b, {posArg: ... });
    

    or even extend Function.prototype so that you could do:

    foo.execute(a, b, {posArg: ...});