Printing Output with console.log

Welcome to Writing and Running Your First JavaScript Programs! This is the very first lesson of the very first course in this path, so we are standing right at the starting line together. Whether we have never written a line of code before or are just brushing up on the basics, this is exactly the right place to begin.

By the end of this lesson, we will understand what a program actually is, we will have written a small program that greets the world and shows a number, and we will know how to run that program and see what it does. Let's begin from the very beginning.

A computer is a machine that follows instructions extremely well and extremely fast. There is a catch, though: computers do not understand human languages like English. They need their instructions written in a special, precise form called a programming language.

A programming language is a set of words and rules that lets us tell a computer exactly what to do, one step at a time. There are many such languages, and the one we are learning is called JavaScript. It runs in every web browser in the world and on countless servers, which makes it one of the most useful languages anyone can learn.

A few words we will use constantly:

• The instructions we write are called code.
• A file containing code is a program. Our programs will live in a file called main.js, and the .js ending marks it as a JavaScript file.
• When we ask the computer to follow those instructions, we say we run the program.

Deep down, a computer only understands a stream of very simple signals. We would never want to write instructions at that level by hand. Instead, a helper program reads our JavaScript and carries it out for us. In this course that helper is called Node.js, and it is already set up for us.

When we run a program, Node.js reads our file from top to bottom, one line at a time, and does what each line says before moving to the next. We simply write clear JavaScript, and Node.js handles the rest.

That single idea, top to bottom, one line at a time, is worth remembering. For the short, straight-line programs in this course, our lines run in exactly the order we write them. Later courses will teach us how to make a program choose between paths or repeat steps, but for now, top to bottom is all we need.

On its own, a computer keeps everything hidden inside itself. It can happily work away, yet nothing appears on our screen unless we explicitly ask for it.

That is the job of console.log. It is the instruction for showing something on the screen. Whatever we place inside its parentheses gets displayed in the output area when the program runs. The word console refers to the place where output appears, and log means "write this down". For now, we can treat console.log(...) as one fixed piece of syntax: write it exactly like that, put the thing we want to see inside the parentheses, and end the line with a semicolon.

Two small pieces of vocabulary before we continue:

• Text is anything wrapped in quotation marks, such as "Hello". The quotation marks tell JavaScript where the text starts and ends.
• A number is written plainly, without any quotation marks, such as 42.

We will use both in the examples ahead.

Let's start with the classic first program of nearly every programmer: printing a friendly greeting.

console.log("Hello, world!");

Let's break this down carefully:

• console.log is the instruction that shows something on the screen.
• The parentheses ( and ) hold the thing we want to show.
• The quotation marks around Hello, world! tell JavaScript that this is text, not more code to carry out.
• The semicolon ; at the end marks where the instruction stops. Every line of code we write in this course ends with one. JavaScript can often work out where an instruction ends even when the semicolon is missing, a feature called Automatic Semicolon Insertion, but it does not always guess the way we expect, so we write the semicolon ourselves every time.

When this line runs, JavaScript displays the text and then moves down to a new line, so anything that comes next starts fresh below.

Hello, world!

Notice how the quotation marks themselves are not shown in the output. They are a signal to JavaScript that we mean text, and they do their job quietly.

Text is not the only thing we can show. We can hand console.log a number just as easily, and this time we do not use any quotation marks:

console.log(42);

Here 42 is a plain number, so JavaScript treats it as a quantity rather than as a row of characters. The result is displayed on its own line:

42

A helpful rule for now: text goes inside quotation marks, numbers do not. Mixing these up is one of the most common early mistakes. Writing console.log("42"); would still show 42 on the screen, but JavaScript would treat it as text rather than as a number, and that difference will matter a great deal once we start doing arithmetic in the next course.

What if we want a label and a number on the same line of output? We do not need two separate instructions; we can place several values inside one console.log, separated by commas:

console.log("The answer is", 42);

We are giving console.log two values at once: the text "The answer is" and the number 42. JavaScript shows them in order and, as a nice bonus, automatically puts a single space between each value, so we do not have to add one ourselves.

The answer is 42

This comma trick works for as many values as we like, and it is the quickest way to build simple messages that mix words and numbers.

Now let's put everything into one complete program in our main.js file:

console.log("Hello, world!");
console.log(42);
console.log("The answer is", 42);

To run it on this platform, we click the Run button. Behind the scenes, that does the same thing as typing node main.js in a terminal: it asks Node.js to open main.js and carry out each line from top to bottom. Each console.log produces one line of output, in the same order the lines appear in the file:

Hello, world!
42
The answer is 42

Three console.log lines produce three lines of output. If something looks off, no worries: we can fix the code and click Run again as many times as we like. Running is free, and doing it often is one of the best ways to learn.

Nicely done! In this first lesson, we learned that a programming language lets us give a computer precise instructions, that JavaScript runs our program from top to bottom one line at a time, and that we run a program with the Run button. We also met console.log, and used it to show text, numbers, and several values on a single line.

That is a solid foundation for one lesson, and the best way to lock it in is to write some code. Up next is a short set of hands-on practice tasks: time to write a few console.log lines of our own and watch a program speak for the first time. Let's go!