Loading...
Loading...
JavaScript language fundamentals. Covers ES6+, modules, async patterns. Use when working with plain JS projects without TypeScript. USE WHEN: user mentions "javascript", "ES6", "async/await", "promises", "modules", asks about "destructuring", "spread operator", "arrow functions", "ESM vs CommonJS" DO NOT USE FOR: TypeScript projects - use `typescript` skill instead DO NOT USE FOR: Node.js runtime - use `nodejs` skill instead DO NOT USE FOR: Browser APIs - use framework-specific skills
npx skill4agent add claude-dev-suite/claude-dev-suite javascriptDeep Knowledge: Usewith technology:mcp__documentation__fetch_docsfor comprehensive documentation.javascript
// Destructuring
const { name, age = 18 } = user;
const [first, ...rest] = items;
// Spread operator
const merged = { ...defaults, ...options };
const combined = [...arr1, ...arr2];
// Template literals
const message = `Hello ${name}, you are ${age} years old`;
// Arrow functions
const add = (a, b) => a + b;
const fetchUser = async (id) => {
const response = await fetch(`/api/users/${id}`);
return response.json();
};
// Optional chaining & nullish coalescing
const city = user?.address?.city ?? 'Unknown';
// Logical assignment
user.name ||= 'Anonymous'; // Assign if falsy
user.data ??= {}; // Assign if null/undefined
user.count &&= user.count++; // Assign if truthy// ESM (package.json: "type": "module")
import { readFile } from 'fs/promises';
import config from './config.js';
export const helper = () => {};
export default class Service {}
// CommonJS (default Node.js, .cjs)
const { readFile } = require('fs/promises');
const config = require('./config');
module.exports = { helper };
module.exports = Service;
// Dynamic imports (both)
const module = await import('./dynamic.js');// Importing CommonJS from ESM
import pkg from 'cjs-package'; // Default export = module.exports
import { named } from 'cjs-package'; // May not work!
// Fix: use createRequire
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const cjsModule = require('cjs-package');
// __dirname / __filename in ESM
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);// Promises
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err))
.finally(() => cleanup());
// Async/await
async function fetchData() {
try {
const response = await fetch('/api/data');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return await response.json();
} catch (error) {
console.error('Fetch failed:', error);
throw error;
}
}
// Parallel execution
const [users, products] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/products').then(r => r.json()),
]);
// Promise utilities
await Promise.allSettled(promises); // Never rejects
const first = await Promise.race(promises);
const firstSuccess = await Promise.any(promises);// Transform
const doubled = items.map(x => x * 2);
const names = users.map(u => u.name);
// Filter
const adults = users.filter(u => u.age >= 18);
const unique = [...new Set(items)];
// Find
const user = users.find(u => u.id === id);
const index = users.findIndex(u => u.id === id);
const exists = users.some(u => u.active);
const allActive = users.every(u => u.active);
// Reduce
const total = items.reduce((sum, x) => sum + x, 0);
const grouped = items.reduce((acc, item) => {
(acc[item.category] ||= []).push(item);
return acc;
}, {});
// Flat & FlatMap
const flat = [[1, 2], [3, 4]].flat();
const expanded = users.flatMap(u => u.orders);
// At (negative indexing)
const last = items.at(-1);
const secondLast = items.at(-2);// Entries/Keys/Values
Object.keys(obj); // ['a', 'b']
Object.values(obj); // [1, 2]
Object.entries(obj); // [['a', 1], ['b', 2]]
// From entries
const obj = Object.fromEntries([['a', 1], ['b', 2]]);
// Assign & spread
const merged = Object.assign({}, defaults, options);
const merged2 = { ...defaults, ...options };
// Property descriptors
Object.defineProperty(obj, 'readonly', {
value: 42,
writable: false,
enumerable: true,
});
// Freeze/Seal
Object.freeze(obj); // No changes at all
Object.seal(obj); // No add/delete, can modifyclass Service {
#privateField = 'secret'; // Private field
static count = 0; // Static field
constructor(name) {
this.name = name;
Service.count++;
}
// Instance method
greet() {
return `Hello, ${this.name}`;
}
// Private method
#validate() {
return this.#privateField.length > 0;
}
// Getter/Setter
get upperName() {
return this.name.toUpperCase();
}
set upperName(value) {
this.name = value.toLowerCase();
}
// Static method
static getCount() {
return Service.count;
}
}
// Inheritance
class Admin extends Service {
constructor(name, role) {
super(name);
this.role = role;
}
}// Custom error
class ValidationError extends Error {
constructor(message, field) {
super(message);
this.name = 'ValidationError';
this.field = field;
}
}
// Try/catch with specific handling
try {
const data = JSON.parse(input);
} catch (error) {
if (error instanceof SyntaxError) {
console.error('Invalid JSON');
} else if (error instanceof ValidationError) {
console.error(`Validation failed: ${error.field}`);
} else {
throw error; // Re-throw unknown errors
}
}
// Error cause (ES2022)
try {
await fetchData();
} catch (error) {
throw new Error('Failed to load data', { cause: error });
}| Scenario | Use Instead |
|---|---|
| TypeScript project | |
| Node.js runtime internals | |
| Frontend frameworks | |
| Build tooling | |
| Testing | |
| Anti-Pattern | Why It's Bad | Correct Approach |
|---|---|---|
Using | Function scope, hoisting issues | Use |
| Type coercion bugs | Always use |
| Mutating function parameters | Side effects, hard to debug | Return new object/array |
Missing | Unhandled rejections | Always await or .catch() |
| Mixing ESM and CommonJS | Module system conflicts | Choose one, prefer ESM |
| Callback hell | Unreadable code | Use async/await |
| Not handling Promise rejections | Silent failures | Add .catch() or try/catch |
| Global variables | Namespace pollution | Use modules |
| Issue | Cause | Solution |
|---|---|---|
| "X is not defined" | Variable not declared | Check spelling, imports |
| "Cannot read property of undefined" | Object is undefined | Use optional chaining ?. |
| "Promise rejected but not handled" | Missing .catch() | Add error handling |
| "Module not found" | Wrong import path | Check file path, extension |
| "Unexpected token" | Syntax error | Check for missing brackets, commas |
| "This is undefined" | Arrow function context | Use regular function or bind |
| Memory leak in event listeners | Not removing listeners | Use removeEventListener |
| Slow performance with large arrays | Inefficient algorithms | Use appropriate data structures |
| Scenario | Choice |
|---|---|
| New project | TypeScript |
| Quick scripts | JavaScript |
| Legacy codebase | JavaScript (gradual migration) |
| Public libraries | TypeScript with .d.ts |
| Prototype/MVP | JavaScript ok |
Deep Knowledge: Usewith technology:mcp__documentation__fetch_docsfor comprehensive documentation.javascript