JavaScript Console Magic

A JavaScript method is like a tool in your coding toolbox. It’s a special property that holds a set of instructions, kind of like a recipe. These instructions are written in JavaScript, a language used to make websites interactive.

Imagine you’re building a website, and you want to make sure everything is working correctly. That’s where the developer console comes in handy. It’s like a control panel for your website, where you can see what’s going on behind the scenes. To open the developer console in Google Chrome, just press Ctrl + Shift + J on Windows or Ctrl + Option + J on mac OS. It’s like opening a window to peek inside your website’s brain.

Now, let’s talk about the console object. Think of it as your assistant in the console world. It has different methods, which are like special commands you can use to get information or make notes

1. console.log(): This is like leaving a friendly message. You can use it to print things on the console, like "Hello, world!" It's a great way to check if your code is working as expected.

console.log("printing masage to the consloe");

2. console.warn(): Think of this as a caution sign. It helps you highlight potential issues in your code.

console.warn("Issuing a warning massage");

3. console.error(): when something goes seriously wrong in your code, you can use console.error() to make it stand out. It's like saying, "Hey, there's a problem here!"

console.error("Oops! Something went wrong.");

4. console.info(): Use this method to share helpful information. It's like leaving a little note to explain what's happening in your code.

console.info('providing information')

5. console.assert(): Imagine you want to make sure that a specific condition in your code is true. You can use console.assert() to check it. If the condition is false, it will display an error message.

let a = 5;
console.assert(a === 10, "a is not equal to 10")

6. console.count() and console.countReset(): These are like counters. Use console.count() to count how many times a particular piece of code is executed. If you want to reset the count, console.countReset() is your friend.

console.count("Function Call");
console.count("Function Call");
console.countReset("Function Call")

7. console.time(), console.timeLog(), and console.timeEnd(): These methods help you measure how long it takes for a block of code to execute. Start a timer with console.time(), log intermediate times with console.timeLog(), and end the timer with console.timeEnd().

// Start the timer
console.time("Array Sorting");
// Simulate sorting an array (for demonstration purposes)
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort();
// Log an intermediate time (optional)
console.timeLog("Array Sorting");
// Continue some other work
console.log("Array sorted!");
// Log another intermediate time (optional)
console.timeLog("Array Sorting");
// End the timer and display the total time
console.timeEnd("Array Sorting");

8. console.group() and console.groupEnd(): Think of these as organizers. You can create groups of console messages to keep things neat and tidy. Use console.group() to start a group and console.groupEnd() to end it.

console.group("Group A");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();

console.group("Group B");
console.log("Message 3");
console.groupEnd();

9. console.table(): If you have complex data, like arrays or objects, and you want to see it in a more structured way, use console.table(). It turns your data into a table for easier inspection.

const data = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 22 }
];

console.table(data);

10. console.clear(): When the console gets cluttered with messages, you can use console.clear() to give yourself a clean slate. It's like wiping the whiteboard before starting a new task.

console.log("This message will be cleared.");
console.clear();