JavaScript: Foundation — Console

JavaScript Console

Learning outcomes:

  • What is the console
  • Accessing the console in different browsers
  • Working in the console
  • Conventions used throughout this course
  • Logging using console.log()

Introduction

In the previous JavaScript Get Started chapter, we got to learn where exactly to write JavaScript for a webpage, and even wrote our very first JavaScript code. This is paramount to know — after all can't really begin learning a programming language without ever knowing where to write and execute it.

Now in this chapter, we aim to cover another paramount concept every JavaScript developer must be aware of, if not a pro in it. That is the developer's console.

Specifically, we'll see what is the console; how to use it as a REPL environment for executing JavaScript in the web browser; how to use it to debug scripts; and so on. We'll also learn the conventions that we'd follow throughout this course while displaying console snippets.

So let's get learning!

What is the console?

Every major web browser, including Chrome, Safari, Firefox, Edge, and Opera, provides a tool to help developers inspect and test JavaScript code.

That tool is commonly referred to as the developer's console, or simply the console.

The developer's console is a tool specifically made for web developers to be able to easily inspect JavaScript code, in addition to other aspects of the webpage.

The console doesn't just allow us to execute arbitrary JavaScript code, but also to inspect errors with network requests for the underlying webpage, or get notified of other kinds of warning messages.

If you're familiar with the idea of a terminal from your experience with another programming language (such as Python, PHP, C++), which is simply used to display the standard output of a program, then the console is simply an in-browser terminal for JavaScript.

Here's how the console looks in Google Chrome:

Console window for Google Chrome.
Console window for Google Chrome.

As stated before, the console is made exclusively for developers. But, it's not something meant only for the real pros and geeks of JavaScript.

Anyone, even beginners, could work in the console. In fact, the simplest place for beginners to test simple statements in JavaScript is the console!

Let's see how to access the console in different browsers.

Accessing the console

In this section, we address how to access the console in major web browsers on Windows OS. For Mac, the workflow is pretty much the same.

Google Chrome

Let's start with the most used web browser, i.e. Google Chrome:

  1. The keyboard shortcut for opening the console directly is Ctrl + Shift + J.
  2. For manual access, click on the icon on the top-right side of the browser. From the drop-down, navigate to More Tools and finally to Developer Tools. From here, select the Console panel to open up the console. If it's preselected, amazing — you won't have to do any selections.

Microsoft Edge

Now for Microsoft Edge:

  1. To open up the console directly using the keyboard, follow the same keystrokes you did above for Google Chrome, i.e. Ctrl + Shift + J.
  2. Otherwise, head over to the icon on the top-right side of the browser and from there go to More Tools and then to Developer Tools. In the window that opens, click on the Console panel to open up the console.

Mozilla Firefox

Time for Mozilla's Firefox browser:

  1. Press Ctrl + Shift + K to directly open up the Web Console in Firefox.
  2. Otherwise, click on the menu icon at the top-right corner of the browser and from there navigate to More Tools and then to Web Developer Tools. In here, from the top-most list of panel names, click on Console to open up the web console.
In Firefox, there is something called the Browser Console, which is different from the Web Console that we accessed above. The browser console, unlike the web console, applies to the whole browser; not just a single tab. It's accessible via Ctrl + Shift + J.

Opera

  1. The keyboard shortcuts are the same as those on Google Chrome.
  2. For the manual work, right-click anywhere on the given webpage and then choose the Inspect Element option from the context menu. In the window that opens up, click on the Console tab to go to the console.

Perfect!

Now with the fact clear as to what is the console and how to access it in major browsers, it's finally time to write something in it.

Working in the console

The console is a REPL environment.

REPL stands for Read-Evaluate-Print-Loop. It simply refers to any program that continuously asks the user to input stuff, then evaluates it and finally prints the result out on the screen.

The program is literally in a loop to read data (which is code in this case), then evaluate it, and then finally display its output. Hence the name.

As soon as you open the console, you'd notice a blinking cursor indicating that you could enter anything in there. And when you do so, and then press Enter, the browser automatically parses and executes the code entered and then outputs back the value returned by it.

Let's perform a simple addition:

Chrome's console snapshot.

We input 5+5 and then press the Enter key. The result is 10 which you can probably guess represents what.

What is 5+5?

5+5 is a numeric expression, since it involves numbers.

More specifically, it represents the addition operation. The + symbol is called the addition operator. It adds both the numbers given to it, and returns back the result.

Guess what — we can perform other common arithmetic operations in JavaScript as well, including subtraction, multiplication and division, just as easily.

Subtraction is done using the symbol -, multiplication is done using * (in contrast to x which we use in maths), and division is done using / (in contrast to ÷ which we sometimes use in maths).

Consider the illustration below:

Common arithmetic operations in the console.
Common arithmetic operations in the console.

