Why should use "apply"?

This snippet is cut from Secrets of the JavaScript Ninja.

function log() {
    try {
        console.log.apply( console, arguments );
    } catch(e) {
        try {
            opera.postError.apply( opera, arguments );
        } catch(e){
            alert( Array.prototype.join.call( arguments, " " ) );
        }
    }
}

Why should I use apply and what's the difference between console.log.apply(console, arguments) and console.log(arguments)?

Solution 1:

In this case, the log function may accept any number of arguments.

Using .apply(), it doesn't matter how many arguments are passed. You can give the set to console.log(), and they will arrive as individual arguments.

So if you do:

console.log(arguments)

...you're actually giving console.log a single Arguments object.

But when you do:

console.log.apply( console, arguments );

...it's as though you passed them separately.

Other useful examples of using .apply() like this can be demonstrated in other methods that can accept a variable number of arguments. One such example is Math.max().

A typical call goes like this:

var max = Math.max( 12,45,78 );  // returns 78

...where it returns the largest number.

What if you actually have an Array of values from which you need the largest? You can use .apply() to pass the collection. Math.max will think they were sent as separate arguments instead of an Array.

var max = Math.max.apply( null, [12,45,92,78,4] );  // returns 92

As you can see, we don't need to know in advance how many arguments will be passed. The Array could have 5 or 50 items. It'll work either way.

Solution 2:

If you have

function log() {
    console.log.apply(console, arguments);
}

and call it like log('foo'); then that translates to console.log.apply(console, ['foo']); which is equivalent to console.log('foo'); which is what you want.

If you defined it like

function log() {
    console.log(arguments);
}

instead then log('foo'); would be equivalent to log(['foo']); which is not what you want.

Solution 3:

The apply function changes the value of this in the callee as well as letting you pass an array for the arguments.

For example, if you want to pass an array as arguments to a function:

function foo(value1, value2, value3) {
    alert("Value 1 is "+value1+".");
    alert("Value 2 is "+value2+".");
    alert("Value 3 is "+value3+".");
}
var anArray=[1, 2, 3];
foo(anArray); // This will not work. value1 will be anArray, and value 2 and 3 will be undefined.
foo.apply(this, anArray); // This works, as anArray will be the arguments to foo.

Or, another use: changing this:

function Foo() {
    this.name="world";
    this.sayHello=function() {
        alert("Hello, "+this.name);
    };
}
var foo=new Foo();
foo.sayHello(); // This works, as this will be foo in foo's sayHello.
var sayHello=foo.sayHello;
sayHello(); // This does not work, as this will not be foo.
sayHello.apply(foo, []); // This will work, as this will be foo.