{"id":3302,"date":"2026-06-02T08:25:50","date_gmt":"2026-06-02T07:25:50","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=3302"},"modified":"2026-06-02T08:25:52","modified_gmt":"2026-06-02T07:25:52","slug":"hidden-gems-inside-modern-javascript","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/hidden-gems-inside-modern-javascript\/","title":{"rendered":"Hidden Gems Inside Modern JavaScript"},"content":{"rendered":"\n

Modern JavaScript isn\u2019t just let<\/code>, const<\/code>, arrow functions, and promises anymore. Over the years, the language has quietly grown a set of powerful \u201chidden gems\u201d \u2014 features that many developers either overlook or never fully explore, yet they can dramatically improve code clarity, performance, and expressiveness.<\/p>\n\n\n\n

\"Tor<\/a><\/figure>\n\n\n\n

Here are some of the most underrated features hiding in plain sight inside modern JavaScript.<\/p>\n\n\n\n

1. Nullish Coalescing (??)<\/h2>\n\n\n\n

Most developers rely on ||<\/code> for default values, but that can be dangerous.<\/p>\n\n\n\n

const name = user.name || \"Guest\";<\/code><\/pre>\n\n\n\n
This treats 0, false, and “”<\/strong> as \u201cmissing values,\u201d which is often wrong.<\/p>\n\n\n\n
Enter the nullish coalescing operator:<\/p>\n\n\n\n
const name = user.name ?? \"Guest\";<\/code><\/pre>\n\n\n\n
Now it only falls back when the value is null<\/code> or undefined<\/code>. Much safer and more precise.<\/p>\n\n\n\n
2. Optional Chaining (?.)<\/h2>\n\n\n\n
Deep object access used to be a nightmare:<\/p>\n\n\n\n
const city = user && user.address && user.address.city;<\/code><\/pre>\n\n\n\n
Now:<\/p>\n\n\n\n
const city = user?.address?.city;<\/code><\/pre>\n\n\n\n
If anything in the chain is missing, JavaScript safely returns undefined<\/code> instead of throwing an error.<\/p>\n\n\n\n
This is one of the most practical modern JavaScript upgrades.<\/p>\n\n\n\n
3. Dynamic Import()<\/h2>\n\n\n\n
Instead of loading everything upfront, you can load code only when needed.<\/p>\n\n\n\n
const module = await import(\".\/analytics.js\");\nmodule.trackEvent();<\/code><\/pre>\n\n\n\n
This is powerful for performance optimization, especially in large apps where bundle size matters.<\/p>\n\n\n\n
Think of it as \u201clazy loading for logic.\u201d<\/p>\n\n\n\n
4. Object.fromEntries()<\/h2>\n\n\n\n
You probably know Object.entries()<\/code>:<\/p>\n\n\n\n
const arr = [[\"name\", \"John\"], [\"age\", 25]];<\/code><\/pre>\n\n\n\n
But the reverse is often ignored:<\/p>\n\n\n\n
const obj = Object.fromEntries(arr);<\/code><\/pre>\n\n\n\n
This becomes extremely useful when transforming data:<\/p>\n\n\n\n
const filtered = Object.fromEntries(\n  Object.entries(user).filter(([key]) => key !== \"password\")\n);<\/code><\/pre>\n\n\n\n
5. BigInt (Safe Large Numbers)<\/h2>\n\n\n\n
JavaScript numbers break past 2^53 - 1<\/code>.<\/p>\n\n\n\n
const big = 9007199254740991n;<\/code><\/pre>\n\n\n\n
The n<\/code> suffix creates a BigInt.<\/p>\n\n\n\n
You can now safely handle very large integers used in finance, cryptography, and databases.<\/p>\n\n\n\n
6. Array.at()<\/h2>\n\n\n\n
Negative indexing used to require hacks:<\/p>\n\n\n\n
const last = arr[arr.length - 1];<\/code><\/pre>\n\n\n\n
Now:<\/p>\n\n\n\n
const last = arr.at(-1);<\/code><\/pre>\n\n\n\n
Cleaner, more readable, and less error-prone.<\/p>\n\n\n\n
7. Structured Clone (Deep Copy Done Right)<\/h2>\n\n\n\n
Copying objects used to be messy:<\/p>\n\n\n\n
const copy = JSON.parse(JSON.stringify(obj));<\/code><\/pre>\n\n\n\n
But this breaks functions, dates, maps, etc.<\/p>\n\n\n\n
Now:<\/p>\n\n\n\n
const copy = structuredClone(obj);<\/code><\/pre>\n\n\n\n
It properly clones complex data structures without hacks.<\/p>\n\n\n\n
8. Top-Level Await<\/h2>\n\n\n\n
In ES modules, you can now use await<\/code> outside functions:<\/p>\n\n\n\n
const data = await fetch(\"https:\/\/api.example.com\/data\");<\/code><\/pre>\n\n\n\n
This simplifies module initialization and avoids unnecessary async wrappers.<\/p>\n\n\n\n
9. Private Class Fields<\/h2>\n\n\n\n
Encapsulation used to rely on conventions like _privateVar<\/code>.<\/p>\n\n\n\n
Now JavaScript enforces it:<\/p>\n\n\n\n
class BankAccount {\n  #balance = 0;\n\n  deposit(amount) {\n    this.#balance += amount;\n  }\n}<\/code><\/pre>\n\n\n\n
Anything with #<\/code> is truly private \u2014 inaccessible outside the class.<\/p>\n\n\n\n
10. Promise.allSettled()<\/h2>\n\n\n\n
Unlike Promise.all()<\/code>, which fails fast, this waits for everything:<\/p>\n\n\n\n
const results = await Promise.allSettled([\n  fetch(\"\/api\/users\"),\n  fetch(\"\/api\/orders\"),\n]);<\/code><\/pre>\n\n\n\n
You get success and failure results together \u2014 perfect for dashboards and batch operations.<\/p>\n\n\n\n
Final Thoughts<\/h2>\n\n\n\n
Modern JavaScript is no longer just a scripting language \u2014 it’s a full-scale engineering<\/a> tool with layers of hidden power. Most developers only use the \u201csurface syntax,\u201d but these lesser-known features unlock:<\/p>\n\n\n\n