In the first statement, we subtract 50 from 60 to give 10. In the next one, we multiply 10 and 20 together to give 200. Lastly, we divide 50 by 2 to give 25. Simple.

All of what you've written so far in the console is actually JavaScript itself. The console makes testing one-liner statements, sometimes even large programs, extremely rudimentary.

Just open up the browser, then the console, write a statement, press Enter, and voila — you have the result in front of you!

Console snippets in this course

Testing small statements on separate HTML pages is redundant and time-consuming. In contrast, the console can be opened up for any webpage — even a browser's home page — and thereafter used to inspect the statements in situ.

There's just no need to worry about creating separate HTML files, then some <script> tags, then putting the code between the tags before it could finally be run. And that's quite amazing, isn't it?

In the coming chapters, we'll use the console heavily to test simple pieces of our JavaScript code.

Now, wherever we'll use the console in the coming chapters, instead of capturing a screenshot of the respective snippets in an actual browser console and showing them, we'll show a custom snippet.

Let's take the example of the arithmetic expressions we computed above.

We'll show it as follows:

60-50
10
10*20
200
50/2
25

The >> symbol denotes an input prompt, i.e. it means that we could enter some code to be executed. The code is evaluated and its return value is printed back to the console. In our snippet, this is given without any symbol at the beginning.

In this case, the input statements are 60-50, 10*20 and 50/2, while their return values are 10, 200 and 25, respectively.

At this beginning stage, we'll be able to represent most, if not all, of the console outputs precisely as they are shown in the actual console of a browser.

However, once we move on to explore detailed concepts in this course, it would become near impossible to display the output exactly in the way it's done in the browser's console.

Just to give an example at this point, consider the Document.prototype object. Go on and type this in the console, and notice what gets returned.

Inspecting an object in the console.
Inspecting an object in the console.

You'll get an object returned. Simple!

However, the most interesting part which we can't truly replicate in our custom console snippets is the feature of live-inspecting the object by pressing the small arrow next to it.

Pressing the arrow opens up a list of all properties and methods on the given object — Document.prototype in this case.

List of properties and methods shown for a given object in the console.
List of properties and methods shown for a given object in the console.

Try to find write() in here. This is the same write() method that you used, on the document object, in the previous chapter. We'll see how is this so when we study JavaScript Object Prototypes.

Anyways, this live-view feature and many other features native to a browser's console are difficult to set up manually in our custom console snippets.

Likewise, when working with objects in the console or, in general, when some special feature of the console is desired, you're encouraged to open up the brower's console and perform the inspection live.

The console is a vital tool for literally all JavaScript developers to be able to easily test given statements and debug programs. So don't hesitate to visit it and test a couple pieces of code every now and then. It'll help you a lot in learning the true essence of given concepts, very very quickly.

Logging using console.log()

Do you recall document.write() from the previous chapter? You learnt that write() is a method of the document object and that it serves to display a given piece of text out on the webpage.

Now just as there is a way to display stuff on the webpage, there is a way to do so on the console as well.

And that's via console.log().

The console object and its log() method

Just like document, console is an object in JavaScript. It represents the developer's console and defines a large collection of methods to work with it.

One of these, and perhaps the most used one, is the log() method (like the write() method of document). It serves to output stuff to the console. And whatever we wish to output, it's provided between the parentheses (()), just as in document.write().

The method gets its name from the fact that it makes a 'log' to the console. A log simply refers to a message; in this case displayed on the console.

Let's try calling console.log().

Consider the JavaScript code below:

JavaScript
console.log('Hello World!');

Here we try to log the text 'Hello World!' to the console using the string 'Hello World!'. (Recall strings from the previous chapter?)

When we run this, here's what gets displayed in the console:

Hello World!

Quite basic.

When we write anything in the console directly, such as the expression 5+5 we saw above, it is evaluated and then the return value output automatically to the console on the next line. That is, there is no need to call console.log() manually to display the returned value.

However, it's not invalid to do so. After all, console.log() is also valid JavaScript code and could be entered in the console.

Consider the following console snippet:

console.log(5+5)
10
undefined

We input the statement console.log(5+5). This logs 10 (the sum of 5 and 5) in the console just as we expect. However, there is another weird output after it.

So where does that come from?

As stated before, the console evaluates a given statement and then outputs back its return value, whatever that is.

When it evaluates console.log(5+5), it executes the code written inside the log() method. This execution, of console.log(5+5) itself, causes 10 to be logged in the console. Once the log is made, the log() method exits. After it exits, the console gets done evaluating console.log(5+5) and obtains its return value.

And the return value of console.log() turns out to be undefined (actually this return value comes from the return value of log()).

undefined is a special value in JavaScript. It represents the absence of data. When logged, undefined gets displayed literally as 'undefined' in the console.

In the coming chapters, we'll explore undefined in fine detail and see what does it mean when a given method returns undefined. We'll also explore methods in detail and see what exactly is the purpose of these return values.