How to assign inline methods to console and document for variables in javascript?

Question

I am trying to implement the conditional assignment of the console.log () method for a variable as follows:

var dbglevel = 1; var dbg = (dbglevel > 0) ? console.log : function(){}; dbg('message'); // throws TypeError 

TypeError: 'log' raises an object that does not implement the Console interface.

It worked, but something changed in Firefox 30. Now I have no idea if it ever worked. The reason I doubt it is because I saw the same thing with the document object. Compare the results of these two function assignments, the first is the shell of the function, and the second is the direct assignment to the method:

 function qs1(q) { return document.querySelector(q); }; // wrapper qs1('head'); // works var qs2 = document.querySelector; qs2('head'); // throws TypeError 

TypeError: 'querySelector' raises an object that does not implement an interface.

What am I seeing here? Why does direct method assignment to a variable interrupt its “interface” to this parent?

My reason for this is twofold:

1.) The assignment syntax is shorter, and I don’t have to worry about declaring the arguments, 2.) More importantly, I want my dbg () calls to display the correct file and line number in the console. If the function is a shell, the console always shows the line number of the console.log call in this wrapper. I don't want to emulate line logging, because the usual method of calling console.log directly gives you a clickable link to view the source code in the center of the line that called it.

I am not looking for a workaround using plugins like FireBug, preprocessing (LESS / SASS) or third-party scripts. The solution should only work on vanilla Firefox 30 or later, and the specific problem I'm trying to solve is how to compress the following code on each line that I want to conditionally register:

 if (typeof cfg.DEBUG != 'undefined' && cfg.DEBUG > 2) console.log(something); 

... to that...

 dbg(something); 

... where the dbg() function performs any appropriate conditional evaluation and then shows the same line number, as if I were calling console.log directly.

Answer 1

There is a workaround:

 var dbglevel = 1; var dbg = (dbglevel > 0) ? function(msg){console.log(msg);} : function(){}; dbg('message'); // prints message 

By the way, assigning a built-in var function throws a TypeError in Chrome. The problem is mandatory: when you perform these functions, you call the global object, and instead you need to bind them to console or document .

So, the correct path to your alias is similar:

 var dbg = console.log.bind(console); 

or

 var qs2 = document.querySelector.bind(document); 

Suppose you are using ES5 at a minimum. So, if you need backward compatibility, you probably want to use something like a workaround above (maybe something more complex to allow for a variable number of arguments using apply and the arguments object).

If you are sure that you have access to ES5 features, use:

 var dbglevel = 1; var dbg = (dbglevel > 0) ? console.log.bind(console) : function(){}; dbg('message'); // prints message