- Learn about logging in JavaScript
- Use
console.log()
in the development process - Use
console.log()
for debugging
The venerable console.log()
is an all-purpose logging method. (A method
or a function is a bit of code that does something. We call them when we
want them to act.) In programming, logging refers to the process of printing
information about the program as it runs. Note that console.log()
is a
development tool; it's not something that's used in deployed code.
Let's take a look at how it works. Open up replit and follow along.
As we've seen before, there is an example provided in the code window:
console.log("Hello, world!");
We've also seen that we can log more than just a simple message. In fact, we can
pass any number of messages to console.log()
by separating them with commas;
when printed, they'll be separated by a space:
console.log("one", "two", "three");
We can also include values of different types. Give this a try:
console.log("I must have logged", 1000, "times today.");
Note that, for that first string ("I must have logged"), the comma is after the end quotation mark. This is because the comma is not part of the string; instead, it's how we tell JavaScript, "Hey, I'm going to give you something else!"
As we saw earlier in this section, we can also pass variables to
console.log()
:
const name = "Spinach the Shiba";
console.log("Hello,", name);
As a reminder, we can log any expression — even very complex ones — using
console.log()
.
Where console.log()
gets really helpful is when you use it to check that your
code is functioning as you want it to. Let's revisit an example from an earlier
lesson:
const age = 20;
let isAdult=false, canWork=false, canEnlist=false, canDrink=false;
if (age >= 21) {
canWork = true;
canEnlist = true;
isAdult = true;
canDrink = true;
} else if (age >= 18) {
canWork = true;
canEnlist = true;
isAdult = true;
} else if (age >= 16) {
canWork = true;
}
Let's say we want to run some tests to make sure that we have our if
statement
set up properly. We can do this by checking the values of the four variables for
different values of age
. Here's where console.log()
comes in.
Go ahead and open replit and copy/paste the code above into the code window. Next, let's add the following to the end of our code:
console.log(canWork, canEnlist, isAdult, canDrink);
Next, let's set the age
variable to a value of 16 and click the run button.
You should see the following output to the terminal:
true false false false
It looks like our code is working if age
is set to 16, but our message could
be a little more informative. We can see that only one of the variables is
true
, which is what we want, but it's not immediately apparent which of the
variables is the one that's true
. So let's add some labels. To do this, we'll
use a combination of strings and variables inside our console.log()
. While
we're at it, let's log the age
value as well. Replace the existing
console.log()
with the following:
console.log(
"Age:",
age,
"Can work:",
canWork,
"Can enlist:",
canEnlist,
"Is a legal adult:",
isAdult,
"Can drink:",
canDrink
);
This looks complicated, but all we're doing here is stringing together a series of expressions — some of them simple string values, and some of them variables — with commas between each one.
Alternatively, we can use string interpolation inside our console.log()
to do
the same thing:
console.log(
`Age: ${age}, Can work: ${canWork}, Can enlist: ${canEnlist}, Is a legal adult: ${isAdult}, Can drink: ${canDrink}`
);
With this approach, we're passing a single expression to console.log()
instead of a series of them. The commas here, therefore, are part of the string.
Be sure to run both versions in the REPL so you can see the difference.
If we were writing user-facing code here, we would probably want to make it
easier to read by putting each variable on its own line. We could do that either
by using multiple console.log()
s, or by using the new line character (\n
).
But since the console.log()
is just for our (the developer's) use, the above
may be perfectly acceptable.
With this console.log()
set up we can try our code with as many age values as
we like, checking each time to verify that the variables have been set
correctly.
Let's say we've gotten our code to this point:
const age = 18;
let isAdult=false, canWork=false, canEnlist=false, canDrink=false;
if (age >= 21) {
canWork = true;
canEnlist = true;
isAdult = true;
canDrink = true;
} else if (age > 18) {
canWork = true;
canEnlist = true;
isAdult = true;
} else if (age >= 16) {
canWork = true;
}
console.log(`Age: ${age}\nCan work: ${canWork}\nCan enlist: ${canEnlist}\nIs a legal adult: ${isAdult}\nCan drink: ${canDrink}`);
We have our console.log()
set up and we're ready to start testing it. We
decide to start with our 'least adult' category, which is children under age 16,
so we set age
equal to 15 and click run. Everything looks fine — we get four
false
s — so we change age
to 16, then 17. So far, so good. But then when we
test it for an age
of 18, we see the following:
Age: 18
Can work: true
Can enlist: false
Is a legal adult: false
Can drink: false
Hmm, obviously we've got an error somewhere. The code for ages 18-20 isn't
returning the expected result, so let's take a look at that conditional:
else if (age > 18)
. With a simple condition like this, we might realize right
away that we accidentally used >
instead of >=
. But imagine a case where our
condition is more complex and we don't immediately see the problem. Let's think
about some ideas for ways we can use console.log()
to help us find and correct
it. Be sure to follow along in the REPL.
To start, we could try logging a message inside the block for the condition where the error is (i.e., inside the block that should be executing):
const age = 18;
let isAdult=false, canWork=false, canEnlist=false, canDrink=false;
if (age >= 21) {
canWork = true;
canEnlist = true;
isAdult = true;
canDrink = true;
} else if (age > 18) {
console.log("The condition returned true")
canWork = true;
canEnlist = true;
isAdult = true;
} else if (age >= 16) {
canWork = true;
}
console.log(`Age: ${age}\nCan work: ${canWork}\nCan enlist: ${canEnlist}\nIs a legal adult: ${isAdult}\nCan drink: ${canDrink}`);
If we click the Run button, the message does not get logged so we know the code block is not getting executed. This tells us that there's something wrong with the conditional itself. If the message did get logged we would know that the problem is somewhere inside the code block instead.
Next, we could try changing age
to 19. In this case, the message does get
logged, so we know our conditional is only broken for age 18. This gives us
another clue as to how to fix it.
If we had a more complicated conditional and still couldn't find the problem, we
could try logging the conditional itself, simplifying it one step at a time
until it does return true
. As soon as we get a true
return value, we know
that the last thing we removed was what was causing the problem. For example, if
our overall condition is comprised of two conditions joined by &&
, we could
check each expression individually. Whichever one returns false
instead of
true
is the one with the problem. We could then continue to "drill down" as
necessary until we find what's wrong.
Top Tip: Even better, we can use
console.log()
as we're building the conditional in the first place, using an approach like the one outlined below. Only after you have the conditions working the way you need them to would you begin building out the code blocks. Taking this incremental approach will make it much easier to find and fix any errors.if (condition1) { console.log("Condition 1 returned true"); } else if (condition2) { console.log("Condition 2 returned true"); }
You should think of the ideas presented above as examples of a general approach
to debugging. Debugging is largely a matter of using logic to narrow in on the
problematic bit of code until you find the error. It is worth getting
comfortable using console.log()
because it can be a valuable tool in this
process.
In this lesson, we've learned how to use the console.log()
method. We've also
explored some ways we can use it to help us with writing and debugging code.