# 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**](https://developers.google.com/web/tools/chrome-devtools/console/) using the following keyboard shortcuts:\
\- On Windows and Linux: Ctrl + Shift + J.\
\- On Mac: Cmd + Option + J.
{% hint style="info" %}
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.
{% endhint %}
## 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](#printing-to-the-console).
```javascript
// 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.
```javascript
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](https://www.w3schools.com/jsref/obj_console.asp)
#### 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](https://www.w3schools.com/jsref/obj_console.asp)). Google has a great [reference page](https://developers.google.com/web/tools/chrome-devtools/console/console-reference) as well.
| Method | Description |
| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| [assert()](https://www.w3schools.com/jsref/met_console_assert.asp) | Writes an error message to the console if the assertion is false |
| [**clear()**](https://www.w3schools.com/jsref/met_console_clear.asp) | **Clears the console** |
| [count()](https://www.w3schools.com/jsref/met_console_count.asp) | Logs the number of times that this particular call to count() has been called |
| [error()](https://www.w3schools.com/jsref/met_console_error.asp) | Outputs an error message to the console |
| [group()](https://www.w3schools.com/jsref/met_console_group.asp) | Creates a new inline group in the console. This indents following console messages by an additional level, until console.groupEnd() is called |
| [groupCollapsed()](https://www.w3schools.com/jsref/met_console_groupcollapsed.asp) | 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()](https://www.w3schools.com/jsref/met_console_groupend.asp) | Exits the current inline group in the console |
| [info()](https://www.w3schools.com/jsref/met_console_info.asp) | Outputs an informational message to the console |
| [**log()**](https://www.w3schools.com/jsref/met_console_log.asp) | **Outputs a message to the console** |
| [table()](https://www.w3schools.com/jsref/met_console_table.asp) | Displays tabular data as a table |
| [time()](https://www.w3schools.com/jsref/met_console_time.asp) | Starts a timer (can track how long an operation takes) |
| [timeEnd()](https://www.w3schools.com/jsref/met_console_timeend.asp) | Stops a timer that was previously started by console.time() |
| [trace()](https://www.w3schools.com/jsref/met_console_trace.asp) | Outputs a stack trace to the console |
| [warn()](https://www.w3schools.com/jsref/met_console_warn.asp) | 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](#what-can-it-do) 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](https://cs.brash.ca/variables/strings#special-characters) 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.
```javascript
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](https://developers.google.com/web/tools/chrome-devtools/console/console-write#string_substitution_and_formatting).
3. [**Template Literals**](https://cs.brash.ca/variables/strings#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.
{% hint style="info" %}
All three methods above an incorporate [escape sequences](https://cs.brash.ca/variables/strings#special-characters) and [concatenation](https://cs.brash.ca/variables/strings#concatenation).
{% endhint %}