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!
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
When we do
log is a method of the
console object, which means the
this value (context execution` of the
log method is
Say we do:
var log = console.log;
to assign the method
log to the variable
log. Then we use it like this:
What is the context execution in this case? Well, it is not
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
1 2 3 4 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
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
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:
1 2 3 4 var l = console.log.bind(console); var d = console.debug.bind(console); var w = console.warn.bind(console); var e = console.error.bind(console);
1 2 3 4 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:
1 2 3 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
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: