Console Log formats in JavaScript

This tutorial helps with different ways to log messages in javascript. The console.log() is a function in JavaScript language. It is used to print out variables, and log messages into the application.

The console.log() in your JavaScript code and pass in the information that you want to log as an argument inside the parentheses. This can be very useful for understanding what is happening in your code and finding and fixing errors.

Here are some common formats:

• Basic use of console.log()
• Console log with string interpolation
• Console log with multiple values
• Console log with object
• Console log with table
• Console log with CSS Styling
• Console log with warning
• Console log with error

How To Open Console log Window

You can open the console window in the browser using the F12 key.

Syntax:

console.log("message")

message: This is any string.

Or

console.log(var)

var: This is any variable that has a value stored in it.

The function accepts any array, object, or value as a parameter. After that, it returns the value specified by the parameter.

Example:

<script>
var emp_name = "js tutorials";
console.log(emp_name);
</script>

Output:

js tutorials

Multiple variables in console.log()

We can include all the variables in a single line rather than writing the console.log() method more than once when we have numerous variables.

Example:

<script>
    let name = "adma";
    let age = 23;
    console.log(name,age);
</script>

Output:

adam 23

We can use curly braces { } along with the variable to make an association between the variable and value.

Example:

<script>
    let name = "adma";
    let age = 23;
    console.log({name,age});
</script>

Output:

{name: 2, age: 3}

You can use curly braces with the objects as well.

How To Format console log message

We can format the console log message using specifiers like %s, %i, %f etc.

<figure class="wp-block-table">
    <table>
        <tbody>
            <tr>
                <td><strong>Specifier</strong></td>
                <td><strong>Description</strong></td>
            </tr>
            <tr>
                <td>%s</td>
                <td>Used for string elements</td>
            </tr>
            <tr>
                <td>%d&nbsp;or&nbsp;%i</td>
                <td>Used for integer elements</td>
            </tr>
            <tr>
                <td>%f</td>
                <td>Used for float type of elements</td>
            </tr>
            <tr>
                <td>%o</td>
                <td>Used for optimally useful formatting in elements</td>
            </tr>
            <tr>
                <td>%O</td>
                <td>Used for generic JavaScript object formatting in elements</td>
            </tr>
            <tr>
                <td>%c</td>
                <td>Used to add additional CSS formatting</td>
            </tr>
        </tbody>
    </table>
</figure>

Example:

<script>
    let name = "Adam";
    let age = 23;
    console.log({name,age});
</script>

Output:

Adam is 23 years old

We have used %s is used for “user” and %i is used for “age”.

How To Add CSS Styles in console.log()

We can add %c specifier in the console.log() to add CSS styles along with the specifier.

Example:

Let’s change the font size and font style into the text.

console.log('%cHello! Adam', 'font-size: 12px; font-style: italic;');

Adding interactive logs in javascript

The %o the specifier is used to inserting objects, DOM elements, and normal text into a message.

Example:

<script>
    let obj = {name: "Adam", "Age" : 23};
    console.log('New Employee: %o', obj);
</script>

Output:

New Employee: {name: "Adam", "Age" : 23}

Console log with warning

To log a warning message in the console, you can use the console.warn() method in JavaScript. This helps potential issues or mistakes in the code, without necessarily stopping the program’s execution.

Example:

console.warn('Warning: The dept not found!');

The console will display a warning message with the text “Warning: The dept not found!”.

Console log with error

To log an error message in the console, you can use the console.error() method in JavaScript. This is useful for identifying and debugging errors in the code. The console.error() method usually includes a stack trace with additional information about the error.

Example:

console.error('Error: The dept not found!');

Output:

Error: The dept not found!

Console log with table

The console.table() prints your output in a nicely formatted table.

Example:

const record = [
  { name: "John", age: 25, city: "New York" },
  { name: "Mary", age: 32, city: "Los Angeles" },
  { name: "Bob", age: 18, city: "Chicago" }
];
console.table(record);

Output:

┌─────────┬─────┬───────────────┐
│ (index) │ name │     age       │
├─────────┼─────┼───────────────┤
│    0    │ John │     25        │
│    1    │ Mary │     32        │
│    2    │ Bob  │     18        │
└─────────┴─────┴───────────────┘

You can replace the record array with any array of objects you want to log in a table format.

Conclusion:

The console.log() is a useful tool for debugging by logging information to the console for troubleshooting and analysis.