5 JavaScript Features You Didn’t Know About

Whether you’re a new or an experienced developer, these are not-so-well-known JavaScript features that you may have missed out on or forgotten about, as they’re not standard practice.

However, it’s always good to know these to increase your mental dexterity and your JS prowess.

Nullish coalescing operator

The nullish coalescing operator (??) is basically the opposite of the OR (||) logical operator. It returns the right-hand side operand only if the left-hand side is either null or undefined

const x = null;
console.log(x ?? "Hey"); // "Hey"

const y = 10;
console.log(y ?? "Something"); // 10

You can also use the logical nullish assignment (??=) for assigning a variable only if that variable is either null or undefined. For example:

let a = null;
a ??= 10;
console.log(a); // "10"

let b = "something";
b ??= 10;
console.log(b); // "something"

‘with’ statement

The with statement lets you use objects as the scope for a block statement.

For example, take let’s say you want to log the ceil of 0.5, you can do:

console.log(Math.ceil(0.5)); // 1

With with, you can do:

with (Math) {
  console.log(ceil(0.5)); // 1
}

// Out of 'with (Math) {...}', it returns an error
console.log(ceil(0.5)); // Uncaught ReferenceError: ceil is not defined

Note: The use of with has been discouraged for having a couple of caveats and edge cases. You can read more about it on MDN.

function ‘arguments’ array

You always have access to the arguments Array-like object inside a function, even if no parameters are defined:

function sum() {
  let result = 0;
  for (const argument of arguments) {
    result += argument;
  }
  return result;
}

sum(5, 8); // 13

Functions can have properties

Functions in JavaScript are objects and therefore they can have properties attached to them, like so:

function sum() {
  sum.a ??= 10;
  sum.b ??= 20;

  return sum.a + sum.b;
}

console.log(sum()); // 30

sum.a = 30;
console.log(sum()); // 50

Warning: This is simply for the sake of example, normally you would be passing values as parameters instead.

Note: Check “Nullish coalescing operator” above to understand what “??=” does.

WeakSet / WeakMap

A WeakSet/WeakMap is a Set/Map object with 2 main differences:

They can only contain objects
WeakSet/WeakMap holds only references to the objects (hence “weak”). This means that if the referenced object is garbage collected, the entry is deleted.

In essence, a WeakSet/WeakMap allows a developer to keep track of additional info related to a family of objects without adding properties to them directly.

For example, let’s say you want to keep track of how many clicks are made to buttons on a page. However, these buttons may be added and removed dynamically.

Using a Map or Set, you will have to sync the nodes as they are changed. However, using a WeakMap/WeakSet, once the nodes are garbage collected, the entries from WeakMap/WeakSet are removed automatically (no need for syncing on your part = more robust code).