Forem: Kishor U.

Debugging JavaScript Like a Pro: Mastering the Different Types of Console Logs

Kishor U. — Tue, 28 Feb 2023 10:56:05 +0000

As front end developers, we're all too familiar with the long, arduous process of debugging our code. Whether we're using the debugger or the console object, it's a daily task that we simply can't avoid. But here's the thing: while most of us stick to the basic console.log() method, there's actually an entire API of console methods that we're missing out on. And by only using one method, we're doing ourselves a disservice. So, are you ready to simplify your debugging experience and become a more efficient developer? By mastering the most relevant console methods, you'll not only be able to choose the right tool for the job, but also extract the most important information when logging your code. And who doesn't want to save time and spare themselves some headaches?

In this article, we'll explore the different types of console logs and how to use them to your advantage.

Console.log() - the meh

The console.log() method is the most basic of all console methods. It's the one we use the most, and the one we're most familiar with. It's also the one that we use when we're not sure which method to use. But, as you'll see, it's not the most efficient method for debugging.

The most basic use of console.log() is to simply log a string to the console.

console.log('Hello World!');

// Hello World!

Or, if you just wanna see the value of a variable, a cool trick is to pass it as an object to console.log(). This way, you can see the name of the variable and its value.

const name = 'Foo Bahadur';
console.log({ name });

// { name: 'Foo Bahadur' }

But, as you can see, this method is not very useful when it comes to debugging. It's not very efficient, and it doesn't provide much information.

Console.table() - the formatting fiend

The console.table() method is a great way to log an array of objects to the console. It's a great way to visualize your data and see what's going on.

const users = [
  { name: 'Foo', age: 25 },
  { name: 'Bar', age: 30 },
  { name: 'Baz', age: 35 },
];

console.table(users);

// ┌─────────┬─────┬─────┐
// │ (index) │ age │ name│
// ├─────────┼─────┼─────┤
// │    0    │ 25  │ Foo │
// │    1    │ 30  │ Bar │
// │    2    │ 35  │ Baz │
// └─────────┴─────┴─────┘

Console.error() & .warn() - the annoying siblings

Do you still log errors and warnings to the console? Well, you're not alone. But, if you're logging it with console.log(), you're doing it rookie style. Behold, the console.error() and console.warn() methods. The console.error() and console.warn() methods are pretty self-explanatory. The main advantage of using these methods is that they're color-coded, which makes them easier to spot and provides a visual cue that something is wrong.

console.error('Something went wrong!');
console.warn('This is a warning!');

Console.time() , .timeLog() & .timeEnd() - the timekeepers

An untold role of a developer is also to make sure that their code is as efficient as possible. The console.time() and console.timeEnd() methods are used to measure the time it takes for a piece of code to execute. And, if you want to log the time in between but don't want to end the timer, you can use console.timeLog().

console.time('fetching data');
fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
    .then((json) => {
        console.timeLog('fetching data', "Finished fetching data" ,"with", json.length, "users");
        console.timeLog('fetching data', "Starting expensive operation");
        expensiveOperation(json);
        console.timeLog('fetching data', "Finished expensive operation");
        console.timeEnd('fetching data');
    });

// fetching data: 75.734ms Finished fetching data with 10 users
// fetching data: 76.009ms Starting expensive operation
// fetching data: 800.02ms Finished expensive operation
// fetching data: 800.102ms

Console.group() & .groupEnd() - the parents

How often have you found yourself scrolling through a bunch of console logs, trying to find the one you're looking for? The console.group() and console.groupEnd() methods are here to help. They allow you to group together a bunch of related logs so that you don't spend hours scrolling through your console trying to find console-mates.

console.group('Users');
console.log('Foo');
// ...
console.log('Bar');
// ...
console.log('Baz');
// ...
console.groupEnd('Users');

// Users
//   Foo
//   Bar
//   Baz

Console.count() - the tally master

The console.count(), aka The Tally Master, is the go-to console method for counting how many times a particular piece of code is executed. Simply place console.count() before the code you want to count, and watch as it keeps track of every single iteration for you. It's a simple yet powerful tool that saves you time and effort, and lets you focus on the bigger picture of your code

