Programs, values, and types · Lesson 2 of 77 · practice
Running a program and reading its output
About 40 minutes.
By the end of this lesson you can
- Run a snippet and find where its output appears.
- Predict the order of the printed lines from the order of the statements.
- Print several values on one line and know how they are separated.
- Explain why console.log is not part of the JavaScript language itself.
Write, run, read — and repeat all day
Explanation
Programming is a loop with three steps: write a little, run it, read what came back. Beginners often try to write the whole thing first and run it once at the end, which is the hardest possible way to work, because when twenty lines fail together you have twenty suspects.
Run after every small change instead. Two or three lines at a time is not too little. The habit you are building is not typing — it is checking, and checking often means you always know which change broke it: the last one.
console.log is a window into a running program
Explanation
A running program is invisible. Values are made, added up and thrown away without anything appearing anywhere. console.log is how you make one of them visible: you hand it a value and it writes a line where you can read it.
Here is a fact worth knowing early, because it explains a lot of confusion later. console.log is NOT part of the JavaScript language. The language itself has no idea what a screen is. console is supplied by whatever is running your code — a browser, a server runtime like Node.js, or this player — which is why you will find it documented among the browser APIs and not in the language reference.
The practical consequence: console.log is always available in the places you will actually write JavaScript, but what it does with a value can differ slightly between them. This player converts each value to text the same way JSON does, which will matter in one or two lessons ahead. A browser console is a bit fancier and shows objects you can click open.
Printing a value is not the same as producing one
A mental model
This is the distinction that trips up nearly everyone at the start. A program can work perfectly and print nothing. A program can print a great deal and compute nothing useful. The two are unrelated.
Printing is a SIDE EFFECT: something visible that happens on the way past, like a footprint. The value itself was already there. console.log does not create it, change it or hand it back to you — it just shows you a copy on its way through.
So when you are asked to make a program that works out a total, the total is the point and printing it is how you check your work. Later in this course the tests will read your values directly and never look at your printed lines, precisely because the value is the thing that matters.
Several values on a single line
Explanation
You can hand console.log more than one value by separating them with commas. Each one is turned into text and they are printed on one line with a single space between them. You do not add the spaces yourself; the space is what the comma turns into.
This is the cheapest labelling trick in programming: print a short piece of text saying what the value is, then the value. When you have eight numbers appearing and no idea which is which, labels turn output into information.
When nothing appears at all
A common mistake
The usual cause is that the line never ran. Statements run in order, so a line after one that stopped the program will never be reached; and later, when you meet functions and conditions, a line can sit inside a block that was skipped.
The second cause is asking for the wrong thing. Writing console.log with nothing between the brackets prints an empty line, which looks a lot like nothing at all.
The third is expecting console.log to hand something back. It shows a value and returns nothing you can use — JavaScript has a specific name for that nothing, and you will meet it in the lesson on undefined and null. Until then, treat console.log as a dead end: values go in, nothing comes out.
Why this small tool carries so much weight
Why it matters
Professional developers debug with a debugger, with tests, and — constantly, all day, in every language — with a print statement. There is no shame in it and no shortcut past it. When a program surprises you, the fastest route to understanding is to print the values it is actually working with, rather than the ones you assume it has.
Almost every bug in this course will be found the same way: print the value just before the line that misbehaves and compare it against what you expected. The gap between those two is the bug.
Recap
Recap
Run early and often. console.log comes from the environment, not the language, and its job is to show a value, not to produce one. Commas put several values on one line separated by single spaces. Lines appear in the order the statements run.
Worked examples
Every output below was produced by actually running the code in the same sandbox your exercises run in — it is not a prediction.
Output order is statement order
Three statements, three lines, in the order written. The third shows how commas put several values on a single line.
1console.log("Line one");2console.log("Line two");3console.log("Two", "values", "on one line");- line 2
Runs after line 1 for one reason only: it is written after it.
- line 3
Three separate text values, one comma between each. The commas become single spaces in the printed line — they are not part of any of the values.
What it prints
Line oneLine twoTwo values on one line
Labelling a value so the output means something
The same number printed twice: once with a label and once bare. The label costs one short piece of text and saves you guessing later.
1const total = 4 * 25;2console.log("The total is", total);3console.log(total);- line 1
4 * 25 is worked out first, to 100, and that value is given the name total. Nothing is printed by this line.
- line 2
A piece of text and a number, printed on one line with a space between them.
- line 3
The same value with no label. Correct, but in a page of output you would not know what it was.
What it prints
The total is 100100
Check yourself
Not scored, not stored. Getting one wrong is the useful part.
How many lines appear, and what is on each of them?
console.log("a");console.log("b", 1 + 1);
What does console.log hand back to the rest of your program?
Which statement about console.log is true?
Write it yourself
Exercise · intro · 4 tests
Ready, set, go
Declare three constants — firstLine, secondLine and thirdLine — holding the texts Ready, Set and Go, exactly as written here with their capital letters. Then print each of them on its own line, in that order.
The three constants hold the texts Ready, Set and Go. The tests read those values and print them themselves; they cannot see your own console.log lines, so add the printing for your own sake — you will need the habit.
Define firstLine, secondLine and thirdLine at the top level of your code — the tests call them by name.
Worth remembering
- Is console.log part of the JavaScript language?
No. The language has no concept of a screen. console is supplied by the environment — browser, Node.js, or this player — which is why it is documented with the platform APIs.
- What is the difference between printing a value and producing one?
Producing a value is the work; printing it is a side effect that lets you look at it. console.log shows a value and hands nothing useful back.
Check this lesson against the source
We wrote the explanation; we did not invent the facts. This is the page that backs them.
Check there: That console is documented as an API provided by the environment (Web APIs), not as part of the JavaScript language reference.
MDN — console.log() static method
Check there: The parameters section: console.log() accepts one or more values to output.
Prefer to read the source in a structured breakdown? Turn this doc into a breakdown