24 Hidden JavaScript Features Every Developer Should Know

JavaScript stands out as one of the most popular programming languages worldwide. Many coders know its basic features, but there's a goldmine of little-known tricks and abilities that can boost your code—making it neater, quicker, and more robust. This post will explore 24 hidden treasures of JavaScript, explaining each one in plain language and providing simple code examples to follow.

1. Labels with Loops

Labels in JavaScript let you name loops or code blocks so you can use break and continue more effectively. They’re super useful when you have nested loops and need to exit a specific one.

outerLoop:
for (let i = 0; i < 3; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outerLoop;
    console.log(`i=${i}, j=${j}`);
  }
}

This code snippet breaks out of both loops when i and j are both equal to 1.

2. Comma Operator

The comma operator lets you check multiple expressions, but it shows you the outcome of the final one. Although it's not something you come across often, it can be pretty handy for combining expressions in a more efficient way.

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

3. Tagged Template Literals

Tagged templates let you process template literals with a function. They’re great for things like localization, escaping characters or formatting user input.

function tag(strings, ...values) {
  return strings[0] + values.map((v, i) => v.toUpperCase() + strings[i + 1]).join('');
}
const name = "john";
console.log(tag`Hello ${name}`); // Hello JOHN

4. Function Declarations Inside Blocks

You can define functions inside code blocks but in strict mode they won’t be hoisted or accessible outside of that block.

{
  function greet() {
    return "Hello from inside block";
  }
}
console.log(greet());

5. void Operator

The void operator takes an expression and returns undefined. It’s useful when you don’t want to return a value like when working with links.

void(0); // undefined

6. Bitwise Operators for Math

Bitwise operators are your secret weapon for quick math tricks like rounding down numbers or figuring out if they’re even or odd.

let num = 5.9; console.log(num | 0); // 5

7. With Statement

The with statement pulls all properties of an object into the current scope. While it can make your code shorter, it also makes it less predictable, which is why many consider it bad practice.

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

8. Automatic Semicolon Insertion (ASI)

JavaScript has a weird habit of inserting semicolons where they’re missing which can lead to bugs. To avoid this it’s a good idea to add semicolons yourself.

let x = 5 let y = 10 console.log(x + y)

9. in Operator

The in operator checks if a property exists in an object including any properties it might inherit from its prototype chain.

'length' in [] // true

10. instanceof vs typeof

typeof gives you the type of a variable as a string, instanceof checks if an object was created from a particular constructor.

function Car() {} let myCar = new Car(); console.log(typeof myCar); // object console.log(myCar instanceof Car); // true

11. Block-Level Functions (ES6)

When you declare functions inside blocks in strict mode they are confined to that block and won’t pollute the global scope.

'use strict'; { function sayHi() { return 'Hi'; } } sayHi(); // Error in strict mode

12. Debugger Statement

The debugger statement pauses code execution when the developer tools are open making it easier to find bugs.

function test() { debugger; console.log('Debug this'); }

13. eval() Function

The eval() function runs code that’s passed as a string. While it’s a powerful tool it’s a serious risk if you’re using it with user input.

eval("let x = 5; console.log(x);");

14. __proto__ Property

This property is used to set or get the prototype of an object. But it’s outdated so use Object.getPrototypeOf or Object.setPrototypeOf instead.

let obj = {}; obj.__proto__ = Array.prototype; console.log(obj.length);

15. document.write()

This writes content directly to the HTML document. Be careful if you use it after the page has loaded it will overwrite the entire document!

document.write("Hello");

16. Chained Assignment

With chained assignment, you can set the same value for multiple variables all in one go.

let a, b, c; a = b = c = 10;

17. Object Property Shorthand

If your variable name is the same as the property name you can skip repeating it in an object.

const name = "Alice"; const person = { name };

18. Array.fill()

This method lets you quickly create an array filled with a specific value, which is great for initialization.

let nums = new Array(5).fill(0);

19. Array.includes()

This checks if an array contains a specific value, making your code more readable than indexOf

[1, 2, 3].includes(2); // true

20. Destructuring Aliases

When destructuring from an object you can also rename a variable at the same time.

const obj = { a: 1 }; const { a: x } = obj;

21. Default Parameters with Destructuring

When destructuring function parameters, you can set default values. This is super handy for optional parameters.

function greet({ name = "Guest" } = {}) {
  console.log(`Hello ${name}`);
}

22. Nullish Coalescing Operator

This returns the right value if the left value is null or undefined. Unlike || it treats 0 or "" as valid values not falsy.

let val = 0;
console.log(val ?? 10); // 0

23. Dynamic Function Names

You can use variables as function names in object methods by using computed properties. This is great for dynamic behavior.

const name = "greet";
const obj = {
  [name]() {
    return "Hello";
  }
};
console.log(obj.greet());

24. Private Class Fields

By adding a # before a class property you make it private, meaning it can’t be accessed from outside the class. This is awesome for encapsulation.

class Counter {
  #count = 0;
  increment() {
    this.#count++;
  }
  getCount() {
    return this.#count;
  }
}

Wrap-Up

Check out these 24 hidden gems in JavaScript that really show off the language’s power and complexity. Once you master these, you’ll be able to write code that’s not only better but more fun. Keep digging into JavaScript to find more!