Explain Apply function in JavaScript
Apply() explanation
Let’s explain apply() in JavaScript the right way — starting from the
real problem, why it happens, and how Apply() solves it. This
approach is best for interviews and real-world understanding.
var employee = {
name: 'Biswajit Jana',
org: 'Capgemini',
displayInfo: function() {
console.log('Employee: '+ this.name + ' works at '+ this.org);
}
};
// O/P: Employee: Biswajit Jana works at Capgemini
employee.displayInfo();
/**
* The above example and function call works perfectly without issues
* Now what happens if we store displayInfo attribute value into a variable and call after that ?
*/
var displayInfo = employee.displayInfo;
displayInfo();
// O/P: Employee: works at undefined
// O/P: Employee: works at undefined
// Observation:
// When displayInfo is assigned to a standalone variable and invoked,
// the function loses its original object context.
// In JavaScript, `this` is determined by HOW a function is called,
// not WHERE it is defined.
// Since `displayInfo()` is called as a normal function (not as employee.displayInfo()),
// `this` refers to the global object (window in browsers, global in Node.js).
// The global object does not have `name` and `org` properties,
// hence both values are undefined.
💡 One-Line Summary:
When a method is extracted from an object and invoked independently, it
loses its this binding, causing this to point to the global object.
Solution:
displayInfo.call(employee);
// Explanation:
// The call() method invokes the function immediately and explicitly sets
// the value of `this` to the provided object (`employee`).
// As a result, the function reads `name` and `org` from the `employee` object.
Also we can pass extra arguments while calling function like example bellow
var employee = {
name: 'Biswajit Jana',
org: 'Capgemini',
displayInfo: function(position, address) {
console.log('Employee: '+ this.name + ' works at '+ this.org + ' with position holding ' + position + ' located at '+ address);
}
};
var displayInfo = employee.displayInfo;
// O/P: Employee: Biswajit Jana works at Capgemini with position holding Manager located at Bengalore, Whitefield
displayInfo.call(employee, 'Manager', 'Bengalore, Whitefield');
How call() Works Here
displayInfo.call(thisArg, arg1, arg2, arg3, ...)
- thisArg →value of this inside the function
- Remaining arguments → passed one by one
Apply() works same as Call() but only difference is argument acceptance, we
can pass arguments as an array format, see code example bellow
var employee = {
name: 'Biswajit Jana',
org: 'Capgemini',
displayInfo: function(position, address) {
console.log('Employee: '+ this.name + ' works at '+ this.org + ' with position holding ' + position + ' located at '+ address);
}
};
var displayInfo = employee.displayInfo;
// O/P: Employee: Biswajit Jana works at Capgemini with position holding Manager located at Bengalore, Whitefield
displayInfo.apply(employee, ['Manager', 'Bengalore, Whitefield']);
