How to Use console.log Effectively in JavaScript

Use console.log to print messages or variable values to the browser console for easy debugging. Include descriptive text and use multiple arguments or template literals to make output clear and readable.

Syntax

The basic syntax of console.log is simple: you call it with one or more values or expressions inside parentheses. You can pass strings, numbers, variables, or even objects.

• console.log(value1, value2, ...): Logs all values separated by spaces.
• console.log('text', variable): Combines text and variable output for clarity.

javascript

console.log('Hello, world!');
console.log('Value:', 42);
console.log('User:', {name: 'Alice', age: 30});

Output

Hello, world!
Value: 42
User: {name: "Alice", age: 30}

Example

This example shows how to use console.log to print variable values with descriptive text and how to log multiple values at once.

javascript

const name = 'Bob';
const age = 25;
console.log('User info:', name, age);
console.log(`Name: ${name}, Age: ${age}`);

Output

User info: Bob 25
Name: Bob, Age: 25

Common Pitfalls

Some common mistakes when using console.log include:

• Logging complex objects without formatting, which can be hard to read.
• Forgetting to remove console.log statements in production code.
• Using string concatenation instead of template literals, making code harder to read.

Here is a wrong and right way to log variables:

javascript

// Wrong way
const user = {name: 'Eve', age: 28};
console.log('User: ' + user); // Outputs: User: [object Object]

// Right way
console.log('User:', user); // Outputs the full object
console.log(`User name: ${user.name}, age: ${user.age}`);

Output

User: [object Object]
User: {name: "Eve", age: 28}
User name: Eve, age: 28

Quick Reference

Tips for effective console.log use:

• Use descriptive messages to explain what you are logging.
• Use multiple arguments instead of string concatenation.
• Use template literals for clearer formatting.
• Log objects directly to inspect their properties.
• Remove or disable logs in production to keep console clean.

Key Takeaways

Use console.log with descriptive text and multiple arguments for clear output.

Prefer template literals over string concatenation for readability.

Log objects directly to inspect their full structure.

Avoid leaving console.log statements in production code.

Use console.log to quickly check values and debug your code.