How do you print something in javascript?

Logging messages to the console is a very basic way to diagnose and troubleshoot minor issues in your code.

But, did you know that there is more to console than just log? In this article, I'll show you how to print to the console in JS, as well as all of the things you didn't know console could do.

Firefox Multi-line Editor Console

If you've never used the multi-line editor mode in Firefox, you should give it a try right now!

Just open the console, Ctrl+Shift+K or F12, and in the top right you will see a button that says "Switch to multi-line editor mode". Alternatively, you can press Ctrl+B.

This gives you a multi-line code editor right inside Firefox.

Let's start with a very basic log example.

let x = 1
console.log[x]

Type that into the Firefox console and run the code. You can click the "Run" button or press Ctrl+Enter.

In this example, we should see "1" in the console. Pretty straightforward, right?

Multiple Values

Did you know that you can include multiple values? Add a string to the beginning to easily identify what it is you are logging.

let x = 1
console.log["x:", x]

But what if we have multiple values that we want to log?

let x = 1
let y = 2
let z = 3

Instead of typing console.log[] three times we can include them all. And we can add a string before each of them if we wanted, too.

let x = 1
let y = 2
let z = 3
console.log["x:", x, "y:", y, "z:", z]

But that's too much work. Just wrap them with curly braces! Now you get an object with the named values.

let x = 1
let y = 2
let z = 3
console.log[ {x, y, z} ]

You can do the same thing with an object.

let user = {
  name: 'Jesse',
  contact: {
    email: ''
  }
}
console.log[user]
console.log[{user}]

The first log will print the properties within the user object. The second will identify the object as "user" and print the properties within it.

If you are logging many things to the console, this can help you to identify each log.

Variables within the log

Did you know that you can use portions of your log as variables?

console.log["%s is %d years old.", "John", 29]

In this example, %s refers to a string option included after the initial value. This would refer to "John".

The %d refers to a digit option included after the initial value. This would refer to 29.

The output of this statement would be: "John is 29 years old.".

Variations of logs

There are a few variations of logs. There is the most widely used console.log[]. But there is also:

console.log['Console Log']
console.info['Console Info']
console.debug['Console Debug']
console.warn['Console Warn']
console.error['Console Error']

These variations add styling to our logs in the console. For instance, the warn will be colored yellow, and the error will be colored red.

Note: The styles vary from browser to browser.

Optional Logs

We can print messages to the console conditionally with console.assert[].

let isItWorking = false
console.assert[isItWorking, "this is the reason why"]

If the first argument is false, then the message will be logged.

If we were to change isItWorking to true, then the message will not be logged.

Counting

Did you know that you can count with console?

for[i=0; i