Best 5 Hidden Javascript Tricks Every Dev should know

1+

Javascript is a dominated language for current era. Typescript is an advance version of Javascript with OOPS concept.  Now more than ever, with frameworks like Node or even on its own, it is basically everywhere.

So today I am going to show you best five hidden JavaScript tricks which every developer should know.

💡 Fun JS Fact: We all know about the typeof null which returns "object" , even if null is supposed to be a primitive type.

So here are 5 hidden javascript features that I found useful for some specific scenarios. Let’s go 💪🏻

The + Operator

What? The + operator? I already know that one since 1st grade

Yeah, of course, but here it’s not about the arithmetic operator:

It has another use that could be seen as “converting the given expression to a Number”, but might also reveal other interesting use cases:

Even if these results could be obtained with the Number() constructor, it seems and feels much cleaner with the + operator for some cases.

💡 For the last example, we are overriding the valueOf() method of the random object, and the + operator “grabs” its value by converting it to a Number

The debugger Statement

Wait, can’t I just debug myself?

Of course you can! Actually, there is a lot of way to debug your JavaScript applications. 🕷️

With the number of different methods attached to the console object, you can customize most of the logging statements.

But one way that I found quite different and that’s not really known is by using the debugger statement.

For browser-based JS applications, it provides a quick and simple way to place breakpoints, and gaining access rapidly to the powerful developer tools:

Best 5 Hidden Javascript Tricks
Best 5 Hidden Javascript Tricks

As I said, this might not be the best way to handle debugging for some apps, but I thought it was interesting to demonstrate this “hidden” feature.

💡 You can also enable it for your node scripts by passing the --inspect flag, and connecting to your session remotely. However, I suggest attaching to your IDE debugger for NodeJS apps, it is cleaner this way.

The comma Operator

Hum.. what? Let me clarify.

I am not talking about the comma separator that we see for separating objects or elements in a container like const arr = [2, 7, 4, 8]

In the expression const a = (2, 3) , the comma operator allows the whole expression in parenthesis to be evaluated, let’s see some interesting examples:

Basically, this operator is performing both and && and || between the left and right operands, because it executes both, regarding of their state.

💡 If you are still confused about its usage, think about it this way: it allows you to evaluate multiple expressions where JavaScript expects one. It might be to render a more elegant code, or to debug more easily.

The Set Object

This one I am 100% sure you that you already heard about it

It was introduced with ES6, and it’s basically the same kind of object you would expect it to be if you are familiar with Python’s set()

It might come in handy for various situations:

💡 You can find various other set operations on the MDN website, or you might want to implement them by yourself!

The Navigator & Performance API’s

Don’t worry, no keys or access tokens!

In fact it is a bit a particular case here, because those are two Web APIs that are available in the browser. 🌐

Web APIs are typically used with JavaScript, although this doesn’t always have to be the case.

💡 These are just 2 out of the numerous web APIs you can find on the web! Feel free to explore them here.

Finally, here is a gist containing executable code:

Happy JavaScript hacking! 👨🏻‍💻

1+