Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I pass console.log as an argument to my JavaScript function?

Tags:

javascript

In the code below I can use print in place of console.log and the program can run correctly. However I wish to use console.log but I get

Illegal invocation

at runtime

function forEach(array, action) {
    for (var i=0; i<array.length; i++) 
        action(array[i]);
}

forEach(["blah", "bac"], console.log);
like image 638
deltanovember Avatar asked Jan 29 '12 10:01

deltanovember


People also ask

How do you use the console log function in JavaScript?

log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. Syntax: console. log(A);

Can you pass a function as an argument in JavaScript?

Functions in the functional programming paradigm can be passed to other functions as parameters. These functions are called callbacks. Callback functions can be passed as arguments by directly passing the function's name and not involving them.

Where does console log go in JavaScript?

By default, the Inspect will open the "Elements" tab in the Developer Tools. Click on the "Console" tab which is to the right of "Elements". Now you can see the Console and any output that has been written to the Console log.

How do you assign a console log to a variable?

If you want to do this to an object that has been already logged (one time thing), chrome console offers a good solution. Hover over the printed object in the console, right click, then click on "Store as Global Variable". Chrome will assign it to a temporary var name for you which you can use in the console.


1 Answers

In general you can't pass methods directly to callbacks in Javascript. The this is bound at the point of the function call, depending on what form you call it and there is no automatic binding of methods (like there is in, for example, Python)

//does not work.
var obj = {
    x: 17,
    f: function(){ return this.x; }
};

//inside doSomething, f forgets its "this" should be obj
doSomething( obj.f )

In these cases, one might use Function.prototype.bind (or a similar function from your library of choice, since bind is not present in IE <= 8)

//works (for normal methods - see next bit for console.log in particular)
var obj = {
    x: 17,
    f: function(){ return this.x; }
};

doSomething( obj.f.bind(obj) )

Unfortunately, however, this is not always enough for console.log. Since it is not an actual Function in IE, (its an evil host object) you cannot use bind, apply and call methods on it on that browser so the only workaround is falling back to wrapping the call in an anonymous function

doSomething( function(x){
    return console.log(x);
});

Since wrapping console.log in an anonymous function is long and annoying to type I usually add the following global function when I'm developing and debugging:

function log(message){ return function(x){
    return console.log(message, x);
};};

forEach(['asd', 'zxc'], log('->'));
like image 161
hugomg Avatar answered Sep 22 '22 18:09

hugomg