How to log variables in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Logging variables is fundamental for debugging JavaScript applications and understanding program flow during development.
As the creator of CoreUI with over 25 years of JavaScript development experience, I’ve used console logging extensively for debugging complex UI interactions and data flows.
From my expertise, the most effective approach is using console.log() with descriptive labels and leveraging advanced console methods for complex data structures.
This practice provides immediate visibility into variable values and program execution.
Use console.log() with descriptive labels to output variable values for debugging and development.
const username = 'john_doe'
const userAge = 25
console.log('Username:', username, 'Age:', userAge)
Here console.log('Username:', username, 'Age:', userAge) outputs both variables with descriptive labels to the browser’s console. Multiple values can be passed as separate arguments, and the console automatically adds spaces between them. For objects and arrays, console.log() displays an interactive view that can be expanded. This method works in all browsers and provides immediate feedback during development and debugging sessions.
Best Practice Note:
This is the same approach we use in CoreUI development for debugging component state and prop values during development.
Consider using console.table() for arrays and objects, or console.group() for organizing related log messages in complex debugging scenarios.
