The 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.
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");
Here is a table of the Console functions (via W3Schools). Google has a great reference page as well.
Method | Description |
Writes an error message to the console if the assertion is false | |
Clears the console | |
Logs the number of times that this particular call to count() has been called | |
Outputs an error message to the console | |
Creates a new inline group in the console. This indents following console messages by an additional level, until console.groupEnd() is called | |
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 | |
Exits the current inline group in the console | |
Outputs an informational message to the console | |
Outputs a message to the console | |
Displays tabular data as a table | |
Starts a timer (can track how long an operation takes) | |
Stops a timer that was previously started by console.time() | |
Outputs a stack trace to the console | |
Outputs a warning message 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:
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.
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"
*/
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
%sfor string,%d or %ifor integers, and%ffor 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.
Last modified 4yr ago