`Function.prototype.bind` is incredibly useful for binding initial arguments, but sometimes we want to bind arguments at other indices. This post offers one simple implementation of binding with C++ inspired placeholders for Javascript.

## Goals

• Argument agnostic.
• Support binding any function, including n-ary functions.
• Allow binding any number of arguments at arbitrary positions.

## Motivating Example

Consider a function `dot2` that calculates the two-dimensional dot product.

``````var dot2 = function(x1, y1, x2, y2) {
return (x1 * x2) + (y1 * y2);
};
``````

`Function.prototype.bind` can only bind initial arguments, such as binding `x1` or `x1`, `y1`, and `x2`. To bind arguments like `y1` or `x1` and `x2`, we need to change `dot2`. This is often accomplished by manually forwarding arguments using an anonymous function.

``````var dotForwarded = function(y1, y2) {
return dot2(10, y1, 10, y2);
};

dotForwarded(2, 3); // 106
``````

Placeholders are a cleaner and clearer solution:

``````var dot10xs = placeholder(dot2, 10, _, 10, _);

dot10xs(2, 3); // dot2(10, 2, 10, 3) // 106

dot10xs(5, -1); // dot2(10, 5, 10, -1) // 95

placeholder(dot10xs, 5)(4, null, 2); // dot2(10, 5, 10, 4, null, 2) // 120
``````

# Implementation

`placeholder` takes a function `f` and a set of bound arguments. The bound arguments map argument indices to bound values, and may contains holes. For example, we can bind arguments at index 0 and 2, but leave index 1 open (along implicitly with all indices greater than 2). `placeholder` returns a function that fills in unbound arguments and forwards all arguments to `f`.

Bound arguments are provided as initial arguments to `placeholder`. The index of a bound argument in the call to `placeholder` determines the index of the argument in `f` being bound.

We choose `_` to identify a hole. The selection of `_` is arbitrary, any identifier can be used but that identifier must identify a unique object. This ensures that all types of arguments, including falsy values and `undefined`, are supported.

``````var _ = {};
``````

One possible implementation of `placeholder` is given here. This implementation uses iteration to merge the bound arguments and callee arguments, and `Function.prototype.apply` to invoke `f`.

``````var placeholder = function(f /*, ...*/) {
var bound = Array.prototype.slice.call(arguments, 1);
return function(/*...*/) {
var args = []; // Arguments to call f with.

// Copy all bound elements into position
for (var i = 0, len = bound.length; i < len; ++i)
if (bound[i] !== _) // Skip holes
args[i] = bound[i];

// Copy provided arguments into place
var indx = 0;
for (var i = 0, len = arguments.length; i < len; ++i) {
while (indx in args)
++indx;

args[indx++] = arguments[i];
}

// Call the function with the bound arguments.
//
// You can easily adapt `placeholder` to bind `this`
// like `Function.prototype.bind` but this implementation
// ignores `this`.
return f.apply(undefined, args);
};
};
``````

## Performance

This JSPerf shows `placeholder` has high overhead compared to manually forwarding arguments. Every call to a function using `placeholder` requires two function calls and a lot of iteration, array manipulation, and allocation.

Therefore, `placeholder` is probably not a good solution for small math functions like `dot2`. But for more substantial interfaces, `placeholder` can make code cleaner and eliminate a lot manual argument forwarding.