Lesser-Known JavaScript Concepts You Should Know

JavaScript is a deep and fascinating language, full of hidden gems that many developers never explore. In this post, we’ll look at some lesser-known JavaScript concepts that can help you write more efficient and expressive code.

1. Labels in JavaScript

Did you know that JavaScript allows you to label loops and blocks? This can be particularly useful when working with nested loops.

js
outerLoop: for (let i = 0; i < 3; i++) {
    innerLoop: for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) break outerLoop; // Exits both loops
        console.log(i, j);
    }
}

When to Use Labels?

When you need to break out of deeply nested loops. But don’t forget, deeply nested loops are a code smell.
When break or continue on their own aren’t sufficient.

2. Generator Functions with `return` and `throw`

Generator functions are well known for using yield, but did you know they can also handle return and throw?

js
function* gen() {
    yield 1;
    yield 2;
    yield 3;
}

let g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.return("Finished")); // { value: "Finished", done: true }
console.log(g.throw(new Error("Oops!"))); // Throws an error

Why Use This?

You can stop a generator early with return().
You can inject errors dynamically using throw().

3. Object Sealing and Freezing

This one is still commonly known, but still, most developers use plain objects without any restrictions, but JavaScript provides built-in methods to lock down objects.

js
let obj = { a: 1 };
Object.seal(obj);
obj.a = 2; // Allowed ✅
obj.b = 3; // Not allowed ❌

let obj2 = { x: 10 };
Object.freeze(obj2);
obj2.x = 20; // Not allowed ❌
obj2.y = 30; // Not allowed ❌

Differences Between `seal()` and `freeze()`

Method	Can Modify Properties?	Can Add/Remove Properties?
`Object.seal()`	✅ Yes	❌ No
`Object.freeze()`	❌ No	❌ No

4. The `void` Operator

The void operator evaluates an expression and always returns undefined.

js
console.log(void 0); // undefined
console.log(void (2 + 2)); // undefined

js
async function fireAndForget() {
    await postUpdateUserLastLogin(userId);
}

void fireAndForget();

Where is `void` Useful?

In bookmarklets: javascript:void(0);
Ensuring a function always returns undefined.
If you don’t await a promise, you can use void to make your linter happy.

5. Dynamically Creating Functions with `new Function()`

JavaScript allows you to create functions dynamically at runtime.

js
let sum = new Function('a', 'b', 'return a + b');
console.log(sum(3, 4)); // 7

6. Comma Operator `,`

The comma operator allows multiple expressions in a single statement, returning only the last one.

js
let a = (1, 2, 3);
console.log(a); // 3

When to Use It?

When you want to execute multiple expressions in a concise way.
Inside for loops:

js
for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(i, j);
}

7. The `with` Statement

The with statement allows shorthand property access but is discouraged in modern JavaScript due to its unpredictable behavior.

js
let obj = { a: 1, b: 2 };
with (obj) {
    console.log(a, b); // 1, 2
}

Why Avoid `with`?

It can make debugging harder.
Strict mode ('use strict') disallows it.

Conclusion

JavaScript is full of unique features that often go unnoticed. By understanding these lesser-known concepts, you can write more efficient, expressive, and sometimes even mind-blowing code. Do you use any of these features in your projects?

Album of the day: