Void Operator

JavaScript has a unary void operator. You might have seen it used as void(0) or void 0 . It has a single purpose in life — Evaluate the expression to its right and return undefined. Using ‘0’ is just a convention. You don’t necessarily have to use ‘0’, it can be any valid expression like void <expression> and it still returns undefined.

void operator

Why create a special keyword to return undefined instead of just returning undefined?

Sounds a bit redundant, doesn’t it ? 🚩 Fun Fact Well, turns out, before ES5 you could actually assign a new value to the original undefined like undefined = "abc" , in most browsers.

Hence, defining the undefined!

In those days, using void was a way to ensure, you are always returning the original undefined.

Constructor Brackets are optional

Yes, the parentheses we add after class name while invoking a constructor — completely optional! 😮 (Provided that you don’t need to pass any arguments to the Constructor)

Both the code styles below are considered to be valid JS syntax, and will give you exact same results!

Constructor brackets are optional

IIFE Brackets can be skipped

The syntax for IIFE (Immediately Invoked Functional Expression) was always a bit odd for me.

What’s up will all the brackets?

Well turns out those extra brackets are needed just to tell the JavaScript parser, that the upcoming code is a Functional Expression and not a Function. Knowing this, one can imagine, there are many ways to skip those extra brackets & still make a valid IIFE.

IIFE (without return)

The void operator tells parser that the code is functional expression. Hence, we can skip brackets around function definition. And guess what? We can use any unary operators (void, +, !, -, etc.) and this still works!

This is so cool!

However, if you are a keen observer, you may wonder,

Won’t the unary operator affect any result returned from the IIFE ?

Well, it will affect the result. But the good news is, if you care about the result and say you are storing it in some variable, then you don’t need the extra brackets in the first place.

That’s true!

IIFE with return

We add those brackets just for better human readability.

For a deeper dive on IIFE checkout this cool article by Chandra Gundamaraju

With Statement

Did you know, JavaScript has a with statement block? with is actually a keyword in JS. The syntax to write a with block is as follows

with (object)

statement // for multiple statements add a block with (object) {

statement

statement

...

}

with adds all the properties of the “object” passed, in the scope chain used for evaluating the statements.

with block example

🚩 Fun Fact With block sounds pretty cool, right? It’s even better than object destructuring.

Well, not really.

The use of the with statement is generally discouraged, as it was deprecated. It is completely forbidden in strict mode. Turns out, with blocks adds some performance and security problems in the language. Bummer!

The Function constructor

The function statement is not the only way to define a new function; you can define your function dynamically using Function() constructor along with the new operator.

Dynamic function with Function constructor

The last constructor param is the stringified code of the function and other parameters before that are the function arguments.

🚩 Fun Fact Function constructor is the mother of all constructors in JavaScript. Even Object’s constructor is Function constructor. And Function’s own constructor is also Function itself. Hence, calling object.constructor.constructor... enough times will eventually return the Function constructor on any object in JavaScript.

Function Properties

We all know Functions are first class objects in JavaScript. Hence, no one is stopping us from adding custom properties to a Function. It is perfectly valid JS thing to do. Yet, it is rarely used.

So when would we want to do this?

Well, there are a few good use cases for this. For example,

Configurable Functions

Let’s say we have a function called greet. We want our function to print a different greeting message based on different locales. This locale should also be configurable. We can maintain a global locale variable somewhere or we can implement the function using functional properties as shown below

greet function with locale property

Function with Static Variables

Another similar example. Let’s say, you want to implement a Number Generator that generates a sequence of ordered numbers. Normally, you’ll use Class or IIFE with a static counter variable to keep track of last value. This way we restrict access to the counter and also avoid polluting the global space with extra variables.

But what if we want the flexibility to read or even modify the counter & yet not pollute the global space?

Well we could still create a Class, with a counter variable and some extra methods to read it; or we can be lazy and just use properties on a function.