Call vs Apply in JavaScript: A Side-by-Side Comparison

Photo by TNL Design & Illumination GmbH

Understanding Function Context in JavaScript 🤔

In JavaScript, functions are objects, and like any Object-Oriented Programming (OOP) aficionado will tell you, objects have context. The this keyword in a function refers to the object it belongs to. This is where our main characters, call and apply, strut onto the stage. Both methods are used to invoke functions and explicitly specify what this should refer to.

What Is The Call Method?

The call method invokes a function, specifying its this value, followed by arguments passed one by one.

function introduce(name, hobby) {
  console.log("Hi! I'm " + this.title + " " + name + " and I love " + hobby + ".");
}

const context = { title: 'Engineer' };

// Using .call() to specify 'this' and passing arguments individually
introduce.call(context, 'Jonathan', 'coding');
// Output: "Hi! I'm Engineer Jonathan and I love coding."

Remember, with call, the arguments are like VIP guests entering a swanky party one at a time; they're not crowding at the entrance.

And Apply?

apply, on the other hand, is similar to call, but it takes arguments in an array, perfect for when you have an array of data and want to pass it as separate arguments.

const skills = ['Kotlin', 'Quarkus'];

// Using .apply() to specify 'this' and passing arguments as an array
introduce.apply(context, ['Jonathan', 'learning new technologies']);
// Output: "Hi! I'm Engineer Jonathan and I love learning new technologies."

Imagine apply as the host of the party, welcoming a group of guests all at once with a grand gesture.

When to Use Call vs Apply

Now that you know the mechanics, a logical question pops up: When do you choose the lone ranger (call) over the group herder (apply)? Well, if you have an array of arguments you want to unleash, apply is your go-to. If you've got a list of distinct, individual items, then call is calling your name—pun intended. 📞

Call for Precision

Choose call when your arguments are already separate, and you're as ready to pass them as Amsterdam is for bikes.

// Separate arguments
geometry.call(mathContext, 90, 180);

Apply for Arrays

Employ apply when you're dealing with an array, or when the arguments are coming from some iterable shenanigans.

// An array of arguments
geometry.apply(mathContext, [90, 180]);

Using apply with arguments that are not an array is like using a chainsaw to slice cheese—you can do it, but why? 🧀

Performance Considerations

In the pre-ES6 era, deciding between call and apply could be a matter of performance. However, thanks to the spread operator (...), performance differences have nearly vanished like socks in a dryer. With modern JavaScript engines, you often decide based on convenience rather than speed.

Modern Alternative: The Spread Operator

With ES6 and onward, the spread operator takes away the show from apply in many cases.

// ES6 spread operator in action
introduce.call(context, ...['Jonathan', 'refactoring code']);

The spread operator arrives fashionably late to the party but takes the lead like a charming extrovert. It's apply without the constraints of only arrays.

Under the Hood: Technical Differences

Technically, call and apply have the same function—they invoke a function with a given this context—but apply takes parameters in as an array, slightly hiding its true purpose behind an array curtain.

function compute(x, y) {
  return this.multiplier * (x + y);
}

const context = { multiplier: 2 };
const args = [5, 10];

// When you need to call compute in another context
var resultCall = compute.call(context, ...args); // Notice the spread operator

var resultApply = compute.apply(context, args);

console.log(resultCall, resultApply); // both will log the same result: 30

Laughing at JavaScript's Quirks

And here's the thing, JavaScript isn't your typical, stoic, old-fashioned language. It has quirks that, if we were personifying, would be the quirky aunt who travels the world, collects fridge magnets, and occasionally confuses left with right. But when you master functions like call and apply, you feel like you've won a game of linguistic chess. Checkmate! ♟

Wrapping It Up with a Friendly Bow 🎀

Well, there you go, friend—call and apply in a nutshell. They may be as different as bicycles and tulips (in an Amsterdam sense, of course), but both serve their purpose elegantly and effectively in the JavaScript landscape. The next time you encounter them, you'll know exactly which to choose for your coding escapades. Don't be surprised if you find yourself with a slight grin, ready to conquer the next challenge.

More like this

Beautify Your JSON: A JavaScript Guide 🎨

If you've ever stared at a JSON string clumped together like a plate of overcooked spaghetti, you know that it can be a real brain-scratcher to understand what's going on.

Read

Swap Classes in JavaScript Like a Boss

Have you ever found yourself in the midst of a JavaScript journey, wondering how on earth to change an element's wardrobe – I mean, class? Well, it's your lucky day!

Read

Mastering Multiline Strings in JavaScript: A Quirky Guide

Ever found yourself tangled in the webs of single-line string syntax when what you really needed was to spread your textual content over multiple lines like a picnic blanket? 🐜🍉 You're not alone. Multiline strings can be a bit of a noodle-scratcher in JavaScript, essential for readability and maintaining your sanity when dealing with lengthy text or templating.

Read

Mastering Axios in JavaScript: Your Guide to Simplicity and Power

In the bustling world of JavaScript, where the currency is code and time is of the essence, we often find ourselves wading through the maze of HTTP request handling. Enter Axios, the sleek and mighty chariot that simplifies these endeavors. In this read, you'll discover the A to Z of Axios – a popular HTTP client for JavaScript. What makes it stand out, and how can you harness its power in your web projects? Prepare for a journey laced with humor, clean code, and a sprinkle of sarcasm that even my rubber duck debugger finds insightful. 🦆

Read