JavaScript - Function apply() Method

Hello there, future JavaScript wizards! Today, we're going to dive into one of the most powerful and flexible methods in JavaScript: the apply() method. By the end of this tutorial, you'll be applying apply() like a pro! Let's get started on this exciting journey together.

What is the Function apply() Method?

The apply() method is a built-in JavaScript function that allows us to call a function with a given this value and arguments provided as an array (or an array-like object). It's like having a magic wand that lets you control how a function is executed!

Why is apply() important?

1. It gives us flexibility in how we call functions.
2. It allows us to borrow methods from other objects.
3. It's super useful when working with variable numbers of arguments.

Now, let's look at the syntax and then dive into some examples!

Syntax of apply()

Here's the basic syntax of the apply() method:

functionName.apply(thisArg, [argsArray])

Let's break this down:

• functionName: The function you want to call.
• thisArg: The value of this provided for the call to the function.
• argsArray: An array or array-like object specifying the arguments with which functionName should be called.

It might look a bit confusing now, but don't worry! We'll go through plenty of examples to make it crystal clear.

Examples of apply() in Action

Example 1: Basic Usage

Let's start with a simple example:

function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

Output:

Hello, Bob! My name is Alice.

In this example:

1. We define a greet function that uses this.name.
2. We create a person object with a name property.
3. We use apply() to call greet, setting this to person and passing 'Bob' as an argument.

The magic here is that apply() allows us to set what this refers to inside the function. Cool, right?

Example 2: Using apply() with Math.max()

Here's a practical example using Math.max():

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

Output:

7

In this case:

1. We have an array of numbers.
2. We use apply() to pass this array directly to Math.max().
3. null is used as the first argument because Math.max() doesn't use this.

This is super handy when you have an array of numbers and want to find the maximum!

Example 3: Borrowing Array Methods

Now, let's see how we can use apply() to borrow methods:

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

Output:

['a', 'b', 'c']

What's happening here?

1. We have an object that looks like an array but isn't one.
2. We borrow the slice() method from Array.prototype.
3. apply() allows us to use slice() on our array-like object, converting it to a real array.

This is incredibly useful when working with DOM elements or other array-like objects!

Example 4: Applying Functions with Multiple Arguments

Let's try something a bit more complex:

function introduce(greeting, hobby) {
  console.log(`${greeting}, I'm ${this.name}. I love ${hobby}!`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Hi there', 'coding']);
introduce.apply(person2, ['Hello', 'painting']);

Output:

Hi there, I'm Charlie. I love coding!
Hello, I'm Diana. I love painting!

In this example:

1. We define an introduce function that takes two arguments.
2. We create two person objects.
3. We use apply() to call introduce for each person, passing different arguments.

This showcases how apply() can be used with multiple arguments and different this values.

Comparison of Function Methods

Let's compare apply() with its siblings call() and bind():

Method	Syntax	Description
apply()	func.apply(thisArg, [argsArray])	Calls a function with a given this value and arguments as an array
call()	func.call(thisArg, arg1, arg2, ...)	Similar to apply(), but arguments are passed individually
bind()	func.bind(thisArg, arg1, arg2, ...)	Creates a new function with a fixed this value and initial arguments

Each has its use cases, but apply() shines when you have arguments in an array or need to work with array-like objects.

Conclusion

Congratulations! You've just taken a deep dive into the world of apply(). From basic usage to borrowing methods and working with multiple arguments, you've seen how versatile and powerful this method can be.

Remember, apply() is like a Swiss Army knife in your JavaScript toolkit. It might take some practice to master, but once you do, you'll find yourself reaching for it in all sorts of situations.

Keep experimenting with apply(), and don't be afraid to get creative. Who knows? You might just apply() yourself right into becoming a JavaScript master! Happy coding, future developers!

Credits: Image by storyset