원클릭으로
javascript
Modern JavaScript (ES2020+) patterns. Trigger: When writing JavaScript code, using ES2020+ features, or refactoring legacy JS.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Modern JavaScript (ES2020+) patterns. Trigger: When writing JavaScript code, using ES2020+ features, or refactoring legacy JS.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Paste-ready session summary for context transfer to a new chat. Trigger: User says 'context handoff', 'start fresh', or session needs to continue.
One-at-a-time questioning to fully profile a goal before acting. Trigger: User says 'grill me', goal is vague, or clarification is needed first.
Batch execution with checkpoints. Trigger: When executing plans with batched tasks.
Universal coding principles: DRY, security by default, null guards, and YAGNI. Trigger: When writing or reviewing code in any language or technology.
Accessibility guide (WCAG 2.1/2.2, Level A–AAA). Trigger: When building UI components, interactive elements, or auditing accessibility compliance.
Astro quality patterns: island philosophy, SEO by page type, and Core Web Vitals. Trigger: When reviewing Astro site quality or hydration decisions.
| name | javascript |
| description | Modern JavaScript (ES2020+) patterns. Trigger: When writing JavaScript code, using ES2020+ features, or refactoring legacy JS. |
| license | Apache 2.0 |
| metadata | {"version":"1.1","type":"language"} |
Modern JS/TS patterns for ES2020+ with async code, safe property access, modern syntax.
Use when:
Don't use for TypeScript (typescript skill), React (react skill), or Node.js backend.
// CORRECT: Named imports (explicit, tree-shakeable)
import { readFileSync, existsSync } from "fs";
import { join, resolve } from "path";
// CORRECT: Default import for modules with single export
import express from "express";
// WRONG: require() in ES modules
const fs = require("fs");
// WRONG: Dynamic import when static works
async function doWork() {
const fs = await import("fs"); // unnecessary
}
// WRONG: Unused variables and imports
import { something } from "./lib"; // never used
const unused = 42;
function neverCalled() {}
// CORRECT: Every import, variable, and function is used
import { needed } from "./lib";
const count = needed();
// CORRECT
const API_URL = "https://api.example.com";
let count = 0;
// WRONG: var (function-scoped, hoisting issues)
var count = 0;
// CORRECT
async function fetchData() {
try {
const response = await fetch(url);
return await response.json();
} catch (error) {
console.error(error);
}
}
// WRONG: promise chains
function fetchData() {
return fetch(url)
.then((res) => res.json())
.catch((error) => console.error(error));
}
// CORRECT: safe access + nullish coalescing
const name = user?.profile?.name ?? "Anonymous";
const result = obj?.method?.();
const port = config.port ?? 3000; // 0 won't fallback
// WRONG: || treats 0, '', false as falsy
const port = config.port || 3000; // 0 fallbacks to 3000!
// WRONG: verbose manual checks
const name = (user && user.profile && user.profile.name) || "Anonymous";
// CORRECT
const hasData = !!data;
const isValid = Boolean(value);
// WRONG: implicit coercion hides intent
if (data) { /* unclear: existence or truthiness? */ }
// CORRECT: parallel
const [users, posts, comments] = await Promise.all([
fetchUsers(),
fetchPosts(),
fetchComments(),
]);
// WRONG: sequential (3x slower)
const users = await fetchUsers();
const posts = await fetchPosts();
const comments = await fetchComments();
Importing a module?
→ Named imports: import { x } from 'mod' — never require() in ES modules
Unused import/variable?
→ Delete it — no dead code
Async operation?
→ async/await with try/catch
String concatenation?
→ Template literals: Hello ${name}
Default value?
→ ?? for null/undefined; || for any falsy
Property might not exist?
→ Optional chaining: obj?.prop?.nested
Iterate array?
→ .map(), .filter(), .reduce() — use for...of for early breaks
Copy object/array?
→ Spread: {...obj}, [...arr]
Callback?
→ Arrow function unless this context is needed
Multiple independent awaits?
→ Promise.all() for parallel execution
const fetchData = async (url) => {
try {
const response = await fetch(url);
const data = await response.json();
return data?.results ?? [];
} catch (error) {
console.error("Fetch failed:", error);
return [];
}
};
const { name, age = 18 } = user;
const greeting = `Hello, ${name}!`;
Promise.all() for concurrent execution.filter(Boolean) to clean sparse arrays=== (never ==)thisimport/export), no require()const/let only (no var)async/await with try/catch for async code?. and ?? for safe access and defaultsPromise.all() for independent parallel fetches=== for all equality checks.map, .filter, .reduce)