@mytechtoday/augment-extensions 0.7.0 → 1.2.0

package/augment-extensions/coding-standards/html-css-js/examples/javascript-examples.js

@@ -1,612 +1,612 @@
-// ========================================
-// VARIABLE DECLARATIONS
-// ========================================
-
-// ✅ GOOD: Use const for values that won't be reassigned
-const API_URL = 'https://api.example.com';
-const MAX_RETRIES = 3;
-const user = { name: 'John', age: 30 };
-const items = [1, 2, 3, 4, 5];
-
-// ✅ GOOD: Use let for values that will be reassigned
-let count = 0;
-let status = 'pending';
-
-// ❌ BAD: Never use var
-// var x = 10;
-
-// ========================================
-// ARROW FUNCTIONS
-// ========================================
-
-// ✅ GOOD: Arrow functions for callbacks
-const numbers = [1, 2, 3, 4, 5];
-const doubled = numbers.map(n => n * 2);
-const evens = numbers.filter(n => n % 2 === 0);
-const sum = numbers.reduce((acc, n) => acc + n, 0);
-
-// ✅ GOOD: Arrow function with multiple statements
-const processUser = (user) => {
-  const fullName = `${user.firstName} ${user.lastName}`;
-  const age = calculateAge(user.birthDate);
-  return { fullName, age };
-};
-
-// ✅ GOOD: Traditional function for methods
-const calculator = {
-  value: 0,
-  add(n) {
-    this.value += n;
-    return this;
-  },
-  multiply(n) {
-    this.value *= n;
-    return this;
-  }
-};
-
-// ========================================
-// TEMPLATE LITERALS
-// ========================================
-
-// ✅ GOOD: Template literals for string interpolation
-const name = 'Alice';
-const age = 25;
-const greeting = `Hello, ${name}! You are ${age} years old.`;
-
-// ✅ GOOD: Multi-line strings
-const html = `
-  <div class="card">
-    <h2>${name}</h2>
-    <p>Age: ${age}</p>
-  </div>
-`;
-
-// ✅ GOOD: Expression evaluation
-const price = 19.99;
-const quantity = 3;
-const total = `Total: $${(price * quantity).toFixed(2)}`;
-
-// ========================================
-// DESTRUCTURING
-// ========================================
-
-// ✅ GOOD: Object destructuring
-const userObj = { firstName: 'John', lastName: 'Doe', email: 'john@example.com' };
-const { firstName, lastName, email } = userObj;
-
-// ✅ GOOD: Destructuring with default values
-const { theme = 'light', language = 'en' } = {};
-
-// ✅ GOOD: Nested destructuring
-const response = {
-  data: {
-    user: { id: 1, name: 'Alice' }
-  }
-};
-const { data: { user: { id, name } } } = response;
-
-// ✅ GOOD: Array destructuring
-const colors = ['red', 'green', 'blue'];
-const [primary, secondary, tertiary] = colors;
-
-// ✅ GOOD: Rest operator in destructuring
-const [first, ...rest] = [1, 2, 3, 4, 5];
-const { id: userId, ...userDetails } = { id: 1, name: 'Bob', age: 30 };
-
-// ========================================
-// SPREAD OPERATOR
-// ========================================
-
-// ✅ GOOD: Array spreading
-const arr1 = [1, 2, 3];
-const arr2 = [4, 5, 6];
-const combined = [...arr1, ...arr2];
-
-// ✅ GOOD: Object spreading
-const defaults = { theme: 'light', fontSize: 14 };
-const userPrefs = { fontSize: 16, language: 'en' };
-const settings = { ...defaults, ...userPrefs };
-
-// ✅ GOOD: Copying arrays/objects
-const originalArray = [1, 2, 3];
-const copiedArray = [...originalArray];
-
-const originalObject = { a: 1, b: 2 };
-const copiedObject = { ...originalObject };
-
-// ========================================
-// DEFAULT PARAMETERS
-// ========================================
-
-// ✅ GOOD: Default function parameters
-function greet(name = 'Guest', greeting = 'Hello') {
-  return `${greeting}, ${name}!`;
-}
-
-// ✅ GOOD: Default with destructuring
-function createUser({ name = 'Anonymous', role = 'user' } = {}) {
-  return { name, role, createdAt: new Date() };
-}
-
-// ========================================
-// OPTIONAL CHAINING
-// ========================================
-
-// ✅ GOOD: Optional chaining for nested properties
-const userData = { profile: { address: { city: 'New York' } } };
-const city = userData?.profile?.address?.city;
-const zipCode = userData?.profile?.address?.zipCode; // undefined, no error
-
-// ✅ GOOD: Optional chaining with arrays
-const firstItem = items?.[0];
-
-// ✅ GOOD: Optional chaining with methods
-const result = obj?.method?.();
-
-// ========================================
-// NULLISH COALESCING
-// ========================================
-
-// ✅ GOOD: Nullish coalescing operator (??)
-const userInput = null;
-const value = userInput ?? 'default value';
-
-// ✅ GOOD: Difference from || operator
-const count1 = 0;
-const result1 = count1 || 10;  // 10 (falsy)
-const result2 = count1 ?? 10;  // 0 (only null/undefined)
-
-const emptyString = '';
-const text1 = emptyString || 'default';  // 'default'
-const text2 = emptyString ?? 'default';  // ''
-
-// ========================================
-// ES6 MODULES
-// ========================================
-
-// ✅ GOOD: Named exports
-export const API_KEY = 'abc123';
-export function fetchData(url) {
-  return fetch(url).then(res => res.json());
-}
-
-export class UserService {
-  constructor(apiUrl) {
-    this.apiUrl = apiUrl;
-  }
-
-  async getUser(id) {
-    const response = await fetch(`${this.apiUrl}/users/${id}`);
-    return response.json();
-  }
-}
-
-// ✅ GOOD: Default export
-export default class App {
-  constructor() {
-    this.init();
-  }
-
-  init() {
-    console.log('App initialized');
-  }
-}
-
-// ✅ GOOD: Importing
-// import App from './App.js';
-// import { fetchData, UserService } from './services.js';
-// import * as utils from './utils.js';
-
-// ========================================
-// ASYNC/AWAIT PATTERNS
-// ========================================
-
-// ✅ GOOD: Async function with error handling
-async function fetchUserData(userId) {
-  try {
-    const response = await fetch(`${API_URL}/users/${userId}`);
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error('Failed to fetch user:', error);
-    throw error;
-  }
-}
-
-// ✅ GOOD: Promise.all for parallel requests
-async function fetchMultipleUsers(userIds) {
-  try {
-    const promises = userIds.map(id => fetchUserData(id));
-    const users = await Promise.all(promises);
-    return users;
-  } catch (error) {
-    console.error('Failed to fetch users:', error);
-    throw error;
-  }
-}
-
-// ✅ GOOD: Async arrow function
-const loadData = async () => {
-  const data = await fetchUserData(1);
-  return data;
-};
-
-// ========================================
-// ARRAY METHODS
-// ========================================
-
-const products = [
-  { id: 1, name: 'Laptop', price: 999, category: 'electronics' },
-  { id: 2, name: 'Mouse', price: 29, category: 'electronics' },
-  { id: 3, name: 'Desk', price: 299, category: 'furniture' }
-];
-
-// ✅ GOOD: map - transform array
-const productNames = products.map(p => p.name);
-
-// ✅ GOOD: filter - select items
-const electronics = products.filter(p => p.category === 'electronics');
-const affordable = products.filter(p => p.price < 100);
-
-// ✅ GOOD: find - get first match
-const laptop = products.find(p => p.name === 'Laptop');
-
-// ✅ GOOD: reduce - aggregate values
-const totalPrice = products.reduce((sum, p) => sum + p.price, 0);
-
-// ✅ GOOD: some - check if any match
-const hasExpensive = products.some(p => p.price > 500);
-
-// ✅ GOOD: every - check if all match
-const allAffordable = products.every(p => p.price < 1000);
-
-// ✅ GOOD: Method chaining
-const expensiveElectronics = products
-  .filter(p => p.category === 'electronics')
-  .filter(p => p.price > 50)
-  .map(p => p.name);
-
-// ========================================
-// OBJECT METHODS
-// ========================================
-
-const userProfile = {
-  id: 1,
-  name: 'Alice',
-  email: 'alice@example.com',
-  role: 'admin'
-};
-
-// ✅ GOOD: Object.keys, Object.values, Object.entries
-const keys = Object.keys(userProfile);
-const values = Object.values(userProfile);
-const entries = Object.entries(userProfile);
-
-// ✅ GOOD: Object.assign for merging
-const updated = Object.assign({}, userProfile, { role: 'superadmin' });
-
-// ✅ GOOD: Object.fromEntries
-const pairs = [['a', 1], ['b', 2]];
-const obj = Object.fromEntries(pairs);
-
-// ========================================
-// DOM MANIPULATION
-// ========================================
-
-// ✅ GOOD: querySelector for single element
-const header = document.querySelector('.header');
-const submitBtn = document.querySelector('#submit-btn');
-
-// ✅ GOOD: querySelectorAll for multiple elements
-const cards = document.querySelectorAll('.card');
-const inputs = document.querySelectorAll('input[type="text"]');
-
-// ✅ GOOD: Event listeners with arrow functions
-submitBtn?.addEventListener('click', (event) => {
-  event.preventDefault();
-  console.log('Form submitted');
-});
-
-// ✅ GOOD: Event delegation
-document.querySelector('.card-container')?.addEventListener('click', (event) => {
-  if (event.target.matches('.card__button')) {
-    const cardId = event.target.dataset.cardId;
-    console.log(`Card ${cardId} clicked`);
-  }
-});
-
-// ✅ GOOD: Creating elements
-function createCard(title, content) {
-  const card = document.createElement('div');
-  card.className = 'card';
-
-  const cardHeader = document.createElement('div');
-  cardHeader.className = 'card__header';
-  cardHeader.textContent = title;
-
-  const cardBody = document.createElement('div');
-  cardBody.className = 'card__body';
-  cardBody.textContent = content;
-
-  card.appendChild(cardHeader);
-  card.appendChild(cardBody);
-
-  return card;
-}
-
-// ✅ GOOD: Using data attributes
-const element = document.querySelector('[data-user-id="123"]');
-const userId = element?.dataset.userId;
-
-// ========================================
-// ERROR HANDLING
-// ========================================
-
-// ✅ GOOD: Try-catch for synchronous code
-function parseJSON(jsonString) {
-  try {
-    return JSON.parse(jsonString);
-  } catch (error) {
-    console.error('Invalid JSON:', error.message);
-    return null;
-  }
-}
-
-// ✅ GOOD: Custom error classes
-class ValidationError extends Error {
-  constructor(message, field) {
-    super(message);
-    this.name = 'ValidationError';
-    this.field = field;
-  }
-}
-
-function validateEmail(email) {
-  if (!email.includes('@')) {
-    throw new ValidationError('Invalid email format', 'email');
-  }
-  return true;
-}
-
-// ========================================
-// ES6 CLASSES
-// ========================================
-
-// ✅ GOOD: Class with constructor and methods
-class User {
-  constructor(name, email) {
-    this.name = name;
-    this.email = email;
-    this.createdAt = new Date();
-  }
-
-  getProfile() {
-    return {
-      name: this.name,
-      email: this.email,
-      memberSince: this.createdAt
-    };
-  }
-
-  updateEmail(newEmail) {
-    if (!newEmail.includes('@')) {
-      throw new ValidationError('Invalid email', 'email');
-    }
-    this.email = newEmail;
-  }
-}
-
-// ✅ GOOD: Class inheritance
-class AdminUser extends User {
-  constructor(name, email, permissions) {
-    super(name, email);
-    this.permissions = permissions;
-  }
-
-  hasPermission(permission) {
-    return this.permissions.includes(permission);
-  }
-
-  getProfile() {
-    return {
-      ...super.getProfile(),
-      role: 'admin',
-      permissions: this.permissions
-    };
-  }
-}
-
-// ✅ GOOD: Static methods
-class MathUtils {
-  static add(a, b) {
-    return a + b;
-  }
-
-  static multiply(a, b) {
-    return a * b;
-  }
-}
-
-// Usage: MathUtils.add(5, 3)
-
-// ✅ GOOD: Private fields (modern JavaScript)
-class BankAccount {
-  #balance = 0;  // Private field
-
-  constructor(initialBalance) {
-    this.#balance = initialBalance;
-  }
-
-  deposit(amount) {
-    if (amount > 0) {
-      this.#balance += amount;
-    }
-  }
-
-  getBalance() {
-    return this.#balance;
-  }
-}
-
-// ========================================
-// MODERN PATTERNS
-// ========================================
-
-// ✅ GOOD: Debounce function
-function debounce(func, delay) {
-  let timeoutId;
-  return function (...args) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => func.apply(this, args), delay);
-  };
-}
-
-// Usage
-const handleSearch = debounce((query) => {
-  console.log('Searching for:', query);
-}, 300);
-
-// ✅ GOOD: Throttle function
-function throttle(func, limit) {
-  let inThrottle;
-  return function (...args) {
-    if (!inThrottle) {
-      func.apply(this, args);
-      inThrottle = true;
-      setTimeout(() => inThrottle = false, limit);
-    }
-  };
-}
-
-// ✅ GOOD: Memoization
-function memoize(fn) {
-  const cache = new Map();
-  return function (...args) {
-    const key = JSON.stringify(args);
-    if (cache.has(key)) {
-      return cache.get(key);
-    }
-    const result = fn.apply(this, args);
-    cache.set(key, result);
-    return result;
-  };
-}
-
-// ✅ GOOD: Composition
-const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
-
-const addOne = x => x + 1;
-const double = x => x * 2;
-const square = x => x * x;
-
-const transform = compose(square, double, addOne);
-// transform(3) => square(double(addOne(3))) => square(double(4)) => square(8) => 64
-
-// ========================================
-// FETCH API EXAMPLES
-// ========================================
-
-// ✅ GOOD: GET request
-async function getUsers() {
-  try {
-    const response = await fetch(`${API_URL}/users`);
-
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-
-    const users = await response.json();
-    return users;
-  } catch (error) {
-    console.error('Failed to fetch users:', error);
-    throw error;
-  }
-}
-
-// ✅ GOOD: POST request
-async function createUser(userData) {
-  try {
-    const response = await fetch(`${API_URL}/users`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(userData)
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}`);
-    }
-
-    const newUser = await response.json();
-    return newUser;
-  } catch (error) {
-    console.error('Failed to create user:', error);
-    throw error;
-  }
-}
-
-// ✅ GOOD: Request with timeout
-async function fetchWithTimeout(url, timeout = 5000) {
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), timeout);
-
-  try {
-    const response = await fetch(url, { signal: controller.signal });
-    clearTimeout(timeoutId);
-    return response;
-  } catch (error) {
-    if (error.name === 'AbortError') {
-      throw new Error('Request timeout');
-    }
-    throw error;
-  }
-}
-
-// ========================================
-// UTILITY FUNCTIONS
-// ========================================
-
-// ✅ GOOD: Deep clone
-function deepClone(obj) {
-  return JSON.parse(JSON.stringify(obj));
-}
-
-// ✅ GOOD: Check if object is empty
-function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
-
-// ✅ GOOD: Capitalize first letter
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-// ✅ GOOD: Generate unique ID
-function generateId() {
-  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-}
-
-// ✅ GOOD: Format currency
-function formatCurrency(amount, currency = 'USD') {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency
-  }).format(amount);
-}
-
-// ✅ GOOD: Format date
-function formatDate(date, locale = 'en-US') {
-  return new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-  }).format(new Date(date));
-}
-
+// ========================================
+// VARIABLE DECLARATIONS
+// ========================================
+
+// ✅ GOOD: Use const for values that won't be reassigned
+const API_URL = 'https://api.example.com';
+const MAX_RETRIES = 3;
+const user = { name: 'John', age: 30 };
+const items = [1, 2, 3, 4, 5];
+
+// ✅ GOOD: Use let for values that will be reassigned
+let count = 0;
+let status = 'pending';
+
+// ❌ BAD: Never use var
+// var x = 10;
+
+// ========================================
+// ARROW FUNCTIONS
+// ========================================
+
+// ✅ GOOD: Arrow functions for callbacks
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+const evens = numbers.filter(n => n % 2 === 0);
+const sum = numbers.reduce((acc, n) => acc + n, 0);
+
+// ✅ GOOD: Arrow function with multiple statements
+const processUser = (user) => {
+  const fullName = `${user.firstName} ${user.lastName}`;
+  const age = calculateAge(user.birthDate);
+  return { fullName, age };
+};
+
+// ✅ GOOD: Traditional function for methods
+const calculator = {
+  value: 0,
+  add(n) {
+    this.value += n;
+    return this;
+  },
+  multiply(n) {
+    this.value *= n;
+    return this;
+  }
+};
+
+// ========================================
+// TEMPLATE LITERALS
+// ========================================
+
+// ✅ GOOD: Template literals for string interpolation
+const name = 'Alice';
+const age = 25;
+const greeting = `Hello, ${name}! You are ${age} years old.`;
+
+// ✅ GOOD: Multi-line strings
+const html = `
+  <div class="card">
+    <h2>${name}</h2>
+    <p>Age: ${age}</p>
+  </div>
+`;
+
+// ✅ GOOD: Expression evaluation
+const price = 19.99;
+const quantity = 3;
+const total = `Total: $${(price * quantity).toFixed(2)}`;
+
+// ========================================
+// DESTRUCTURING
+// ========================================
+
+// ✅ GOOD: Object destructuring
+const userObj = { firstName: 'John', lastName: 'Doe', email: 'john@example.com' };
+const { firstName, lastName, email } = userObj;
+
+// ✅ GOOD: Destructuring with default values
+const { theme = 'light', language = 'en' } = {};
+
+// ✅ GOOD: Nested destructuring
+const response = {
+  data: {
+    user: { id: 1, name: 'Alice' }
+  }
+};
+const { data: { user: { id, name } } } = response;
+
+// ✅ GOOD: Array destructuring
+const colors = ['red', 'green', 'blue'];
+const [primary, secondary, tertiary] = colors;
+
+// ✅ GOOD: Rest operator in destructuring
+const [first, ...rest] = [1, 2, 3, 4, 5];
+const { id: userId, ...userDetails } = { id: 1, name: 'Bob', age: 30 };
+
+// ========================================
+// SPREAD OPERATOR
+// ========================================
+
+// ✅ GOOD: Array spreading
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const combined = [...arr1, ...arr2];
+
+// ✅ GOOD: Object spreading
+const defaults = { theme: 'light', fontSize: 14 };
+const userPrefs = { fontSize: 16, language: 'en' };
+const settings = { ...defaults, ...userPrefs };
+
+// ✅ GOOD: Copying arrays/objects
+const originalArray = [1, 2, 3];
+const copiedArray = [...originalArray];
+
+const originalObject = { a: 1, b: 2 };
+const copiedObject = { ...originalObject };
+
+// ========================================
+// DEFAULT PARAMETERS
+// ========================================
+
+// ✅ GOOD: Default function parameters
+function greet(name = 'Guest', greeting = 'Hello') {
+  return `${greeting}, ${name}!`;
+}
+
+// ✅ GOOD: Default with destructuring
+function createUser({ name = 'Anonymous', role = 'user' } = {}) {
+  return { name, role, createdAt: new Date() };
+}
+
+// ========================================
+// OPTIONAL CHAINING
+// ========================================
+
+// ✅ GOOD: Optional chaining for nested properties
+const userData = { profile: { address: { city: 'New York' } } };
+const city = userData?.profile?.address?.city;
+const zipCode = userData?.profile?.address?.zipCode; // undefined, no error
+
+// ✅ GOOD: Optional chaining with arrays
+const firstItem = items?.[0];
+
+// ✅ GOOD: Optional chaining with methods
+const result = obj?.method?.();
+
+// ========================================
+// NULLISH COALESCING
+// ========================================
+
+// ✅ GOOD: Nullish coalescing operator (??)
+const userInput = null;
+const value = userInput ?? 'default value';
+
+// ✅ GOOD: Difference from || operator
+const count1 = 0;
+const result1 = count1 || 10;  // 10 (falsy)
+const result2 = count1 ?? 10;  // 0 (only null/undefined)
+
+const emptyString = '';
+const text1 = emptyString || 'default';  // 'default'
+const text2 = emptyString ?? 'default';  // ''
+
+// ========================================
+// ES6 MODULES
+// ========================================
+
+// ✅ GOOD: Named exports
+export const API_KEY = 'abc123';
+export function fetchData(url) {
+  return fetch(url).then(res => res.json());
+}
+
+export class UserService {
+  constructor(apiUrl) {
+    this.apiUrl = apiUrl;
+  }
+
+  async getUser(id) {
+    const response = await fetch(`${this.apiUrl}/users/${id}`);
+    return response.json();
+  }
+}
+
+// ✅ GOOD: Default export
+export default class App {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    console.log('App initialized');
+  }
+}
+
+// ✅ GOOD: Importing
+// import App from './App.js';
+// import { fetchData, UserService } from './services.js';
+// import * as utils from './utils.js';
+
+// ========================================
+// ASYNC/AWAIT PATTERNS
+// ========================================
+
+// ✅ GOOD: Async function with error handling
+async function fetchUserData(userId) {
+  try {
+    const response = await fetch(`${API_URL}/users/${userId}`);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch user:', error);
+    throw error;
+  }
+}
+
+// ✅ GOOD: Promise.all for parallel requests
+async function fetchMultipleUsers(userIds) {
+  try {
+    const promises = userIds.map(id => fetchUserData(id));
+    const users = await Promise.all(promises);
+    return users;
+  } catch (error) {
+    console.error('Failed to fetch users:', error);
+    throw error;
+  }
+}
+
+// ✅ GOOD: Async arrow function
+const loadData = async () => {
+  const data = await fetchUserData(1);
+  return data;
+};
+
+// ========================================
+// ARRAY METHODS
+// ========================================
+
+const products = [
+  { id: 1, name: 'Laptop', price: 999, category: 'electronics' },
+  { id: 2, name: 'Mouse', price: 29, category: 'electronics' },
+  { id: 3, name: 'Desk', price: 299, category: 'furniture' }
+];
+
+// ✅ GOOD: map - transform array
+const productNames = products.map(p => p.name);
+
+// ✅ GOOD: filter - select items
+const electronics = products.filter(p => p.category === 'electronics');
+const affordable = products.filter(p => p.price < 100);
+
+// ✅ GOOD: find - get first match
+const laptop = products.find(p => p.name === 'Laptop');
+
+// ✅ GOOD: reduce - aggregate values
+const totalPrice = products.reduce((sum, p) => sum + p.price, 0);
+
+// ✅ GOOD: some - check if any match
+const hasExpensive = products.some(p => p.price > 500);
+
+// ✅ GOOD: every - check if all match
+const allAffordable = products.every(p => p.price < 1000);
+
+// ✅ GOOD: Method chaining
+const expensiveElectronics = products
+  .filter(p => p.category === 'electronics')
+  .filter(p => p.price > 50)
+  .map(p => p.name);
+
+// ========================================
+// OBJECT METHODS
+// ========================================
+
+const userProfile = {
+  id: 1,
+  name: 'Alice',
+  email: 'alice@example.com',
+  role: 'admin'
+};
+
+// ✅ GOOD: Object.keys, Object.values, Object.entries
+const keys = Object.keys(userProfile);
+const values = Object.values(userProfile);
+const entries = Object.entries(userProfile);
+
+// ✅ GOOD: Object.assign for merging
+const updated = Object.assign({}, userProfile, { role: 'superadmin' });
+
+// ✅ GOOD: Object.fromEntries
+const pairs = [['a', 1], ['b', 2]];
+const obj = Object.fromEntries(pairs);
+
+// ========================================
+// DOM MANIPULATION
+// ========================================
+
+// ✅ GOOD: querySelector for single element
+const header = document.querySelector('.header');
+const submitBtn = document.querySelector('#submit-btn');
+
+// ✅ GOOD: querySelectorAll for multiple elements
+const cards = document.querySelectorAll('.card');
+const inputs = document.querySelectorAll('input[type="text"]');
+
+// ✅ GOOD: Event listeners with arrow functions
+submitBtn?.addEventListener('click', (event) => {
+  event.preventDefault();
+  console.log('Form submitted');
+});
+
+// ✅ GOOD: Event delegation
+document.querySelector('.card-container')?.addEventListener('click', (event) => {
+  if (event.target.matches('.card__button')) {
+    const cardId = event.target.dataset.cardId;
+    console.log(`Card ${cardId} clicked`);
+  }
+});
+
+// ✅ GOOD: Creating elements
+function createCard(title, content) {
+  const card = document.createElement('div');
+  card.className = 'card';
+
+  const cardHeader = document.createElement('div');
+  cardHeader.className = 'card__header';
+  cardHeader.textContent = title;
+
+  const cardBody = document.createElement('div');
+  cardBody.className = 'card__body';
+  cardBody.textContent = content;
+
+  card.appendChild(cardHeader);
+  card.appendChild(cardBody);
+
+  return card;
+}
+
+// ✅ GOOD: Using data attributes
+const element = document.querySelector('[data-user-id="123"]');
+const userId = element?.dataset.userId;
+
+// ========================================
+// ERROR HANDLING
+// ========================================
+
+// ✅ GOOD: Try-catch for synchronous code
+function parseJSON(jsonString) {
+  try {
+    return JSON.parse(jsonString);
+  } catch (error) {
+    console.error('Invalid JSON:', error.message);
+    return null;
+  }
+}
+
+// ✅ GOOD: Custom error classes
+class ValidationError extends Error {
+  constructor(message, field) {
+    super(message);
+    this.name = 'ValidationError';
+    this.field = field;
+  }
+}
+
+function validateEmail(email) {
+  if (!email.includes('@')) {
+    throw new ValidationError('Invalid email format', 'email');
+  }
+  return true;
+}
+
+// ========================================
+// ES6 CLASSES
+// ========================================
+
+// ✅ GOOD: Class with constructor and methods
+class User {
+  constructor(name, email) {
+    this.name = name;
+    this.email = email;
+    this.createdAt = new Date();
+  }
+
+  getProfile() {
+    return {
+      name: this.name,
+      email: this.email,
+      memberSince: this.createdAt
+    };
+  }
+
+  updateEmail(newEmail) {
+    if (!newEmail.includes('@')) {
+      throw new ValidationError('Invalid email', 'email');
+    }
+    this.email = newEmail;
+  }
+}
+
+// ✅ GOOD: Class inheritance
+class AdminUser extends User {
+  constructor(name, email, permissions) {
+    super(name, email);
+    this.permissions = permissions;
+  }
+
+  hasPermission(permission) {
+    return this.permissions.includes(permission);
+  }
+
+  getProfile() {
+    return {
+      ...super.getProfile(),
+      role: 'admin',
+      permissions: this.permissions
+    };
+  }
+}
+
+// ✅ GOOD: Static methods
+class MathUtils {
+  static add(a, b) {
+    return a + b;
+  }
+
+  static multiply(a, b) {
+    return a * b;
+  }
+}
+
+// Usage: MathUtils.add(5, 3)
+
+// ✅ GOOD: Private fields (modern JavaScript)
+class BankAccount {
+  #balance = 0;  // Private field
+
+  constructor(initialBalance) {
+    this.#balance = initialBalance;
+  }
+
+  deposit(amount) {
+    if (amount > 0) {
+      this.#balance += amount;
+    }
+  }
+
+  getBalance() {
+    return this.#balance;
+  }
+}
+
+// ========================================
+// MODERN PATTERNS
+// ========================================
+
+// ✅ GOOD: Debounce function
+function debounce(func, delay) {
+  let timeoutId;
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+// Usage
+const handleSearch = debounce((query) => {
+  console.log('Searching for:', query);
+}, 300);
+
+// ✅ GOOD: Throttle function
+function throttle(func, limit) {
+  let inThrottle;
+  return function (...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}
+
+// ✅ GOOD: Memoization
+function memoize(fn) {
+  const cache = new Map();
+  return function (...args) {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn.apply(this, args);
+    cache.set(key, result);
+    return result;
+  };
+}
+
+// ✅ GOOD: Composition
+const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
+
+const addOne = x => x + 1;
+const double = x => x * 2;
+const square = x => x * x;
+
+const transform = compose(square, double, addOne);
+// transform(3) => square(double(addOne(3))) => square(double(4)) => square(8) => 64
+
+// ========================================
+// FETCH API EXAMPLES
+// ========================================
+
+// ✅ GOOD: GET request
+async function getUsers() {
+  try {
+    const response = await fetch(`${API_URL}/users`);
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const users = await response.json();
+    return users;
+  } catch (error) {
+    console.error('Failed to fetch users:', error);
+    throw error;
+  }
+}
+
+// ✅ GOOD: POST request
+async function createUser(userData) {
+  try {
+    const response = await fetch(`${API_URL}/users`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(userData)
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    const newUser = await response.json();
+    return newUser;
+  } catch (error) {
+    console.error('Failed to create user:', error);
+    throw error;
+  }
+}
+
+// ✅ GOOD: Request with timeout
+async function fetchWithTimeout(url, timeout = 5000) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    clearTimeout(timeoutId);
+    return response;
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      throw new Error('Request timeout');
+    }
+    throw error;
+  }
+}
+
+// ========================================
+// UTILITY FUNCTIONS
+// ========================================
+
+// ✅ GOOD: Deep clone
+function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+// ✅ GOOD: Check if object is empty
+function isEmpty(obj) {
+  return Object.keys(obj).length === 0;
+}
+
+// ✅ GOOD: Capitalize first letter
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+// ✅ GOOD: Generate unique ID
+function generateId() {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+// ✅ GOOD: Format currency
+function formatCurrency(amount, currency = 'USD') {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency
+  }).format(amount);
+}
+
+// ✅ GOOD: Format date
+function formatDate(date, locale = 'en-US') {
+  return new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(new Date(date));
+}
+