Claude Dev Suite Claude Dev Suite Javascript

JavaScript Core Knowledge

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: javascript for comprehensive documentation.

ES6+ Features

// 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

Modules (ESM vs CommonJS)

// 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');

Module Interop Issues

// 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);

Async Patterns

// 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);

Array Methods

// 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);

Object Methods

// 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 modify

Classes

class 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;
  }
}

Error Handling

// 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 });
}

When NOT to Use This Skill

Anti-Patterns

Quick Troubleshooting

When to Use JS vs TypeScript

Reference Documentation

• JavaScript Info
• MDN JavaScript
• Node.js ES Modules

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: javascript for comprehensive documentation.

Source: claude-dev-suite/claude-dev-suite — distributed by TomeVault.