I would like to create a "console.test()", a method that only does console.log() if the variable test == true. But I think it is not possible to use protoype to create such method. I'm a bit green on this, can anyone shed some light?
Another question that arises is: Why in a console.log can we enter information separated by commas? Could you simulate something like this?
Thank you very much in advance!
If I understand you correctly, you want to use an object that inherits from console and create a method called test that does the same thing as console.log but only if the control variable you comment out is true.
It is quite simple as follows:
This way you have the native JS console.log method which will continue to behave as usual and also your new console.test method which will stop throwing messages to the console as soon as the debugMode control variable is false.
https://jsfiddle.net/wLpgxs24/20/
The idea is quite useful since, for example, when moving from development to production, it would be as simple as setting the global control variable debugMode to false, thus avoiding having to search for each console.log to comment or delete it.
As for the other question, yes console.log supports multiple parameters:
Show a message.
I have looked on the internet because your question has generated interest, see if this helps you:
I took the infinite parameters thing from this thread, I'll pass it on if you want to look at it:
https://stackoverflow.com/questions/9338291/javascript-infinite-parameters-for-function
By the way I have not put what you say about test === true, because I don't know how you have that set up, pass code and if I can help you with something.
Basically, you have to condition the definition of
console.test
on the value ofwindow.test
The simplest would be to do:
But to define
console.test
there are many ways and we are going to explore them so that the answer is as complete as possible:Calling the function "roughly"
But this will print the arguments into an array:
Using spread operator
In modern browsers,
spread operator
it takes care of passing the array of arguments as parameters.Wearing
console.log.apply
You can do something like:
By using
Function.prototype.apply
you can call a function with its respective context (in this caseconsole
) and pass it N arguments in the form of an array:Which in turn will call the function with that array in the form of a list of arguments, which is equivalent to doing:
BUT all of these approaches will make your console inspector all
console.test
appear to be called from the script where you defined the function , when it would be more useful if they appeared to be called from the script (and the line) where you called it.Wearing
Function.prototype.bind
So that the calls to
console.test
appear called from the script and the correct line, what is done is:By using
Function.prototype.bind
you are in the background doing a duplicate of the function, which would be equivalent to doconsole.test = console.log
and will appear to be called from the calling script. But also , the grace of bind is that you can pass additional parameters that are placed before the arguments:In which case
console.test('hola',{x:1},'amigo');
it will printYou can go further and make
TEST
it print with a color:In which case
TEST:
it will have a different color. Open the devtools panel using F12 and run this script:(it will claim that the snippet is "sandboxed" but TEST will still appear in green)
Using
getters
(this is my favorite)You could define a method on the object
console
with dynamic parameters. For example, to print the time that has passed since you declaredconsole.test
it until you invoke it. Again, open your panel with F12 and run:The console will say:
And that's something you couldn't do with
console.log.bind
directly.See an example running on Plunkr (first open the console with F12 to see the messages)