Skip to main content

Function Binding

Advanced Functions: Function Binding

Can you explain the three types of binding techniques in JavaScript?

View Answer:
Interview Response: In JavaScript, there are three types of binding techniques Window, Implicit, and Explicit function binding.

Can you explain what explicit function binding is in JavaScript?

View Answer:
Interview Response: Window, Implicit, and Explicit function binding are JavaScript's three types of binding strategies. Explicit binding compels a function call to bind to a specific context object by utilizing call, apply, or bind. These predefined JavaScript methods get passed down to all functions via the function prototype. Functions have a method bind that allows us to fix "this." Binding is the ideal option for tying the context to the correct object and preventing "this" from being lost.

Code Example:

let user = {
firstName: 'John',
};

function func() {
console.log(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // John

Explain the function and syntax of the function bind() method?

View Answer:
Interview Response: The bind method generates a new function that, when called, sets the "this" keyword to the provided value, with a specified sequence of arguments preceding any arguments provided when the new function gets invoked. Bind creates a new function that may be called later in the code while keeping the desired context binding.

Code Example:

Syntax: let boundFunc = func.bind(thisArg[, arg1[, arg2[, ...argN]]]);

const module = {
x: 42,
getX: function () {
return this.x;
},
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42
note

This is useful for passing functions into other functions, like setTimeout(), which later invokes and won't necessarily bind the invoked function to the correct object without being coerced. The first parameter is the context object, and all other parameters are individually listed, like the call method.


Can you explain what a partial function application is in JavaScript?

View Answer:
Interview Response: A partial function application in JavaScript refers to the process of fixing several arguments to a function and, in the process producing another function of smaller arity.

Code Example:

function mul(a, b) {
return a * b;
}

let triple = mul.bind(null, 3);

alert(triple(3)); // = mul(3, 3) = 9
alert(triple(4)); // = mul(3, 4) = 12
alert(triple(5)); // = mul(3, 5) = 15