console.count('foo');
console.count('bar');
console.count('foo');
console.count('bar');
console.count('foo');

// foo: 1
// bar: 1
// foo: 2
// bar: 2
// foo: 3

Console.clear() - the cleaner

The console.clear() method is a simple yet powerful tool that clears the console. It's a great way to keep your console clean and organized.

console.clear();

Console.assert() - the inspector

Okay, How many times have you done this? if(false) { console.log('Foo') }, well, you're not alone here. The console.assert() method is a great way to log a message to the console only if a condition is false. It's a great way to make sure that your code is running as expected. You can consider it little test suite for your code.

console.assert(1 === 2, 'This is wrong!');
console.assert(1 === 1, 'This is right!');

// Assertion failed: This is wrong!

Console.trace() - the detective dog

The console.trace() is that detective dog that sniffs out the origin of a particular piece of code, a great way to see the call stack of a function.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();

// console.trace()
//     at bar (VM123:2:13)
//     at foo (VM123:6:3)
//     at VM123:8:1

Final thoughts

From object visualization to memory profiling, console methods cover a wide range of areas. By using them correctly, we can save time and effort, and focus on the bigger picture of our code.

Of course, the debugger is still a valuable tool in some scenarios, but knowing all the console methods we have can help us make better decisions.

So, let's cheer up and start using these console methods to their fullest potential! Say goodbye to the habit of using console.log() by default and embrace the power of console methods.

Resources

MDN - Console

Javascript tricks You've Never Heard About : Part 1

Kishor U. — Wed, 12 Oct 2022 05:59:46 +0000

JavaScript is a feature-rich language. It has a lot of features that are not well known. In this article, I will show you JavaScript tricks that you've never heard about. Let's Explore some of them:

1. Destructuring

With the help of destructuring, you can do awesome things like:

1.1. Swap variables

If you ever need to swap two variables. You can do it with the help of destructuring, provided that the variables are declared with let, or var but not const.
Also, you should be using ES6 or above.

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

1.2. Accessing nested objects

Previously, if you wanted to access a nested object, you would have to do something like this:

const obj = {
  a: {
    b: {
      c: 1
    }
  }
};
const value = obj.a.b.c;
console.log(value); // 1

But now, with the help of destructuring, you can do it in a much simpler way:

const obj = {
  a: {
    b: {
      c: 1
    }
  }
};
const { a: { b: { c } } } = obj;
console.log(c); // 1

const { a: { b: { c:value } } } = obj;
// and yes, you can rename the variable
console.log(value); // 1

1.3. Pass an object as function parameters

If you want to pass different parameters to a function, why not pass an object instead? It will make your code more readable. and you can use destructuring to access the properties of the object.

function foo({ a, b, c }) {
  console.log(a, b, c);
}
foo({ a: 1, b: 2, c: 3 }); // 1 2 3

2. Spread & Rest Operators

2.1. Spread Operator

The spread operator ... is used to spread an array into its elements. It can also be used to spread an object into key-value pairs.

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

const obj = { a: 1, b: 2, c: 3 };
console.log(...obj); // a b c

2.1.1. Spread in function calls

You can use the spread operator to pass an array as arguments to a function.

function foo(a, b, c) {
  console.log(a, b, c);
}
const arr = [1, 2, 3];
foo(...arr); // 1 2 3

2.1.2. Spread in array literals

You can use the spread operator to create a new array from an existing array.

