Call apply method with arguments in JavaScript

Question

I wanted to invoke a function using the javascript apply() method. This works fine if the function has no arguments. i.e.

function test()
{
  console.log(this);
}

body = document.getElementsByTagName("body")[0]; // shortcut to body element

test.apply(body); // returns [object HTMLBodyElement]

But I can't seem to do the same thing to invoke a function that has arguments:

function test(msg)
{
  console.log(msg);
}

body = document.getElementsByTagName("body")[0]; // shortcut to body element

test(this).apply(body); // mysteriously returns the correct result, then
// typeError: 'undefined' is not an object (evaluating "test(this).apply".

The examples above are completely trivial but the grain of my question is: How do I use the apply() method to invoke a function with arguments.

Answer 1

apply takes two arguments:

test.apply(null, [body]);

The first argument sets the value of this when the function is executed. The second is an array of parameters for that function.

In your examples you could rewrite it as follows:

function test() {
    console.log(this);
}

and call it as follows:

test.apply(this);

Answer 2

First notice that you are actually invoking your function immediately, the line:

test(this).apply(body);

Fails because at first, you call the test function passing this as an argument, and then you try to access an apply property on the function's result, which is undefined since your function doesn't return anything.

That property access on the undefined value is giving you the TypeError exception.

Now, let's see what you actually want to do, if you want to pass the value of the body variable as the argument of your function, setting the outer this value, as the this value of test, you can do:

test.apply(this, [body]);

But that's why the call method exists, when you know exactly which arguments to pass, you don't need to create an array for nothing, you just pass the arguments:

test.call(this, body);

The apply method is really useful when you deal with for example a dynamic number of arguments, when you know which arguments want to pass, and still have the ability of setting the this value, call is just what you need.

Answer 3

With apply you send an array of arguments as its second argument:

test.apply(body,["Hello World"]);

Here is the apply documentation on the MDN docs https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply