12 Modern JavaScript Snippets
Production-ready JavaScript techniques that use ES2024/ES2025 features to replace Lodash, JSON tricks, and changing array methods
📅 January 10, 2026 · ⏱️ 10 min read · 💻 For intermediate-senior devs
🎯 Key Takeaways
JavaScript’s ES2024 and ES2025 features are now production-ready across major browsers and Node.js 22+. These 12 snippets leverage structuredClone(), immutable array methods, and iterator helpers to write cleaner, bug-resistant code. Each snippet solves a real problem developers face daily—from deep cloning objects without JSON hacks to grouping data without Lodash. Most developers still rely on legacy patterns simply because they don’t know the native alternatives exist. Each snippet is safe to use in production today.
Most JavaScript codebases in 2026 still ship unnecessary utilities, mutation bugs, and legacy patterns—not because better APIs don’t exist, but because most developers don’t know they’re already standardized.
JavaScript continues its dominance in 2026. According to the Stack Overflow Developer Survey 2024, JavaScript remained the most commonly used programming language for the 12th consecutive year, with 62.3% of professional developers using it regularly. [Source: Stack Overflow Developer Survey, 2024]
But here’s what separates productive developers from those drowning in boilerplate: knowing which modern features actually solve real problems. This guide focuses only on standardized JavaScript features that have replaced common utility-library patterns.
Browser Support Note: All snippets work in modern browsers (Chrome 117+, Firefox 119+, Safari 17.4+, and Edge 117+) and Node.js 22+. Always verify support for your actual target environments.
1. What Is the Best Way to Deep Clone Objects in JavaScript in 2026?
structuredClone()—Native Deep Clone (No JSON Hacks)
The problem: The old JSON.parse(JSON.stringify(obj)) hack fails on Date objects, Maps, Sets, RegExp, undefined values, and circular references.
structuredClone() is ideal for data objects, but not suitable for class instances with behavior or prototype-dependent logic.
The solution:
// Deep clone most built-in objects — including Date, Map, Set, ArrayBuffer
const original = {
date: new Date(),
map: new Map([['key', 'value']]),
nested: { deep: { data: [1, 2, 3] } }
};
const clone = structuredClone(original);
clone.date.setFullYear(2030);
console.log(original.date.getFullYear()); // Still 2026 ✓
// Note: structuredClone does not clone functions or DOM nodes, or class instances with methods
Browser support: Chrome 98+, Firefox 94+, Safari 15.4+, Node 17+
According to Bundlephobia, this librarylodash.clonedeep adds 17.4 KB to your bundle. Built-in, this method addresses edge cases that JSON serialization often overlooks.
2. How to Group Array Data by Property in JavaScript Without Lodash?
Object.groupBy()—Native Grouping Without Lodash
This is especially useful for analytics dashboards, API response normalization, and UI sectioning without preprocessing data.
const products = [
{ name: 'Laptop', category: 'Electronics', price: 999 },
{ name: 'Shirt', category: 'Clothing', price: 29 },
{ name: 'Phone', category: 'Electronics', price: 699 },
{ name: 'Jeans', category: 'Clothing', price: 59 }
];
// Group by category — one line
const grouped = Object.groupBy(products, item => item.category);
/*
{
Electronics: [{ name: 'Laptop', ... }, { name: 'Phone', ... }],
Clothing: [{ name: 'Shirt', ... }, { name: 'Jeans', ... }]
}
*/
Browser support: Chrome 117+, Firefox 119+, Safari 17.4+, Node 21+
Object.groupBy() is standardized in ECMAScript 2024. This standardization makes it safe to rely on the method without needing experimental flags or transpilation.
This method preserves input order within each group.
_.groupBy() This method is one of the most commonly imported utilities from Lodash. The full Lodash library can add tens of kilobytes to your bundle when fully imported..Native Object.groupBy() does the same thing with zero dependencies.
💡 Pro Tip: Need non-string keys (objects, symbols)? Use
Map.groupBy()instead—same syntax, returns a Map.
3. When Should You Use Promise.withResolvers() in Modern JavaScript?
In some cases, extracting resolves or rejects outside the executor is necessary.
Old pattern (verbose):
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
ES2024 pattern:
// One line — get promise, resolve, and reject
const { promise, resolve, reject } = Promise.withResolvers();
// Use case: Wrap callback-based APIs
function loadImage(src) {
const { promise, resolve, reject } = Promise.withResolvers();
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
return promise;
}
Browser support: Chrome 119+, Firefox 121+, Safari 17.4+, Node 22+
⚠️ Note: Avoid using this pattern for simple async flows—prefer async/await unless external control is required. This is ideal for wrapping legacy callback APIs where you need to resolve or reject from outside the promise executor.
4. Immutable Array Sorting with toSorted()—No More Mutation Bugs
toSorted(), toReversed(), toSpliced()—Immutable Array Methods
const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
// OLD: sort() mutates the original array
// numbers.sort(); // numbers is now mutated ❌
// NEW: toSorted() returns a new array
const sorted = numbers.toSorted((a, b) => a - b);
console.log(numbers); // [3, 1, 4, 1, 5, 9, 2, 6] — unchanged ✓
console.log(sorted); // [1, 1, 2, 3, 4, 5, 6, 9]
// Also available: toReversed() and toSpliced()
const reversed = numbers.toReversed();
const spliced = numbers.toSpliced(2, 1, 'X');
Browser support: Chrome 110+, Firefox 115+, Safari 16+, Node 20+
React’s state immutability requirement means you’ve been writing [...array].sort() everywhere. JavaScript engines can optimize the new immutable methods as a single operation, making them cleaner. [Source: V8 Blog]
5. Nullish Coalescing + Optional Chaining—Safe Property Access
?? and ?. — Defensive Coding in One Line
const user = {
profile: {
settings: { theme: '' } // Empty string is falsy but valid
}
};
// OLD: || treats falsy values as missing
const theme1 = user.profile?.settings?.theme || 'dark'; // 'dark' ❌
// NEW: ?? only coalesces null/undefined
const theme2 = user.profile?.settings?.theme ?? 'dark'; // '' ✓
// Deep access without TypeError
const avatar = user.profile?.avatar?.url ?? '/default.png';
// Function call safety
user.onLogout?.(); // Only calls if method exists
Common mistake: Using || when you mean ??.
The OR operator treats valid falsy values (0, ”, false) as missing.
Nullish coalescing only triggers on null or undefined.
6. Array.prototype.at()—Negative Index Access
Readable Negative Indexing
const logs = ['start', 'process', 'validate', 'complete'];
// OLD: Access last element
const last1 = logs[logs.length - 1]; // 'complete'
// NEW: Negative index with at()
const last2 = logs.at(-1); // 'complete'
const secondLast = logs.at(-2); // 'validate'
// Works on strings too
const filename = 'document.backup.pdf';
const extension = filename.split('.').at(-1); // 'pdf'
7. Object.hasOwn()—Safer Property Checking
Replace hasOwnProperty
const data = { name: 'Alice', age: 30 };
// OLD: Can break if object overrides hasOwnProperty
data.hasOwnProperty('name'); // true, but unsafe
// What if someone does this?
const malicious = { hasOwnProperty: () => false };
malicious.hasOwnProperty('anything'); // Always false ❌
// NEW: Static method — can't be overridden
Object.hasOwn(data, 'name'); // true
Object.hasOwn(malicious, 'hasOwnProperty'); // true ✓
// Also works with Object.create(null)
const nullProto = Object.create(null);
nullProto.key = 'value';
Object.hasOwn(nullProto, 'key'); // true ✓
8. findLast() and findLastIndex()—Search from the End
Reverse Array Search
const transactions = [
{ id: 1, type: 'deposit', amount: 100 },
{ id: 2, type: 'withdrawal', amount: 50 },
{ id: 3, type: 'deposit', amount: 200 },
{ id: 4, type: 'withdrawal', amount: 75 }
];
// Find the most recent deposit
const lastDeposit = transactions.findLast(t => t.type === 'deposit');
// { id: 3, type: 'deposit', amount: 200 }
// Get its index
const lastDepositIndex = transactions.findLastIndex(t => t.type === 'deposit');
// 2
This method avoids creating an intermediate array, saving O(n) memory compared to reverse-and-find patterns.
9. Logical Assignment Operators—Conditional Assignment
||=, &&=, ??=—Combine Conditions with Assignment
const config = {
timeout: 0,
retries: null,
debug: false
};
// ??= assigns only if null/undefined
config.retries ??= 3;
console.log(config.retries); // 3
// ||= assigns if falsy
config.debug ||= true;
console.log(config.debug); // true (was false)
// But be careful with ??= vs ||=
config.timeout ??= 5000;
console.log(config.timeout); // 0 (not reassigned — 0 is valid)
// Practical use: lazy initialization
class Cache {
data = null;
getData() {
return this.data ??= this.expensiveFetch();
}
}
10. String.prototype. replaceAll()—Global Replace Without Regex
Simple Global String Replacement
const template = 'Hello {{name}}, welcome to {{company}}!';
// OLD: Required regex with /g flag
const old = template.replace(/\{\{name\}\}/g, 'Alice');
// NEW: Just use replaceAll()
const message = template
.replaceAll('{{name}}', 'Alice')
.replaceAll('{{company}}', 'Acme Corp');
// 'Hello Alice, welcome to Acme Corp!'
// Chain multiple replacements cleanly
const sanitized = userInput
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"');
Note: replaceAll() does not sanitize input—use a proper HTML-escaping library for untrusted user input.
11. Set Methods (union, intersection, difference)
11.1. Set.prototype.union(), intersection(), difference()—Native Set Operations
Set Operations Without Manual Loops
The problem: Combining or comparing Sets required converting to arrays and writing manual logic.
const frontend = new Set(['React', 'Vue', 'Svelte']);
const backend = new Set(['Node', 'Deno', 'React']); // React is fullstack
// Union — all unique values from both sets
frontend.union(backend);
// Set {'React', 'Vue', 'Svelte', 'Node', 'Deno'}
// Intersection — values that exist in both
frontend.intersection(backend);
// Set {'React'}
// Difference — values in first but not in second
frontend.difference(backend);
// Set {'Vue', 'Svelte'}
// Symmetric difference — values in either, but not both
frontend.symmetricDifference(backend);
// Set {'Vue', 'Svelte', 'Node', 'Deno'}
Browser support: Chrome 122+, Firefox 127+, Safari 17+, Node 22+
Set methods are standardized in ECMAScript 2025. All operations return new sets—the originals remain unchanged.
12. Iterator Helpers
12.1. Iterator Helpers—Lazy Array Methods for Any Iterable
map(), filter(), take() Directly on Iterators
The problem: Working with large datasets or generators required converting to arrays first, wasting memory.
// Create an iterator from any iterable
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].values();
// Chain operations lazily — no intermediate arrays
const result = numbers
.filter(n => n % 2 === 0) // keep even
.map(n => n * 10) // multiply
.take(3); // first 3 only
// Convert to array when needed
[...result]; // [20, 40, 60]
// Works with generators too
function* infiniteNumbers() {
let i = 0;
while (true) yield i++;
}
// Safely take from infinite sequence
const firstTen = infiniteNumbers().take(10).toArray();
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Browser support: Chrome 122+, Firefox 131+, Safari 18+, Node 22+
Iterator helpers are standardized in ECMAScript 2025. Available methods: map(), filter(), take(), drop(), flatMap(), reduce(), toArray(), forEach(), some(), every(), find().
Comparison Table: Modern vs Legacy Patterns
Modern JavaScript Patterns vs Legacy Approaches (2025–2026)
| Task | Legacy Pattern | Modern Approach (ES2023+) | Key Benefit |
|---|---|---|---|
| Deep clone | JSON.parse(JSON.stringify(obj)) | structuredClone(obj) | Handles Date, Map, Set, RegExp, circular references (JSON fails) |
| Group by key | _.groupBy(collection, key) (Lodash) | Object.groupBy(array, keyFn) | Zero dependencies • Saves 5–69 KB bundle size • Native performance |
| Deferred promise | Manual let resolve, reject; new Promise(...) | Promise.withResolvers() | 3–5 lines saved • Cleaner API • Better for callbacks & async patterns |
| Immutable sort | [...arr].sort((a,b) => ...) | arr.toSorted((a,b) => ...) | No temporary array needed • Engine can optimize • Cleaner intent |
| Default values | val || defaultValue | val ?? defaultValue | Preserves 0, "", false, NaN (only null/undefined triggers) |
| Get last element | arr[arr.length - 1] | arr.at(-1) | Readable • Works on strings too • Safe on empty arrays |
| Safe property check | obj.hasOwnProperty('key') | Object.hasOwn(obj, 'key') | Cannot be shadowed • Works with null-prototype objects • Safer |
| Find from the end | arr.reverse().find(...) | arr.findLast(...) | O(1) memory • No mutation • No copy • Much faster on large arrays |
| Conditional assignment | if (!x) x = value; | x ??= value; | Concise one-liner • Only assigns on null/undefined |
| Global string replace | str.replace(/foo/g, 'bar') | str.replaceAll('foo', 'bar') | No regex needed • Safer with special chars • More readable |
| Set operations | Manual array conversion + loops | set.union(other), .intersection(), .difference(), etc. | Native • Immutable • Expressive • Better performance |
| Lazy iteration | Convert to array → .map() / .filter() | Iterator helpers: .map(), .filter(), .take(), .drop(), etc. | Memory efficient • Works on infinite sequences • No intermediate arrays |
Note (January 2026):
Most of these modern APIs are already available in all major browsers (Chrome 120+, Firefox 125+, Safari 17.4+, Edge 120+) and Node.js 22+ (some even earlier).
Use caniuse.com or MDN Browser Compatibility for the latest support data.
When to Use These Snippets
| Scenario | Recommended Snippet | Why |
|---|---|---|
| Redux/React state updates | toSorted(), toSpliced() | Built-in immutability |
| Form defaults (0, ”, false, valid) | ?? instead of || | Preserves valid falsy values |
| API response grouping | Object.groupBy() | Zero dependencies |
| Deep cloning config | structuredClone() | Handles complex types |
| Wrapping callback APIs | Promise.withResolvers() | Clean async wrapping |
Frequently Asked Questions (JavaScript ES2024–ES2025)
Is Object.groupBy() stable in ECMAScript?
Yes, it is now part of the ECMAScript 2024 standard and is no longer a proposal.
What is the difference between structuredClone() and JSON.parse(JSON.stringify())?
structuredClone() handles Date objects, Map, Set, ArrayBuffer, circular references, and undefined values—all of which JSON serialization fails on or corrupts.
Can I use Object? groupBy() instead of Lodash’s groupBy in production?
Yes, it is compatible with modern environments. It’s supported in Chrome 117+, Firefox 119+, and Safari 17.4+. For Node.js, use version 21+ or add a polyfill.
What’s the difference between ?? and || operators?
|| Returns the right operand for any falsy value. ?? Only returns the right operand for null or undefined, preserving valid values like 0, ”, and false.
Why use toSorted() instead of sort() in React?
React requires immutable state updates and toSorted() returns a new array without mutating the original.
It is a promise. Is withResolvers() widely supported?
It’s supported in modern browsers (Chrome 119+, Firefox 121+, Safari 17.4+) and Node.js 22+. Check compatibility for your target environments.
When should I use findLast() vs find()?
Use findLast() When you need the most recent match—common for logs, transactions, or version histories.
Can at() be used with negative indices on strings?
Yes, 'hello'.at(-1) returns 'o'.
What’s the performance difference between toSorted() and […arr].sort()?
toSorted() can be optimized by JavaScript engines as a single operation rather than two separate steps.
Should I replace all hasOwnProperty calls with Object.hasOwn()?
Yes, especially when handling user input or external data. Object.hasOwn() can’t be overridden.
Do these snippets work in TypeScript?
Yes. TypeScript 5.2+ includes stable type definitions for ES2023/ES2024 features.
Conclusion
These patterns reduce boilerplate, prevent common bugs, and rely solely on standardized JavaScript APIs.
- Drop utility libraries where native alternatives exist (for example, Object.groupBy()).
- Embrace immutability with
toSorted(),toReversed(),toSpliced() - Know the difference between
??and||to prevent form handling bugs - Use defensive patterns like
Object.hasOwn()and optional chaining
Data as of January 2026. Always verify browser support for your specific target environments.
All examples are based on ECMAScript specifications and MDN documentation, current as of January 2026.
Related: Modern JavaScript Features You Can Stop Polyfilling in 2026
If you’re maintaining production JavaScript in 2026, these APIs should be your default choice — not optional upgrades.
Sources & References
- Stack Overflow Developer Survey 2024—https://survey.stackoverflow.co/2024/
- MDN Web Docs: structuredClone() — https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone
- MDN Web Docs: Object.groupBy() — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
- MDN Web Docs: Promise.withResolvers() — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers
- MDN Web Docs: Array.prototype.toSorted() — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted
- TC39 ECMAScript Proposals — https://github.com/tc39/proposals
- V8 JavaScript Engine Blog — https://v8.dev/blog
- Can I Use — Browser Compatibility — https://caniuse.com
- Bundlephobia — Package Size Analysis — https://bundlephobia.com
- Node.js Release Schedule — https://nodejs.org/en/about/releases/