const arr = [1, 2, 3];
const arr2 = [...arr, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

2.1.3. Spread in object literals

You can use the spread operator to create a new object from an existing object.

const obj = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj, d: 4, e: 5, f: 6 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

2.2. Rest Operator

The rest operator ... is used to collect multiple elements and put them into an array. It can also be used to collect multiple key-value pairs and put them into an object.

const arr = [1, 2, 3, 4, 5];
const [a, b, ...rest] = arr;
console.log(a, b, rest); // 1 2 [3, 4, 5]

const obj = { a: 1, b: 2, c: 3, d: 4, e: 5 };
const { a, b, ...rest } = obj;
console.log(a, b, rest); // 1 2 { c: 3, d: 4, e: 5 }

3. Ternary Operator

The ternary operator is the only operator that takes three operands. It is often used as a shortcut for the if statement.

const a = 1;
const b = 2;
const c = a > b ? a : b;
console.log(c); // 2

4. Template Literals

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

const name = "John";
const age = 20;
const str = `Hello, my name is ${name} 
I'm ${age} years old.`;
console.log(str); 
// Hello, my name is John 
// I'm 20 years old.

5. Short-circuiting

Short-circuiting is a way to make your code more readable. It is a way to use logical operators in a way that they return the value of one of the specified operands, instead of always returning true or false.

5.1. Logical AND (&&)

The logical AND operator (&&) returns the value of the first operand if it can be converted to false; otherwise, it returns the value of the second operand.

const a = 1;
const b = 2;
const c = a && b;
console.log(c); // 2

5.2. Logical OR (||)

The logical OR operator (||) returns the value of the first operand if it can be converted to true; otherwise, it returns the value of the second operand.

const a = 1;
const b = 2;
const c = a || b;
console.log(c); // 1

5.3. Nullish Coalescing Operator (??)

The nullish coalescing operator (??) returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

The main difference between || and ?? is that || returns the right-hand side operand if the left-hand side operand is false, whereas ?? returns the right-hand side operand if the left-hand side operand is null or undefined.

const a = 1;
const b = 2;
const c = a ?? b;
console.log(c); // 1

6. Immediately Invoked Function Expression (IIFE)

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. One of the most common uses of an IIFE is to execute a function without polluting the global scope.

(function () {
  console.log("Hello, World!");
})();
// Hello, World!

7. Comma Operator

The comma operator (,) is used to evaluate each of its operands (from left to right) and return the value of the last operand.

const a = 1;
const b = 2;
const c = 3;
const d = a, c = a + b + c, c;
console.log(d); // 6

8. Optional Chaining

Previously, if you wanted to access a property of an object that might be undefined or null, you would have to check if the object exists first.

For example:

const obj = { a: { b: 1 } };

if (obj && obj.a && obj.a.b) {
  console.log(obj.a.b); // 1
}

With the optional chaining operator (?.), you can access properties of nested objects without having to check if the parent objects exist. If the reference is undefined or null, the expression short-circuits with a return value of undefined.

const obj = {
  a: {
    b: {
      c: 1,
    },
  },
};
const c = obj?.a?.b?.c;
console.log(c); // 1

9. Double Bang (!!) Operator

The double bang operator (!!) is used to convert any value to a boolean. It is often used to convert a value to a boolean in a shorter way.

const a = 1;
const b = !!a;
console.log(b); // true

10. Double Tilde (~~) Operator

The double tilde operator (~~) is used to convert any value to an integer. It is often used to convert a value to an integer in a shorter way.

const a = 1.5;
const b = ~~a;
console.log(b); // 1

Thank you so much for taking the time to read the blog post! I appreciate it, and I hope you found it helpful/informative. If you have any questions or comments, feel free to leave them below, and I’ll be happy to answer them. Again, thank you for reading, and have a great day!

Flatten Multidimensional array with Javascript

Kishor U. — Mon, 10 Oct 2022 15:52:39 +0000

Problem

You have a multidimensional array and you want to flatten it into a single array.

const arr = [[1, 2], [3, 4], [5, 6, [7, 8, [9, 10]]]];

Solution

Here, we use the Array.prototype.reduce() method to flatten the array. We use the Array.isArray() method to check if the current element is an array. If it is, we recursively call the flatten() function on it and concatenate the result to the accumulator. If it is not, we simply concatenate the element to the accumulator.

const flatten = arr => arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);

Usage

