The Console

What is a Console?

You might know a console as a video game system like Playstation(tm). In computer software, the console is a text-based area that allows for output and (sometimes) input. Javascript utilizes the console for messages, errors, and other testing items. We will be using the console quite heavily to output text in our programs. You can view the Chrome browser console using the following keyboard shortcuts: - On Windows and Linux: Ctrl + Shift + J. - On Mac: Cmd + Option + J.

Screenshot by 'Devourer09' CC BY-SA 2.5, via Wikimedia Commons

The console is something that runs in the background in real Javascript programs. You do not typically see it. Once we have practiced the basics of programming, we will move away from using the console.

What Can it Do?

Think of the Javascript console like a thing, an object, something you can manipulate or modify. It shows things, does things, and you - the programmer - can control it. For the most part, we will be asking the console to print output using the log() function. You can print text, the value of a variable, or both.

// Output to the console
console.log("This will show up on the console.");

Every time you use the console.log() command, it creates a new line.

console.log("This is the first line");
console.log("This is the second");
console.log();   // Blank line
console.log("This is the fourth line");

Console Object Functions

Not all console functions work with every browser or repl. Node.js is an important example.

Here is a table of the Console functions (via W3Schools). Google has a great reference page as well.

Method	Description
assert()	Writes an error message to the console if the assertion is false
clear()	Clears the console
count()	Logs the number of times that this particular call to count() has been called
error()	Outputs an error message to the console
group()	Creates a new inline group in the console. This indents following console messages by an additional level, until console.groupEnd() is called
groupCollapsed()	Creates a new inline group in the console. However, the new group is created collapsed. The user will need to use the disclosure button to expand it
groupEnd()	Exits the current inline group in the console
info()	Outputs an informational message to the console
log()	Outputs a message to the console
table()	Displays tabular data as a table
time()	Starts a timer (can track how long an operation takes)
timeEnd()	Stops a timer that was previously started by console.time()
trace()	Outputs a stack trace to the console
warn()	Outputs a warning message to the console

Printing to the Console

Many of our projects will require output to the console. It is a way of seeing what our code is doing. In the future we will have a better way to interact with the user.

There are three ways to output information to the console:

Method 1: .log(text)

See the examples above on printing simple text. You can utilize double quotes "like this", single quotes 'like this', or the newer template literals `like this`. It should be noted that template literals are a bit more robust, but fairly new.

Text can get more complicated including new lines, quotations, and using tabs for spacing. For more information, you may wish to look at escape sequences in strings.

Method 2: .log(variable)

To see the value of a variable, print it using console.log(myVariable); Separate variables with a comma to have them print on the same line. Note: .log creates a new line every time you call it.

let someValue = 3;
let sometOtherValue = 'Hello';
console.log(someValue);
console.log(someOtherValue);
console.log(someValue, someOtherValue);

/* Output:
3
Hello
3 "Hello"
*/

Method 3: .log(text & variable[s])

There are three ways to combine text and variables.

1. Concatenate. When using double or single quotes, the + operator will concatenate the value of a variable into your output string: let x = 1, y = 4; console.log( "The coordinates are: (" + x + ", " + y + ")" ); // Output The coordinates are: (1, 4)

2. Format Specifiers. You can insert the value of variables into a string by replacing specifiers of %s for string, %d or %i for integers, and %f for floating point values. let x = 1, y = 4, word = 'coordinates'; console.log( "The %s are: (%i, %i)", word, x, y ); // Output The coordinates are: (1, 4) For more information, check out Google's reference page.
3. Template Literals. Template literals allow for variables to be printed inline with the string. Surround a variable with ${ } to have the value printed. let x = 1, y = 4; console.log( "The coordinates are: (${x}, ${y})" ); // Output The coordinates are: (1, 4) As with concatenation, your variables can be of any type.

All three methods above an incorporate escape sequences and concatenation.