JavaScript Function Borrowing: Reuse Code Like a Pro (Without Inheritance!)

Tired of copying and pasting code? Want to share functionality between objects without messy inheritance? Discover how JavaScript function borrowing lets you reuse existing methods with ease. Learn how to master call(), apply(), and bind() for cleaner and more efficient code.

What is JavaScript Function Borrowing? Use Existing Methods Anywhere

Function borrowing is a powerful JavaScript technique that allows you to use a method defined in one object in another object—without inheritance or duplication. It all comes down to manipulating the this context of a function, effectively "borrowing" its behavior.

This is made possible by three essential JavaScript methods:

• call(): Executes a function with a specified this value and individual arguments.
• apply(): Similar to call(), but accepts arguments as an array.
• bind(): Creates a new function with a permanently bound this value, to be executed later.

Function Borrowing Example: The User and Manager Scenario

Imagine you have a user object with a getSummary() method that describes the user. But a manager object needs the same summary functionality...

const user = {
  name: "Alice",
  role: "Engineer",
  getSummary() {
    return `${this.name} works as a ${this.role}.`;
  },
};

const manager = {
  name: "Bob",
  role: "Manager",
};

console.log(user.getSummary.call(manager)); // Output: "Bob works as a Manager."

See? By using call(), we execute user's getSummary() method in the context of the manager object. Bob now has a summary.

apply() vs. bind(): Choosing the Right Tool

call() is great, but what about apply() and bind()? Each method offers unique advantages for reusing logic without inheritance.

apply() for Dynamic Arguments

apply() behaves like call(), but it accepts arguments as an array. Use apply() when you don't know the number of arguments beforehand.

function introduce(location, company) {
  return `${this.name} is a ${this.role} based in ${location}, working at ${company}.`;
}

const intern = { name: "Charlie", role: "Intern" };

console.log(introduce.apply(intern, ["New York", "TechCorp"])); // Output: "Charlie is an Intern based in New York, working at TechCorp."

bind() for Later Execution

bind() doesn't execute the function immediately. Instead, it creates a new function with the specified this value.

const describeIntern = introduce.bind(intern, "New York", "TechCorp");
console.log(describeIntern()); // Output: "Charlie is an Intern based in New York, working at TechCorp."

This is perfect for event handlers where you need to preserve the context.

Why Use Function Borrowing in JavaScript?

JavaScript function borrowing shines in specific situations:

• Work with third-party libraries
• Avoid excessive inherence
• Centralize utility functions

A prime example: converting arguments (an array-like object) into a real array so we can perform array operations on the "borrowed" object

function getNumbers() {
  const argsArray = Array.prototype.slice.call(arguments);
  return argsArray.map(Number);
}

console.log(getNumbers("1", "2", "3")); // Output: [1, 2, 3]

When Not to Use Function Borrowing

While powerful, function borrowing isn't always the best solution.

• Use it as a quick fix
• Consider native object extension
• Consider refactoring for inheritance

For new projects, favor class inheritance or utility functions. Reserve JavaScript function borrowing for legacy code, DOM manipulation, or those situations where a quick fix is all you need to write effective code.

JavaScript Function Borrowing: A Final Thought

Function borrowing gives you incredible flexibility. Master call(), apply(), and bind() to keep your code DRY and adaptable. This will drastically improve your efficiency and effectiveness when it comes to writing code.