flatten(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

References

Svelte and SvelteKit: The perfect frontend solution

Kishor U. — Tue, 20 Sep 2022 14:35:35 +0000

Photo by Ferenc Almasi on Unsplash

Undeniably front-end development has made great strides in recent years. With the introduction of frameworks like React and Angular, development has become more efficient and organized. However, there’s always room for improvement, and that’s where Svelte and SvelteKit come in. Svelte is a new framework aiming to make front-end development more efficient and organized. In this article, we’ll take a look at Svelte and SvelteKit, and how they can help you build better web applications. Let’s get started!

What is Svelte?

Svelte is a component-based JavaScript framework similar to React and Vue.js. But unlike those frameworks, Svelte doesn’t use the virtual DOM approach. Instead, it converts your components into highly efficient imperative code that updates the DOM directly, so you don’t have to worry about messy code or wasted resources. Your app will be as fast as possible.

Svelte is also a compiler, meaning that you can write your code in a superset of JavaScript called Svelte, which will convert into regular JavaScript at build time that runs in the browser.

What is SvelteKit?

Svelte provides a productive and flexible approach to facilitating the creation of web applications. SvelteKit is a framework that builds on top of Svelte to provide a complete solution for building web applications. Despite its young age, many companies already use SvelteKit in production, which has gained massive popularity among developers.

Like Next.js, SvelteKit also offers server-side rendering, code-splitting, static site generation, and many other features. It includes a build system, a router, a state management library, and a testing library.

While the build process for Svelte applications is the most innovative aspect of the framework, it is also easy to learn. The documentation is excellent and easy to follow through.

Why use Svelte/SvelteKit?

Well, now that we know what SvelteKit is, let’s see why you should use it. Here are 10 reasons why you should use SvelteKit.

Svelte is a lightweight framework that makes building web applications fast and easy.
Svelte provides excellent performance thanks to its small size and efficient code.
Svelte is easy to learn and use, and its syntax is clean and concise.
Svelte generates highly efficient code that runs quickly on web browsers.
Svelte offers great flexibility and extensibility, allowing you to customize your web applications to suit your needs.
Svelte is well-supported by a large and active community, and there are many resources available to help you get started.
Svelte is open source and released under the MIT license, so you can use it for any project, commercial or otherwise.
Svelte is backed by major companies such as Google, Microsoft, and Amazon, so you can be confident that it is here to stay.
Svelte is constantly evolving and improving, with new features and updates being released regularly.
Svelte is an excellent choice for building modern web applications, and it is sure to become even more popular in the future.

Getting started with Svelte and Sveltekit

The official Svelte website is a great place to start, especially the quick start guide, which will walk you through the basics of creating a Svelte application.

Once you’ve got a handle on the basics, you can start exploring some of the more advanced features of Svelte by checking out the documentation. And if you’re looking for inspiration, check out the Svelte showcase to see what others have built with the tool.

Finally, if you’re ready to start building something yourself, head to the Svelte REPL to start writing code. With the REPL, you can try out Svelte features and see the results immediately, so it’s a great way to get a feel for how the tool works.

If you’re looking to get started with svelte and sveltekit, here are some great resources:

The official Svelte documentation
The official SvelteKit documentation
Frontend master’s Svelte Course by Rich Harris (creator of Svelte)
Svelte.js Crashcourse by Traversy Media
Svelte.js subreddit for your queries
Svelte.js — The Complete Guide by Maximilian Schwarzmüller
SvelteKit Tutorial by The Net ninja
Collection of SvelteKit playlists by Joy of Code

**PS: **If you’re new to JavaScript, I suggest you first master the JavaScript fundamentals and new concepts introduced in ES6 and ES7. Once you’ve got a good grasp of those, then you can start learning frameworks.

Conclusion

Svelte and SvelteKit are both excellent front-end solutions that offer a great deal of flexibility and power. While they overlap in functionality, they each have unique strengths that make them the perfect choice for different projects. If you’re looking for a framework that makes it easy to create fast, lightweight applications, then Svelte is the perfect option.

On the other hand, if you need a more comprehensive solution that offers more features and flexibility, then SvelteKit is the way to go. Whichever option you choose, you’ll get a great solution to help you build amazing web applications.