🦥 Beyond Console.log()

Hello friends!

Welcome to this week’s Sloth Bytes.

Happy holidays to all of you 😁 

Sorry for missing last week, I celebrated a bit too early…

Learn how to make AI work for you

AI won’t take your job, but a person using AI might. That’s why 1,000,000+ professionals read The Rundown AI – the free newsletter that keeps you updated on the latest AI news and teaches you how to use it in just 5 minutes a day.

Sign up to start learning.

Sloths at top speed can cover only 1 meter in 1.5 seconds

That is only 1.5 miles per hour… yeah they’re really slow.

Beyond Console.log()

A lot of you love using console.log (me included), but let me show you better ways to debug that will save you hours of development time.

The Console Object

For those of you that know JavaScript, you should’ve noticed console is an object and .log is only ONE method from the console object. There’s actually a lot of methods in the console object that will save you so much time.

1. Console.table()

// 1. console.table() for Arrays & Objects
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];
console.table(users);

2. Console.group()

// 2. console.group() for Nested Data
console.group('User Details');
console.log('Name:', user.name);
console.log('Age:', user.age);
console.groupEnd();

3. Debugger statement

This one I recently just learned and it’s pretty helpful.

function calculateTotal() {
  // This keyword makes the browser pause here
  // Think of this as adding a breakpoint
  debugger;
  return items.reduce((sum, item) => sum + item.price, 0);
}

4. Other Console Methods You Should Know

• console.warn() - For potential issues

• console.error() - For actual errors

• console.trace() - Shows the call stack

• console.time() - Measure execution time

• console.assert() - Conditional logging

Practical Example

A lot of you have probably done something like this:

const data = [
  { id: 1, name: "sloth"},
  { id: 2, name: "sloth2"},
    {id: 3, name: "you smell"},
];
console.log(data)

You'll get something ugly like this:

If your object has a lot of information, it could get pretty difficult to read.

HOWEVER…
Now that you know about console.table(), you can do this instead:

console.table(data);

Look at the difference:

Way easier to read right?

Next time you need to console.log something, try one of these methods instead. Your debugging could end up being cleaner, faster, and more effective.

Thank you to everyone who submitted 😃 

RelyingEarth87, edoardo-albanese, Bai756, wahwha, JamesHarryT, trgr-boi, Yoshlix, Jk-frontEnd, tobiaoy, and MustySix66.

No challenge today… It’s the holidays have some fun.

Video is coming very soon!

I been slacking a bit, but this new video is almost ready. I’ll probably have it ready by the end of this week.

That’s all from me!

Have a great week, be safe, make good choices, and have fun coding.

If I made a mistake or you have any questions, feel free to comment below or reply to the email!

See you all next week and happy holidays 😁