@sylix/coworker 2.0.11 → 2.0.12

package/dist/skills/defaults/frontend/javascript.md

@@ -0,0 +1,311 @@
+---
+name: javascript
+description: Modern JavaScript patterns and best practices for clean, maintainable code.
+---
+
+# Modern JavaScript — CoWorker Edition
+
+Write clean, modern JavaScript.
+
+## When to Use This Skill
+
+- Writing JavaScript code
+- Modern JS patterns
+- Async JavaScript
+- ES6+ features
+
+## Core Concepts
+
+### 1. Destructuring & Spread
+
+```javascript
+// Object destructuring
+const user = { name: 'John', age: 30, city: 'NYC' };
+
+const { name, age } = user;
+
+// With defaults
+const { role = 'user' } = user;
+
+// Rename
+const { name: userName } = user;
+
+// Nested
+const { address: { city } } = user;
+
+// Array destructuring
+const [first, second, ...rest] = [1, 2, 3, 4, 5];
+// first = 1, second = 2, rest = [3, 4, 5]
+
+// Swap variables
+[a, b] = [b, a];
+
+// Spread
+const merged = { ...user, age: 31 };
+const combined = [...arr1, ...arr2];
+```
+
+### 2. Async/Await
+
+```javascript
+// Async function
+async function fetchUser(id) {
+  try {
+    const response = await fetch(`/api/users/${id}`);
+    const user = await response.json();
+    return user;
+  } catch (error) {
+    console.error('Failed to fetch:', error);
+    throw error;
+  }
+}
+
+// Parallel execution
+async function fetchAllData() {
+  const [users, orders, products] = await Promise.all([
+    fetchUsers(),
+    fetchOrders(),
+    fetchProducts()
+  ]);
+  
+  return { users, orders, products };
+}
+
+// Sequential with errors
+async function processWithFallback() {
+  try {
+    return await primaryService.getData();
+  } catch {
+    return await fallbackService.getData();
+  }
+}
+
+// Promise.allSettled
+async function fetchAll() {
+  const results = await Promise.allSettled([
+    fetch('/api/users'),
+    fetch('/api/orders'),
+    fetch('/api/products')
+  ]);
+  
+  results.forEach((result, index) => {
+    if (result.status === 'fulfilled') {
+      console.log(`Request ${index}:`, result.value);
+    } else {
+      console.error(`Request ${index} failed:`, result.reason);
+    }
+  });
+}
+```
+
+### 3. Optional Chaining & Nullish
+
+```javascript
+// Optional chaining
+const city = user?.address?.city;
+const first = users?.[0]?.name;
+const handler = obj?.method?.();
+
+// Nullish coalescing
+const name = user.name ?? 'Anonymous';
+const value = data ?? defaultValue;
+
+// Difference from OR
+const a = 0 ?? 'default';    // 0
+const b = '' ?? 'default';   // ''
+const c = false ?? 'default'; // false
+
+const d = 0 || 'default';    // 'default'
+const e = '' || 'default';   // 'default'
+const f = false || 'default'; // 'default'
+```
+
+### 4. Classes
+
+```javascript
+class User {
+  #privateField;  // Private field
+  
+  static STATUS = {
+    ACTIVE: 'active',
+    INACTIVE: 'inactive'
+  };
+  
+  constructor(name, email) {
+    this.name = name;
+    this.email = email;
+    this.#privateField = 'secret';
+  }
+  
+  // Getter
+  get displayName() {
+    return `${this.name} (${this.email})`;
+  }
+  
+  // Setter
+  set status(value) {
+    if (!Object.values(User.STATUS).includes(value)) {
+      throw new Error('Invalid status');
+    }
+    this._status = value;
+  }
+  
+  // Method
+  async save() {
+    await db.users.insert(this);
+  }
+  
+  // Static method
+  static fromData(data) {
+    return new User(data.name, data.email);
+  }
+}
+
+// Inheritance
+class Admin extends User {
+  constructor(name, email, permissions) {
+    super(name, email);
+    this.permissions = permissions;
+  }
+  
+  async grantPermission(perm) {
+    this.permissions.push(perm);
+  }
+}
+```
+
+### 5. Modules
+
+```javascript
+// Named exports
+export const API_URL = '/api';
+export function fetchData() { }
+export class UserService { }
+
+// Default export
+export default class App { }
+
+// Import
+import App, { API_URL, fetchData } from './app';
+import * as utils from './utils';
+
+// Dynamic import
+const module = await import('./heavy-module.js');
+const Component = module.default;
+```
+
+### 6. Functional Patterns
+
+```javascript
+// Map, Filter, Reduce
+const names = users
+  .filter(u => u.active)
+  .map(u => u.name)
+  .join(', ');
+
+const total = orders.reduce((sum, o) => sum + o.total, 0);
+
+// Chaining
+const result = data
+  .filter(x => x.valid)
+  .map(x => x.value)
+  .sort((a, b) => a - b)
+  .slice(0, 10);
+
+// Currying
+const add = a => b => a + b;
+const add5 = add(5);
+add5(3); // 8
+
+// Compose
+const compose = (...fns) => x => 
+  fns.reduceRight((acc, fn) => fn(acc), x);
+
+const processData = compose(
+  validate,
+  transform,
+  sanitize
+);
+```
+
+### 7. Modern Array Methods
+
+```javascript
+// find/findLast
+const user = users.find(u => u.id === 123);
+const lastActive = users.findLast(u => u.lastLogin > cutoff);
+
+// flatMap
+const words = ['hello', 'world'];
+const chars = words.flatMap(w => w.split(''));
+// ['h','e','l','l','o','w','o','r','l','d']
+
+// at (negative indexing)
+const last = arr.at(-1);
+const secondLast = arr.at(-2);
+
+// groupBy (2024)
+const grouped = Object.groupBy(users, u => u.role);
+// { admin: [...], user: [...] }
+
+// toSorted (2023)
+const sorted = [...arr].toSorted((a, b) => a - b);
+```
+
+### 8. Error Handling
+
+```javascript
+// Try-catch with finally
+async function fetchData() {
+  let connection;
+  try {
+    connection = await connect();
+    return await connection.query('SELECT * FROM users');
+  } catch (error) {
+    console.error('Failed:', error);
+    throw error;
+  } finally {
+    if (connection) {
+      await connection.close();
+    }
+  }
+}
+
+// Error-first callbacks (Node.js)
+fs.readFile('file.txt', (err, data) => {
+  if (err) {
+    console.error(err);
+    return;
+  }
+  console.log(data);
+});
+
+// Custom errors
+class AppError extends Error {
+  constructor(message, code, statusCode = 500) {
+    super(message);
+    this.code = code;
+    this.statusCode = statusCode;
+  }
+}
+
+throw new AppError('User not found', 'NOT_FOUND', 404);
+```
+
+## Best Practices
+
+1. **Use const/let** - Avoid var
+2. **Destructuring** - Clean access
+3. **Async/await** - Readable async
+4. **Optional chaining** - Safe access
+5. **Modules** - Organize code
+6. **Functional methods** - Array operations
+
+## Common Mistakes
+
+- Using var
+- Not handling async errors
+- Mutating arrays incorrectly
+- Overusing any
+- Not using optional chaining
+- Callback hell (use async/await)