DEV Community

Gift Egbonyi
Gift Egbonyi

Posted on

What happens when you type console.log()?

#consolelog #javascript #learning #beginners

Hey friends! 👋

Two days late! I'm not nailing this adulting as I should fr. I missed our usual Wednesday hangout, but with just reason ofcourse. I won't bore you with the details, so here’s a quick, light tutorial to make it up.

We always write:

console.log("Hello world!");
Enter fullscreen mode Exit fullscreen mode

…but have you ever wondered what actually happens when that line runs?

Let’s break it down in a simple way.

What Happens When You Type console.log()?

JavaScript doesn’t magically push text onto the screen. A few things happen behind the scenes, fast enough that we don’t notice.

Here’s the journey.

1️⃣ Your code gets parsed

Before anything runs, the browser checks your code for:

  • valid syntax
  • correct placement of parentheses
  • missing commas
  • stray characters

If all is fine, it creates something called the execution context.
(Think of it as preparing the environment.)

2️⃣ JavaScript reaches the .log() call

When execution gets to your line:

console.log("Hello");
Enter fullscreen mode Exit fullscreen mode

JavaScript doesn’t print anything itself.
Instead, it sees:

  • console → an object provided by the browser
  • log → a method inside that object
  • "Hello" → the argument you’re sending

3️⃣ The browser steps in

The console object isn’t part of JavaScript.
It’s provided by your browser (Chrome, Firefox, Safari, etc.) through the Web APIs.

When you call:

console.log("Hello");
Enter fullscreen mode Exit fullscreen mode

You’re basically saying:

“Browser, please take this value and show it in your developer tools.”

4️⃣ The browser forwards the text to the DevTools console

Your browser receives "Hello" and pushes it into the DevTools output area.

That’s why you can customise the console, clear it, filter logs, and change colours — it’s the browser doing the work, not JavaScript.

5️⃣ The call completes

The log() method finishes and returns undefined.
(That’s why running console.log(console.log("Hi")) prints Hi and then undefined.)

Why do I even need this information?

Well, understanding this tiny journey helps beginners:

  • see the difference between JavaScript and browser features
  • understand why console.log() behaves differently in Node.js
  • avoid thinking the console is part of the core language
  • debug smarter

Try this out

Open your browser console and run:

console.log({ name: "Gift", age: 22 });
Enter fullscreen mode Exit fullscreen mode

You’ll notice you can:

  • expand the object
  • inspect properties
  • view it in different formats

That’s the browser again not JavaScript.

🙋🏾‍♀️ Wrap-Up

So the next time you type:

console.log("testing…");
Enter fullscreen mode Exit fullscreen mode

You’ll know the journey:

Parse → Execute → Browser handles it → DevTools prints it.

Small detail.
But...
Nice to know.

That’s it for today!
What should we talk about next Wednesday? Drop it below 👇

Connect with me on GitHub

Was this tutorial helpful? Got questions? Drop them in the 💬, I love feedback.

I’m keeping these light, fun, and useful, one small project at a time.
If you enjoyed this, leave a 💬 or 🧡 to let me know.

Follow me for more short, beginner-friendly JavaScript lessons every week.

I'm still hunting for full stack roles,
contract or full-time.
Please check out my [Portfolio](https://gift-egbonyi.onrender.com)
Enter fullscreen mode Exit fullscreen mode

Portfolio

Web trails:
LinkedIn | X (Twitter)

See you next Wednesday 🚀, hopefully, on time!

Till then, write clean code and stay curious. 🦋

Top comments (0)