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)?

Answers:

Answer

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.

Answer

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.

Answer

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.
Answer

Let's discuss some background, why apply exist specially when we have call method with similar syntax.

First we need to understand some topics:

Variadic function:

In computer programming it is a function which can accept any number of arguments.

Data structure is JavaScript:

In javascript if we are dealing with data than most commonly used data structures is array, and in most cases we get data in the form of array.

Now if we are executing any variadic function in javascript than our call will look like this -

average is a variadic function, and its call will look like,

average(1,2,3);
average(1);
average(3,5,6,7,8);

and if are getting data in array format(in most of the cases we will get data in array format for Variadic functions), than we need to call our function like -

average(array[0],array[1],array[2],array[3],.... and so on)

What if we got an array with length 100 items, do we write it like this ?

No, We have apply method, which was designed just for this purpose.

average.apply(null,array);
Answer

console.log(arguments) would send a single argument to console.log, the array of arguments passed to your log method. console.log.apply(console, arguments) sends the possibly multiple arguments as multiple arguments instead of a single array.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.