Agent skill
javascript-modern
Implements modern JavaScript features from ES2020-ES2024 including optional chaining, nullish coalescing, private fields, Promise methods, and array transformations. Use when modernizing JavaScript code, using ES2024 features, or when user asks about latest ECMAScript standards.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/javascript-modern-mgd34msu-goodvibes-plugin
SKILL.md
Modern JavaScript (ES2020-ES2024)
Latest ECMAScript features for cleaner, more expressive code.
ES2024 Features
Object.groupBy / Map.groupBy
javascript
const products = [
{ name: 'Apple', category: 'fruit', price: 1.5 },
{ name: 'Banana', category: 'fruit', price: 0.75 },
{ name: 'Carrot', category: 'vegetable', price: 0.5 },
{ name: 'Broccoli', category: 'vegetable', price: 2.0 },
];
// Group into object
const byCategory = Object.groupBy(products, (item) => item.category);
// {
// fruit: [{ name: 'Apple', ... }, { name: 'Banana', ... }],
// vegetable: [{ name: 'Carrot', ... }, { name: 'Broccoli', ... }]
// }
// Group into Map (preserves non-string keys)
const byPriceRange = Map.groupBy(products, (item) =>
item.price >= 1 ? 'expensive' : 'cheap'
);
// Map { 'expensive' => [...], 'cheap' => [...] }
// Complex grouping
const users = [
{ name: 'Alice', role: 'admin', active: true },
{ name: 'Bob', role: 'user', active: false },
{ name: 'Charlie', role: 'admin', active: false },
];
const groupedUsers = Object.groupBy(users, (user) =>
`${user.role}-${user.active ? 'active' : 'inactive'}`
);
Promise.withResolvers()
javascript
// Before: Awkward pattern
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
// After: Clean extraction
const { promise, resolve, reject } = Promise.withResolvers();
// Practical example: Timeout wrapper
function timeout(ms) {
const { promise, resolve } = Promise.withResolvers();
setTimeout(resolve, ms);
return promise;
}
// Event-based promise
function waitForClick(element) {
const { promise, resolve } = Promise.withResolvers();
element.addEventListener('click', resolve, { once: true });
return promise;
}
// Cancellable fetch
function cancellableFetch(url) {
const { promise, resolve, reject } = Promise.withResolvers();
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(resolve)
.catch(reject);
return {
promise,
cancel: () => controller.abort(),
};
}
Immutable Array Methods
javascript
const numbers = [3, 1, 4, 1, 5, 9];
// toSorted() - Returns new sorted array
const sorted = numbers.toSorted((a, b) => a - b);
// sorted: [1, 1, 3, 4, 5, 9]
// numbers: [3, 1, 4, 1, 5, 9] (unchanged)
// toReversed() - Returns new reversed array
const reversed = numbers.toReversed();
// reversed: [9, 5, 1, 4, 1, 3]
// toSpliced() - Returns new spliced array
const spliced = numbers.toSpliced(2, 1, 100, 200);
// spliced: [3, 1, 100, 200, 1, 5, 9]
// with() - Returns new array with element replaced
const replaced = numbers.with(0, 999);
// replaced: [999, 1, 4, 1, 5, 9]
// Chaining immutable operations
const result = numbers
.toSorted((a, b) => b - a)
.toSpliced(0, 2)
.with(0, 0);
Set Methods
javascript
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);
// Union - All elements from both sets
const union = setA.union(setB);
// Set { 1, 2, 3, 4, 5, 6 }
// Intersection - Elements in both sets
const intersection = setA.intersection(setB);
// Set { 3, 4 }
// Difference - Elements in A but not in B
const difference = setA.difference(setB);
// Set { 1, 2 }
// Symmetric Difference - Elements in either but not both
const symmetricDiff = setA.symmetricDifference(setB);
// Set { 1, 2, 5, 6 }
// Subset/Superset checks
const subset = new Set([2, 3]);
subset.isSubsetOf(setA); // true
setA.isSupersetOf(subset); // true
setA.isDisjointFrom(new Set([7, 8])); // true
RegExp /v Flag (Unicode Sets)
javascript
// Match any emoji
const emojiPattern = /\p{Emoji}/v;
emojiPattern.test('Hello ๐'); // true
// Set operations in regex
const greekOrCyrillic = /[\p{Script=Greek}--\p{Letter}]/v;
// String properties
const pattern = /^\p{RGI_Emoji}$/v;
pattern.test('๐จโ๐ฉโ๐งโ๐ฆ'); // true (family emoji)
ES2023 Features
Array findLast / findLastIndex
javascript
const numbers = [1, 2, 3, 4, 5, 4, 3];
// Find from end
const lastEven = numbers.findLast(n => n % 2 === 0);
// 4 (the second occurrence)
const lastEvenIndex = numbers.findLastIndex(n => n % 2 === 0);
// 5
// Practical: Find most recent matching item
const logs = [
{ level: 'info', message: 'Started' },
{ level: 'error', message: 'Failed' },
{ level: 'info', message: 'Retry' },
{ level: 'error', message: 'Failed again' },
];
const lastError = logs.findLast(log => log.level === 'error');
// { level: 'error', message: 'Failed again' }
Hashbang Grammar
javascript
#!/usr/bin/env node
// Valid at start of file
console.log('Script executed directly');
WeakMap Symbols as Keys
javascript
const weakMap = new WeakMap();
const key = Symbol('unique');
weakMap.set(key, 'value');
weakMap.get(key); // 'value'
ES2022 Features
Top-Level Await
javascript
// In ES modules (.mjs or type: "module")
const response = await fetch('https://api.example.com/data');
const data = await response.json();
export { data };
// Dynamic imports with await
const { default: lodash } = await import('lodash');
Private Class Fields & Methods
javascript
class BankAccount {
// Private fields (prefixed with #)
#balance = 0;
#transactions = [];
constructor(initialBalance) {
this.#balance = initialBalance;
}
// Private method
#logTransaction(type, amount) {
this.#transactions.push({ type, amount, date: new Date() });
}
deposit(amount) {
if (amount <= 0) throw new Error('Invalid amount');
this.#balance += amount;
this.#logTransaction('deposit', amount);
}
withdraw(amount) {
if (amount > this.#balance) throw new Error('Insufficient funds');
this.#balance -= amount;
this.#logTransaction('withdraw', amount);
}
get balance() {
return this.#balance;
}
// Private static
static #instanceCount = 0;
static getInstanceCount() {
return BankAccount.#instanceCount;
}
}
const account = new BankAccount(1000);
// account.#balance; // SyntaxError: Private field
Static Class Blocks
javascript
class Config {
static settings;
static {
// Complex initialization logic
try {
const stored = localStorage.getItem('settings');
this.settings = stored ? JSON.parse(stored) : {};
} catch {
this.settings = { theme: 'light', lang: 'en' };
}
}
}
at() Method
javascript
const arr = [1, 2, 3, 4, 5];
// Positive index (same as bracket notation)
arr.at(0); // 1
arr.at(2); // 3
// Negative index (counts from end)
arr.at(-1); // 5 (last element)
arr.at(-2); // 4 (second to last)
// Works on strings too
const str = 'Hello';
str.at(-1); // 'o'
Object.hasOwn()
javascript
const obj = { name: 'Alice' };
// Before: Verbose and potentially unsafe
Object.prototype.hasOwnProperty.call(obj, 'name'); // true
// After: Clean and safe
Object.hasOwn(obj, 'name'); // true
Object.hasOwn(obj, 'toString'); // false (inherited)
// Works with objects that don't inherit from Object.prototype
const nullProto = Object.create(null);
nullProto.key = 'value';
Object.hasOwn(nullProto, 'key'); // true
// nullProto.hasOwnProperty('key'); // TypeError
Error Cause
javascript
async function fetchUser(id) {
try {
const response = await fetch(`/api/users/${id}`);
return await response.json();
} catch (error) {
throw new Error('Failed to fetch user', { cause: error });
}
}
try {
await fetchUser(123);
} catch (error) {
console.log(error.message); // 'Failed to fetch user'
console.log(error.cause); // Original fetch error
console.log(error.cause.stack); // Original stack trace
}
ES2021 Features
String replaceAll()
javascript
const text = 'foo bar foo baz foo';
// Before: regex with global flag
text.replace(/foo/g, 'qux'); // 'qux bar qux baz qux'
// After: Simple and clear
text.replaceAll('foo', 'qux'); // 'qux bar qux baz qux'
// Works with regex too (must have global flag)
text.replaceAll(/foo/g, 'qux');
Numeric Separators
javascript
const billion = 1_000_000_000;
const bytes = 0xFF_FF_FF_FF;
const binary = 0b1010_0001_1000;
const fraction = 0.000_001;
// Readable large numbers
const price = 999_99; // $999.99 in cents
Promise.any()
javascript
const promises = [
fetch('https://api1.example.com/data'),
fetch('https://api2.example.com/data'),
fetch('https://api3.example.com/data'),
];
// Returns first fulfilled promise
try {
const fastest = await Promise.any(promises);
console.log('Got response from:', fastest.url);
} catch (error) {
// AggregateError if all reject
console.log('All failed:', error.errors);
}
Logical Assignment Operators
javascript
let a = null;
let b = 'hello';
let c = 0;
// Nullish coalescing assignment
a ??= 'default'; // a = 'default' (a was null)
b ??= 'default'; // b = 'hello' (b was truthy)
// Logical OR assignment
c ||= 10; // c = 10 (c was falsy)
// Logical AND assignment
let user = { name: 'Alice' };
user &&= { ...user, updated: true };
// user = { name: 'Alice', updated: true }
// Practical: Initialize if missing
const config = {};
config.debug ??= false;
config.timeout ??= 5000;
WeakRef & FinalizationRegistry
javascript
// Weak reference to object
let obj = { data: 'important' };
const weakRef = new WeakRef(obj);
// May return undefined if object was garbage collected
const value = weakRef.deref();
if (value) {
console.log(value.data);
}
// Cleanup callback when object is GC'd
const registry = new FinalizationRegistry((heldValue) => {
console.log(`Object with id ${heldValue} was garbage collected`);
});
registry.register(obj, 'myObjectId');
ES2020 Features
Optional Chaining (?.)
javascript
const user = {
name: 'Alice',
address: {
city: 'NYC'
}
};
// Safe property access
user?.address?.city; // 'NYC'
user?.contact?.email; // undefined (no error)
// Safe method calls
user.getName?.(); // undefined if method doesn't exist
// Safe array access
const arr = [1, 2, 3];
arr?.[0]; // 1
arr?.[10]; // undefined
// Combined with nullish coalescing
const email = user?.contact?.email ?? 'no-email@example.com';
Nullish Coalescing (??)
javascript
// Only triggers on null/undefined, not falsy values
const count = 0;
const text = '';
count ?? 10; // 0 (count is not nullish)
text ?? 'default'; // '' (text is not nullish)
count || 10; // 10 (different behavior with ||)
text || 'default'; // 'default'
// Perfect for optional parameters
function greet(name) {
const displayName = name ?? 'Guest';
return `Hello, ${displayName}!`;
}
greet(''); // 'Hello, !' (empty string is valid)
greet(null); // 'Hello, Guest!'
greet(undefined); // 'Hello, Guest!'
BigInt
javascript
const big = 9007199254740991n;
const bigger = BigInt('123456789012345678901234567890');
// Arithmetic
big + 1n; // 9007199254740992n
bigger * 2n; // 246913578024691357802469135780n
// Cannot mix with regular numbers
// big + 1; // TypeError
// Comparison works
big > 1000; // true
big === 9007199254740991n; // true
// Useful for IDs, timestamps, etc.
const snowflakeId = 1234567890123456789n;
Promise.allSettled()
javascript
const promises = [
Promise.resolve('success'),
Promise.reject('error'),
Promise.resolve('another success'),
];
const results = await Promise.allSettled(promises);
// [
// { status: 'fulfilled', value: 'success' },
// { status: 'rejected', reason: 'error' },
// { status: 'fulfilled', value: 'another success' }
// ]
// Filter by status
const fulfilled = results
.filter(r => r.status === 'fulfilled')
.map(r => r.value);
Dynamic Import
javascript
// Conditional loading
if (needsChart) {
const { Chart } = await import('chart.js');
new Chart(canvas, config);
}
// Route-based code splitting
const routes = {
'/dashboard': () => import('./pages/Dashboard.js'),
'/settings': () => import('./pages/Settings.js'),
};
async function loadPage(path) {
const loader = routes[path];
if (loader) {
const module = await loader();
return module.default;
}
}
globalThis
javascript
// Works in browser, Node.js, Web Workers, etc.
globalThis.setTimeout === window.setTimeout; // true in browser
globalThis.setTimeout === global.setTimeout; // true in Node.js
// Safe global access
globalThis.myGlobal = 'accessible everywhere';
Browser Support
| Feature | Chrome | Firefox | Safari | Node.js |
|---|---|---|---|---|
| ES2024 (groupBy, etc.) | 117+ | 119+ | 17.4+ | 21+ |
| ES2023 (findLast, etc.) | 97+ | 104+ | 15.4+ | 18+ |
| ES2022 (private fields) | 84+ | 90+ | 14.1+ | 16+ |
| ES2021 (replaceAll) | 85+ | 77+ | 13.1+ | 15+ |
| ES2020 (?., ??) | 80+ | 72+ | 13.1+ | 14+ |
Reference Files
- async-patterns.md - Advanced async/await patterns
- iterators-generators.md - Iterator and generator patterns
Didn't find tool you were looking for?