JavaScript is a powerful language with many features, but some of its lesser-known capabilities can often go unnoticed. These features might not be used regularly but can make your coding experience much smoother and more efficient. In this article, we’ll dive into 25 unique and lesser-known JavaScript features, providing examples for each, to help you unlock the full potential of JavaScript.
Table of Contents
1. Comma Operator
The comma operator allows you to execute multiple expressions in a single statement. It returns the last expression’s value.
Example:
let a = (1, 2, 3); // a = 3
for (let i = 0, j = 10; i < j; i++, j--); // Executes both conditions simultaneously2. Void Operator
The void operator evaluates an expression and ensures it returns undefined. It’s particularly useful when you want to prevent a default action, like navigating to a new URL.
Example:
void alert("Hello!"); // Alerts and returns undefined
<a href="javascript:void(0)">Prevent navigation</a>3. Labeled Statements
Labeled statements allow you to control the flow of execution in nested loops. You can use break or continue to exit multiple loops simultaneously.
Example:
outer: for (let i = 0; i < 5; i++) {
inner: for (let j = 0; j < 5; j++) {
break outer; // Exits both loops
}
}4. Function Properties
In JavaScript, functions are first-class objects, meaning you can attach properties to them.
Example:
function greet() { return "Hello"; }
greet.count = 0;
greet();
greet.count++; // Tracks how many times the function is called5. in Operator for Array Indices
The in operator can be used to check if an index exists in an array, even for sparse arrays.
Example:
const arr = [1,,3];
console.log(1 in arr); // false (empty slot)6. Bitwise Hacks
Bitwise operators can be used for quick number conversions, though use them cautiously due to their impact on performance.
Example:
~~3.14; // Returns 3 (truncates the decimal part)
5.6 | 0; // Returns 5 (floors the number to a 32-bit integer)7. Tagged Template Literals
Tagged templates allow you to process template literals with custom logic. You can use them to add dynamic behavior inside template strings.
Example:
function bold(strings, ...values) {
return strings.reduce((acc, str, i) => acc + str + (values[i] ? `<b>${values[i]}</b>` : ""), "");
}
bold`Hello ${"world"}!`; // "Hello <b>world</b>!"8. Debugger Statement
The debugger statement allows you to programmatically trigger breakpoints in your code. It pauses execution when DevTools is open, helping you inspect variables.
Example:
if (error) debugger; // Pauses execution when the error occurs9. Function Name Property
JavaScript allows you to access the name of a function, even if it’s an anonymous function.
Example:
const foo = function bar() {};
console.log(foo.name); // Outputs: "bar"10. Autoboxing Primitives
JavaScript automatically wraps primitives (like strings and numbers) into their corresponding object types to call methods.
Example:
"hello".toUpperCase(); // Works, JavaScript creates a temporary String object11. NaN Inequality
One interesting quirk of JavaScript is that NaN is not equal to itself. It’s the only value in JavaScript that has this behavior.
Example:
NaN === NaN; // false
Number.isNaN(NaN); // true (safe way to check)12. new.target
The new.target property allows you to check if a function was called using the new keyword. This is useful in constructors to ensure proper instantiation.
Example:
function Foo() {
if (!new.target) throw "Use 'new'!";
}13. Proxy and Reflect
Proxy and Reflect are used for metaprogramming. You can intercept operations on objects, like get and set operations, to add custom logic.
Example:
const handler = { get: (target, prop) => prop in target ? target[prop] : 42 };
const p = new Proxy({}, handler);
p.answer; // Returns 4214. Override valueOf and toString
You can override the valueOf and toString methods to control how objects are converted to primitive values.
Example:
const obj = {
valueOf() { return 100; }
};
console.log(obj + 1); // Outputs: 10115. Logical Assignment Operators (ES2021)
These operators combine logical expressions with assignment. This can simplify code and make it more readable.
Example:
let x;
x ||= "default"; // Same as: x = x || "default";16. Private Class Fields (ES2022)
With ES2022, JavaScript introduced private class fields, marked with #, to encapsulate data.
Example:
class Counter {
#count = 0; // Private field
increment() { this.#count++; }
}17. Unicode Variable Names
You can use Unicode characters in variable names, including Greek symbols and emojis, which allows for creative and expressive code.
Example:
const π = 3.1415; // Valid in non-strict mode18. WeakMap and WeakSet
WeakMap and WeakSet are used to store weak references to objects, preventing memory leaks when objects are no longer needed.
Example:
const wm = new WeakMap();
wm.set({}, "temporary data"); // Key is garbage-collectible19. Labeled Function Expressions
Labeled function expressions help with recursion when you need to refer to the function itself inside the expression.
Example:
const factorial = function calc(n) {
return n <= 1 ? 1 : n * calc(n - 1);
};20. Non-Enumerable Properties
Using Object.defineProperty(), you can define properties that are not enumerable, meaning they won’t appear in Object.keys().
Example:
const obj = {};
Object.defineProperty(obj, "secret", { value: 42, enumerable: false });
console.log(obj.secret); // Outputs: 42, but not listed in Object.keys(obj)21. globalThis
globalThis provides a universal reference to the global object, whether you’re in a browser or Node.js environment.
Example:
console.log(globalThis); // "Window" in browsers, "global" in Node.js22. Optional Chaining (?.) and Nullish Coalescing (??)
Optional chaining allows you to safely access deeply nested properties, and the nullish coalescing operator handles null and undefined cases.
Example:
const name = user?.profile?.name ?? "Anonymous"; // If profile or name is undefined, returns "Anonymous"23. String.raw
String.raw returns the raw string without interpreting escape sequences, useful when you want to preserve formatting exactly as written.
Example:
String.raw`Hello\nWorld`; // Outputs: "Hello\\nWorld" (literal backslash)24. Immediately Invoked Arrow Functions (IIFE)
You can immediately invoke an arrow function, which is useful for creating isolated scopes.
Example:
(() => console.log("IIFE"))(); // Immediately invoked arrow function25. Array Methods on Array-Like Objects
You can borrow array methods, such as slice, to work with array-like objects like arguments.
Example:
Array.prototype.slice.call(arguments); // Converts arguments to an arrayThese 25 lesser-known JavaScript features provide you with powerful tools that can streamline your code and make it more efficient. Whether you’re debugging, working with data structures, or managing functions, these features enhance the flexibility and expressiveness of your code. Start incorporating them into your projects, and you’ll soon notice how much easier and more enjoyable coding can be! Happy coding! 🚀