The lesser known JavaScript features every senior developer should know

JavaScript is amazing and it has a ton of features that might not take the spotlight in your everyday coding but are as cool, useful and important as the rest of them. Besides, if you wanna become a senior developer, learning about every little detail about your porgramming language of choice is definitely a way to go. Let's dive in! The optional chaining operator I know what you're thinking, I already know this one! And I mean sure, if you've been a JavaScript developer longer than like a few weeks you've probably come across the optional chaining operator many times as it is very helpful and widely adopted in most modern-day projects. However, this operator has more to offer than what can seem at first glance because not only you can use it to access non-existing properties on types that may not even be objects but you can also use it in combination with functions that may or may not be defined. Consider the following TypeScript code. function notSoCoolFunction(someCallback?: () => void) { if(someCallback) { someCallback(); } } function veryCoolFunction(someCallback?: () => void) { someCallback?.(); } Here we have two differently named functions that execute pretty much the same code. The only difference is that in notSoCoolFunction, we have to explicitly run a check if the someCallback was indeed provided as an argument, whereas veryCoolFunction doesn't make any explicit runtime checks to determine if we've been provided a callback function or not. It simply calls the optional someCallback function utilizing the optional chaining operator syntax. As you might have noticed, the syntax is much shorter and readable as we don't have to make any assertions about whether this optional someCallback argument is omitted or not. Of course, that doesn't affect the correctness of our program's execution because if the someCallback is omitted, the JS engine will simply continue to execute other code, and no runtime errors like TypeError will be thrown. Pretty neat don't you think? You can find more about it here The new.target meta-property Here's something 98% of JavaScript developers have never even seen being used as it is rather an old feature introduced in some of the earlier versions of ECMAScript, rarely applicable unless you're doing some very obscure OOP magic in your code. Here's what it is: new.target is a meta-property that lets you detect whether a function or constructor was called using the new operator. In constructors and functions invoked using the new operator, new.target returns a reference to the constructor or function that new was called upon. In normal function calls, new.target is undefined. The new.target syntax consists of the keyword new, a dot, and the identifier target. Because new is a reserved word, not an identifier, this is not a property accessor, but a special expression syntax. The new.target meta-property is available in all function/class bodies; using new.target outside of functions or classes is a syntax error. One practical example of how it can be used is checking whether a function is called as a constructor or as a regular function: function Foo() { if (!new.target) { throw new TypeError("calling Foo constructor without new is invalid"); } } try { Foo(); } catch (e) { console.log(e); // Expected output: TypeError: calling Foo constructor without new is invalid } You can read more about it here The void operator Alright then, let's finish off with yet another lesser-known JavaScript feature that can be quite handy in certain situations: the void operator. This operator is used to discard the return value of an expression, effectively returning undefined. It's particularly useful when you want to evaluate an expression for its side effects but don't care about its return value. Let's start with a simple example: console.log(void 42); // Outputs: undefined In this example, the void operator discards the value 42, resulting in undefined. Now, let's dive into a more practical use case involving IIFEs (Immediately Invoked Function Expressions). Sometimes, you might want to execute a function immediately without leaving any trace of its return value. Here's how you can do it: void function iifeExample() { console.log("This function runs immediately!"); return "You won't see this!"; }(); In this example, the IIFE iifeExample is executed immediately upon definition. The void operator ensures that the return value of the function is discarded, so even though the function returns a string, it won't be used or stored anywhere. This can be useful in scenarios where you want to run some initialization code without polluting the global scope with unnecessary return values. The void operator is a neat tool to have in your JavaScript toolkit, allowing you to write cleaner and more intentional code, especially when dealing with expressions where the return value is not needed. You

Feb 27, 2025 - 16:51
 0
The lesser known JavaScript features every senior developer should know

JavaScript is amazing and it has a ton of features that might not take the spotlight in your everyday coding but are as cool, useful and important as the rest of them. Besides, if you wanna become a senior developer, learning about every little detail about your porgramming language of choice is definitely a way to go. Let's dive in!

The optional chaining operator

I know what you're thinking, I already know this one! And I mean sure, if you've been a JavaScript developer longer than like a few weeks you've probably come across the optional chaining operator many times as it is very helpful and widely adopted in most modern-day projects. However, this operator has more to offer than what can seem at first glance because not only you can use it to access non-existing properties on types that may not even be objects but you can also use it in combination with functions that may or may not be defined. Consider the following TypeScript code.

function notSoCoolFunction(someCallback?: () => void) {
  if(someCallback) {
    someCallback();
  }
}

function veryCoolFunction(someCallback?: () => void) {
  someCallback?.();
}

Here we have two differently named functions that execute pretty much the same code. The only difference is that in notSoCoolFunction, we have to explicitly run a check if the someCallback was indeed provided as an argument, whereas veryCoolFunction doesn't make any explicit runtime checks to determine if we've been provided a callback function or not. It simply calls the optional someCallback function utilizing the optional chaining operator syntax.

As you might have noticed, the syntax is much shorter and readable as we don't have to make any assertions about whether this optional someCallback argument is omitted or not. Of course, that doesn't affect the correctness of our program's execution because if the someCallback is omitted, the JS engine will simply continue to execute other code, and no runtime errors like TypeError will be thrown. Pretty neat don't you think?

You can find more about it here

The new.target meta-property

Here's something 98% of JavaScript developers have never even seen being used as it is rather an old feature introduced in some of the earlier versions of ECMAScript, rarely applicable unless you're doing some very obscure OOP magic in your code.

Here's what it is: new.target is a meta-property that lets you detect whether a function or constructor was called using the new operator. In constructors and functions invoked using the new operator, new.target returns a reference to the constructor or function that new was called upon. In normal function calls, new.target is undefined.

The new.target syntax consists of the keyword new, a dot, and the identifier target. Because new is a reserved word, not an identifier, this is not a property accessor, but a special expression syntax.

The new.target meta-property is available in all function/class bodies; using new.target outside of functions or classes is a syntax error.

One practical example of how it can be used is checking whether a function is called as a constructor or as a regular function:

function Foo() {
  if (!new.target) {
    throw new TypeError("calling Foo constructor without new is invalid");
  }
}

try {
  Foo();
} catch (e) {
  console.log(e);
  // Expected output: TypeError: calling Foo constructor without new is invalid
}

You can read more about it here

The void operator

Alright then, let's finish off with yet another lesser-known JavaScript feature that can be quite handy in certain situations: the void operator. This operator is used to discard the return value of an expression, effectively returning undefined. It's particularly useful when you want to evaluate an expression for its side effects but don't care about its return value.

Let's start with a simple example:

console.log(void 42); // Outputs: undefined

In this example, the void operator discards the value 42, resulting in undefined.

Now, let's dive into a more practical use case involving IIFEs (Immediately Invoked Function Expressions). Sometimes, you might want to execute a function immediately without leaving any trace of its return value. Here's how you can do it:

void function iifeExample() {
  console.log("This function runs immediately!");
  return "You won't see this!";
}();

In this example, the IIFE iifeExample is executed immediately upon definition. The void operator ensures that the return value of the function is discarded, so even though the function returns a string, it won't be used or stored anywhere. This can be useful in scenarios where you want to run some initialization code without polluting the global scope with unnecessary return values.

The void operator is a neat tool to have in your JavaScript toolkit, allowing you to write cleaner and more intentional code, especially when dealing with expressions where the return value is not needed.

You can find more about it here

Now I have a question to the audience, how often do you encounter any of these JavaScript features in your daily coding routine as a developer? I'd be thrilled to hear about your experience, let me know in the comments!