How to pass console.log as an argument to a JavaScript function?

Question

In the code below, I can use print instead of console.log, and the program may work correctly. However, I want to use console.log, but I get

Illegal call

at runtime

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

Answer 1

In general, you cannot pass methods directly to callbacks in Javascript. this bound to the function call point, depending on what form you call, and there is no automatic method binding (for example, there is, 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, you can use Function.prototype.bind (or a similar function from the library of your choice, since bind missing 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, this is not always enough for console.log. Since this is not an actual function in IE (its evil host object), you cannot use the methods of binding, applying and calling on it in this browser, so the only workaround is returning to the end of 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 for the type, I usually add the following global function when I develop and debug:

 function log(message){ return function(x){ return console.log(message, x); };}; forEach(['asd', 'zxc'], log('->')); 

Answer 2

From here: Create shortcut for console.log () in Chrome

You can replace console.log with console.log.bind(console)

Explanation thanks @ julian-d:

Since console.log will refer internally to this and expects its console . If you detach the log method, for example. for example var log = console.log , this connection is lost, and it will no longer point to console (in this case, instead of window - if you are in a browser). This is the target of .bind(obj) : it returns a method in which internally this remains fixed until obj .

Answer 3

You can solve the problem by using an anonymous function acting as a bridge between forEach() and console.log()

 forEach(["blah", "bac"], function (element) { console.log(element); }); 

Your forEach() remains agnostic in the handler, and you don't have to juggle with bind() to pass a working link to console.log() .