Shorter functions for console log, warn, debug, error
Introduction
You know, we can use console.<thing>
family of functions/methods to help us debug and test code we are working on.
See this screenshot I took from Opera’s console on Arch Linux.
That is very useful indeed. Just that I find it a bit too much having to wring that lengthy console.<thing>
every time I need to dump something into the console output. Function.prototype.bind
to the rescue!
Shorter functions with the help of Function.prototype.bind
Since ES5, all functions have a bind
method that allows one to create a new function specifying the context. That is, when the function is invoked, its this
value is already define and does not depend on the function invocation (well, explaining bind
is not the goal here). Let’s just see how to put it into use to make shorter versions of the console.<thing>
friends.
When we do console.log()
, log
is a method of the console
object, which means the this
value (context execution` of the log
method is console
.
Say we do:
var log = console.log;
to assign the method log
to the variable log
. Then we use it like this:
log('test');
What is the context execution in this case? Well, it is not console
because by default, the context execution in JavaScript depends on how the function is invoked rather than how it was defined. Since we are invoking log
as a simple function (a method of the global object), its this
value will be the global object (window
on browsers, process
in nodejs).
But we can use bind
to pre-define the context execution to always point to console
. This way, no matter how the function is invoked, we are instructing the JavaScript engine to always set the context execution to console
.
Shorter versions.
var log = console.log.bind(console);
var debug = console.debug.bind(console);
var warn = console.warn.bind(console);
var error = console.error.bind(console);
Now, when we invoke any of our log
, debug
, warn
or error
functions, it will be just like if we were invoking the original version with console.<thing>
syntax. But because we used bind
, every time we use our shorter versions, their context execution will still be the object console
.
That saves us from having to type console.
all the time (although I type with ten fingers and I do type reasonably fast, I really find it incredibly boring typing that all the time).
Of course, you could make those ‘shortcuts’ even shorter:
var l = console.log.bind(console);
var d = console.debug.bind(console);
var w = console.warn.bind(console);
var e = console.error.bind(console);
Predefined parameters
On browsers, all of those different variations of the function produce different output, as you can see from the screenshots. That is not the case with server side JavaScript though. In Node.js, there are neither icons nor different colors by default.
var l = console.log.bind(console);
// Node.js doesn't have console.debug.
var w = console.warn.bind(console);
var e = console.error.bind(console);
Yeah, it works but the output doesn’t help us distinguish what is what…
If you wish to make it clear whether something was logged, d, warned, etc, know that bind
let’s us also pre-define parameters (there are ways to use colors, but it is not the point of the specific post).
Let’s make use of bind
ability to pre-set parameters. It is easy:
var l = console.log.bind(console, 'LOG:');
var w = console.warn.bind(console, 'WARN:');
var e = console.error.bind(console, 'ERROR:');
Now we can invoke l
, w
and e
and each of them will always print a leading string that helps us identify which of the helper functions was used. You just pass as argument the thing you want to see in the output, and those pre-defined arguments are automatically managed for us.
This is a screenshot of my dev.js
file while I was creating the examples to show in this post:
And here is how the output looks like on my setup:
Conclusion
We now have a shorter way to dump messages to the console when we are working with JavaScript. You could set your editor to insert a snippet of code automatically for you so you could easily insert these functions easily on a JavaScript file when you need them. Vim has Ultisnips, Emacs has Yasnippet, and some other editors also have means of easily inserting snippets of code inside your source files.