There's a version of JavaScript discourse that's all about the flashy stuff, new framework releases, edge runtimes, the latest React drama. Which is fine, but it means some genuinely useful language features stay in the background, used constantly but rarely discussed. I want to talk about those.
Not async/await everyone knows that. Not arrow functions, those have been covered to death. The stuff that quietly makes your code better without you necessarily realizing why.
Optional chaining and nullish coalescing: still underappreciated
Yes, these have been around since ES2020. And yes, most developers use them. But I still see code in PRs that does things like:
const city = user && user.address && user.address.city;
When it could just be:
const city = user?.address?.city;
The optional chaining operator (?.) short-circuits to undefined instead of throwing. Combine it with nullish coalescing (??) for a default value and you've got something genuinely elegant:
const city = user?.address?.city ?? 'Unknown';
These aren't new. They're just still being underused in codebases that grew up before they existed and never got a thorough refactor.
Array destructuring with defaults and skipping elements
Most developers know basic array destructuring. Fewer use the full range of what it can do. You can skip elements, set defaults, and rename in a single line:
const [,, third = 'fallback'] = someArray;
That double comma skips the first two elements. The = 'fallback' is a default if the third element is undefined. Small things. Surprisingly useful in utility functions where you're pulling specific values out of consistently shaped arrays.
"The best JavaScript knowledge isn't about knowing the most features, it's knowing which feature solves the problem cleanly, without over-engineering it."
Object.entries() and chained array methods for data transformation
This pattern comes up constantly in real-world code and I don't see it talked about enough. You have an object; you want to filter or transform its properties and then get an object back. The clean way:
const filtered = Object.fromEntries(
Object.entries(config)
.filter(([key, value]) => value !== null)
);
Object.entries() gives you an array of [key, value] pairs. You chain your array methods. Object.fromEntries() reconstructs the object. It's readable, it's functional, and it avoids the usual dance of reduce with an accumulator object that confuses anyone reading the code later.
WeakMap for private-ish data and memory-conscious caching
Private class fields with # syntax is great, but WeakMap solves a slightly different problem: associating data with an object without preventing garbage collection. The classic use case is caching computed results keyed to DOM nodes or class instances, when the object gets garbage collected, the entry disappears too. No memory leak, no manual cleanup.
const cache = new WeakMap();
function getMetadata(element) {
if (!cache.has(element)) {
cache.set(element, computeExpensiveMetadata(element));
}
return cache.get(element);
}
This is the kind of pattern that doesn't come up in tutorials but shows up in production code at companies building complex UIs. Worth knowing.
Structured clone: the deep copy you've been looking for
For years the go-to deep clone was JSON.parse(JSON.stringify(obj)). It works for simple data but breaks with Date objects, undefined, functions, and circular references. Libraries like Lodash have _.cloneDeep. But since 2022, you've had a native option:
const deepCopy = structuredClone(original);
Handles Date, Map, Set, ArrayBuffer, circular references. Available in all modern browsers and Node 17+. Still seeing it absent from codebases that should be using it.
The Intersection Observer for scroll-based logic
If you're still attaching scroll event listeners to window for lazy loading or animation triggers, please stop. The Intersection Observer API has been broadly available for years and it's dramatically more performant, it fires callbacks only when elements enter or leave the viewport, without blocking the main thread.
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll')
.forEach(el => observer.observe(el));
Clean, efficient, and a significant improvement in user experience on content-heavy pages. Teams offering web development services India businesses rely on should be reaching for this by default rather than scroll listeners.
None of these features are obscure or experimental. They're all stable, well-supported, and genuinely useful in day-to-day work. They just don't get talked about because they're not new. But "not new" doesn't mean "not worth knowing well."
Top comments (0)