JavaScript Best Practices

📝 Coding Standards & Conventions

Consistent coding standards make your code more readable, maintainable, and easier to debug. Follow these conventions to write professional JavaScript.

JavaScript Editor

// JavaScript Coding Standards
console.log("=== CODING STANDARDS ===");

// 1. Variable Naming
console.log("\n=== VARIABLE NAMING ===");

// ❌ Bad
const d = new Date(); // Too vague
const data = getData(); // What kind of data?
let flag = true; // What does this flag represent?

// ✅ Good
const currentDate = new Date();
const userProfile = getProfileData();
let isLoading = true; // Clear purpose

// Naming conventions
const MAX_RETRIES = 3; // UPPER_SNAKE_CASE for constants
let currentPage = 1;   // camelCase for variables
const API_BASE_URL = "https://api.example.com";

// 2. Function Naming
console.log("\n=== FUNCTION NAMING ===");

// ❌ Bad
function process() { // Too vague
  // ...
}

function calc(a, b) { // Abbreviated
  return a + b;
}

// ✅ Good
function calculateOrderTotal(items) { // Verb + noun
  return items.reduce((total, item) => total + item.price, 0);
}

function isValidEmail(email) { // Boolean functions start with 'is', 'has', 'can'
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

// 3. Code Structure
console.log("\n=== CODE STRUCTURE ===");

// ❌ Bad - Everything in one function
function handleUserAction() {
  const data = fetchData();
  processData(data);
  updateUI(data);
  logAction(data);
  sendAnalytics(data);
}

// ✅ Good - Single Responsibility Principle
function handleUserAction() {
  const data = fetchUserData();
  const processedData = processUserData(data);
  updateUserInterface(processedData);
  logUserAction(processedData);
  sendUserAnalytics(processedData);
}

// Helper functions
function fetchUserData() {
  // Fetch data from API
}

function processUserData(data) {
  // Transform data
  return {
    ...data,
    fullName: `${data.firstName} ${data.lastName}`,
    formattedDate: new Date(data.timestamp).toLocaleDateString()
  };
}

// 4. Consistent Formatting
console.log("\n=== CONSISTENT FORMATTING ===");

// ❌ Inconsistent
function calculate(a,b){return a+b}
function processData(data, options){ 
  // ... 
}

// ✅ Consistent
function calculate(a, b) {
  return a + b;
}

function processData(data, options) {
  // ...
}

// Use proper indentation (2 spaces)
const user = {
  id: 1,
  name: "John Doe",
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  }
};

// 5. Commenting Guidelines
console.log("\n=== COMMENTING GUIDELINES ===");

// ❌ Bad comments
let x = 5; // Set x to 5 (obvious)
function add(a, b) { // Adds two numbers (obvious)
  return a + b;
}

// ✅ Good comments
// Maximum login attempts before lockout
const MAX_LOGIN_ATTEMPTS = 5;

/**
 * Calculate the total price including tax and discounts
 * @param {number} subtotal - The subtotal before tax
 * @param {number} taxRate - Tax rate as decimal (e.g., 0.08 for 8%)
 * @param {number} discount - Discount amount to apply
 * @returns {number} Final price with tax minus discount
 */
function calculateTotalPrice(subtotal, taxRate, discount = 0) {
  const taxAmount = subtotal * taxRate;
  return subtotal + taxAmount - discount;
}

// Explain WHY, not WHAT
// Using Set for O(1) lookup time
const uniqueItems = new Set(items);

// 6. Error Handling Consistency
console.log("\n=== ERROR HANDLING CONSISTENCY ===");

// ❌ Inconsistent error handling
function getUser(id) {
  if (!id) {
    return null;
  }
  if (id < 0) {
    throw "Invalid ID";
  }
  return fetchUser(id);
}

// ✅ Consistent error handling
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

// 7. Import/Export Organization
console.log("\n=== IMPORT/EXPORT ORGANIZATION ===");

// ❌ Random imports
import React from 'react';
import './styles.css';
import { Button } from './Button';
import { useEffect } from 'react';
import api from './api';

// ✅ Organized imports
// 1. External dependencies
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

// 2. Internal modules
import api from '@/lib/api';
import { logger } from '@/utils/logger';

// 3. Components
import { Button } from '@/components/Button';
import { Card } from '@/components/Card';

// 4. Styles
import './UserProfile.css';

// Example component structure
function UserProfile() {
  const [user, setUser] = useState(null);
  const router = useRouter();
  
  useEffect(() => {
    loadUser();
  }, []);
  
  const loadUser = async () => {
    try {
      const data = await api.getUser(router.query.id);
      setUser(data);
    } catch (error) {
      logger.error('Failed to load user', error);
    }
  };
  
  return (
    <Card>
      {user && (
        <div>
          <h2>{user.name}</h2>
          <Button onClick={() => router.back()}>
            Back
          </Button>
        </div>
      )}
    </Card>
  );
}

Essential Standards:

Use meaningful variable names
Follow consistent naming conventions
Write small, single-purpose functions
Use proper indentation (2 spaces)
Comment why, not what

Tools to Enforce Standards:

ESLint - Code quality and style
Prettier - Automatic formatting
Husky - Git hooks
lint-staged - Run on staged files
EditorConfig - Editor settings

⚡ Performance Optimization

Writing performant JavaScript is crucial for user experience. Follow these patterns to ensure your applications run smoothly.

JavaScript Editor

// JavaScript Performance Best Practices
console.log("=== PERFORMANCE BEST PRACTICES ===");

// 1. DOM Manipulation
console.log("\n=== DOM MANIPULATION ===");

// ❌ Bad - Multiple reflows
function updateListBad(items) {
  const list = document.getElementById('list');
  list.innerHTML = ''; // First reflow
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    list.appendChild(li); // Reflow for each item
  });
}

// ✅ Good - Batch DOM updates
function updateListGood(items) {
  const list = document.getElementById('list');
  const fragment = document.createDocumentFragment(); // Lightweight container
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li);
  });
  
  list.innerHTML = ''; // Single reflow
  list.appendChild(fragment); // Single reflow
}

// 2. Event Handling
console.log("\n=== EVENT HANDLING ===");

// ❌ Bad - Multiple listeners
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick); // Many listeners
});

// ✅ Good - Event delegation
document.getElementById('container').addEventListener('click', (event) => {
  if (event.target.classList.contains('item')) {
    handleClick(event);
  }
});

// Debouncing example
function createDebouncedFunction(func, delay) {
  let timeoutId;
  
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Use for search input
const searchInput = document.getElementById('search');
const debouncedSearch = createDebouncedFunction(searchFunction, 300);
searchInput.addEventListener('input', debouncedSearch);

// 3. Loops and Iteration
console.log("\n=== LOOPS AND ITERATION ===");

const largeArray = Array.from({ length: 10000 }, (_, i) => i);

// ❌ Bad - Inefficient loops
for (let i = 0; i < largeArray.length; i++) { // length checked every iteration
  processItem(largeArray[i]);
}

// ✅ Good - Optimized loops
const length = largeArray.length; // Cache length
for (let i = 0; i < length; i++) {
  processItem(largeArray[i]);
}

// Better - Use for...of for arrays
for (const item of largeArray) {
  processItem(item);
}

// Best - Use built-in methods when appropriate
largeArray.forEach(processItem);

// 4. Memory Management
console.log("\n=== MEMORY MANAGEMENT ===");

// ❌ Bad - Memory leaks
function createLeak() {
  const largeObject = new Array(1000000).fill('data');
  
  // Event listener not removed
  window.addEventListener('scroll', () => {
    console.log(largeObject.length); // largeObject stays in memory
  });
}

// ✅ Good - Clean up resources
function createCleanFunction() {
  const largeObject = new Array(1000000).fill('data');
  
  const handleScroll = () => {
    console.log(largeObject.length);
  };
  
  window.addEventListener('scroll', handleScroll);
  
  // Cleanup function
  return () => {
    window.removeEventListener('scroll', handleScroll);
    largeObject.length = 0; // Help GC
  };
}

// 5. Data Structures
console.log("\n=== DATA STRUCTURES ===");

// ❌ Bad - Using array for lookups
function findUserBad(users, userId) {
  return users.find(user => user.id === userId); // O(n) lookup
}

// ✅ Good - Using Map for lookups
const userMap = new Map();
users.forEach(user => userMap.set(user.id, user));

function findUserGood(userId) {
  return userMap.get(userId); // O(1) lookup
}

// Using Set for uniqueness
const uniqueValues = new Set([1, 2, 2, 3, 3, 3]); // {1, 2, 3}

// 6. String Concatenation
console.log("\n=== STRING CONCATENATION ===");

// ❌ Bad - String concatenation in loop
let result = '';
for (let i = 0; i < 1000; i++) {
  result += 'data' + i; // Creates new string each time
}

// ✅ Good - Use array join
const parts = [];
for (let i = 0; i < 1000; i++) {
  parts.push('data' + i);
}
const result2 = parts.join('');

// Better - Template literals for simple cases
const name = 'John';
const greeting = `Hello, ${name}!`;

// 7. Object Manipulation
console.log("\n=== OBJECT MANIPULATION ===");

const user = {
  id: 1,
  name: 'John',
  email: 'john@example.com',
  settings: {
    theme: 'dark',
    notifications: true
  }
};

// ❌ Bad - Multiple spreads
const updatedUser = {
  ...user,
  ...{ name: 'Jane' },
  ...{ email: 'jane@example.com' }
};

// ✅ Good - Single spread
const updatedUser2 = {
  ...user,
  name: 'Jane',
  email: 'jane@example.com'
};

// For deep updates
const deepUpdate = {
  ...user,
  settings: {
    ...user.settings,
    theme: 'light'
  }
};

// 8. Function Optimization
console.log("\n=== FUNCTION OPTIMIZATION ===");

// ❌ Bad - Recreating functions
function Component() {
  const handleClick = () => { // Recreated on every render
    console.log('Clicked');
  };
  
  return <button onClick={handleClick}>Click</button>;
}

// ✅ Good - Memoized callbacks
function ComponentOptimized() {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []); // Created once
  
  return <button onClick={handleClick}>Click</button>;
}

// Memoizing expensive calculations
function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return expensiveCalculation(data);
  }, [data]); // Only recalculates when data changes
  
  return <div>{processedData}</div>;
}

// 9. Network Optimization
console.log("\n=== NETWORK OPTIMIZATION ===");

// Image lazy loading
const lazyImages = document.querySelectorAll('img.lazy');
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
});

lazyImages.forEach(img => imageObserver.observe(img));

// Resource hints
// Add to HTML: <link rel="preconnect" href="https://api.example.com">
// Add to HTML: <link rel="preload" href="critical.css" as="style">

// 10. Web Workers for heavy computation
console.log("\n=== WEB WORKERS ===");

// Main thread
const worker = new Worker('worker.js');

worker.postMessage({ data: largeArray });

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

// worker.js
self.onmessage = (event) => {
  const result = event.data.data.map(x => x * 2); // Heavy computation
  self.postMessage(result);
};

🚀 Performance Checklist:

Minimize DOM manipulation and reflows
Use event delegation for dynamic content
Implement debouncing for frequent events
Choose appropriate data structures
Lazy load non-critical resources
Use Web Workers for heavy computation

🛡️ Security Best Practices

Security should be built into your JavaScript applications from the start. These practices protect against common vulnerabilities and attacks.

JavaScript Editor

// JavaScript Security Best Practices
console.log("=== SECURITY BEST PRACTICES ===");

// 1. Input Validation and Sanitization
console.log("\n=== INPUT VALIDATION ===");

// ❌ Bad - No validation
function saveComment(comment) {
  // Directly using user input
  document.getElementById('comments').innerHTML += `<div>${comment}</div>`;
}

// ✅ Good - Input validation and sanitization
function saveCommentSafe(comment) {
  // Validate input
  if (typeof comment !== 'string') {
    throw new Error('Comment must be a string');
  }
  
  if (comment.trim().length === 0) {
    throw new Error('Comment cannot be empty');
  }
  
  if (comment.length > 1000) {
    throw new Error('Comment too long');
  }
  
  // Sanitize HTML
  const sanitized = sanitizeHTML(comment);
  
  // Use textContent instead of innerHTML when possible
  const div = document.createElement('div');
  div.textContent = sanitized;
  document.getElementById('comments').appendChild(div);
}

// HTML sanitization function
function sanitizeHTML(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

// 2. XSS Prevention
console.log("\n=== XSS PREVENTION ===");

// NEVER do this:
// element.innerHTML = userInput;

// Always escape user input
function escapeHTML(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;')
    .replace(/\//g, '&#x2F;');
}

// Content Security Policy (CSP) headers should be set server-side
// Example: Content-Security-Policy: default-src 'self';

// 3. Secure API Communication
console.log("\n=== SECURE API COMMUNICATION ===");

// ❌ Bad - Plain text tokens
const API_KEY = 'plain-text-api-key'; // Visible in source

// ✅ Good - Secure token handling
// Store in environment variables
const API_KEY = process.env.API_KEY;

// Use HTTPS always
const API_URL = 'https://api.example.com';

// Add security headers to fetch requests
async function secureFetch(url, options = {}) {
  const defaultHeaders = {
    'Content-Type': 'application/json',
    'X-Content-Type-Options': 'nosniff',
    'X-Frame-Options': 'DENY',
    'X-XSS-Protection': '1; mode=block'
  };
  
  const response = await fetch(url, {
    ...options,
    headers: {
      ...defaultHeaders,
      ...options.headers
    },
    credentials: 'same-origin' // Don't send cookies to other domains
  });
  
  // Validate response
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
  
  const contentType = response.headers.get('content-type');
  if (!contentType || !contentType.includes('application/json')) {
    throw new Error('Invalid response type');
  }
  
  return response.json();
}

// 4. Authentication Security
console.log("\n=== AUTHENTICATION SECURITY ===");

// ❌ Bad - Storing tokens in localStorage (vulnerable to XSS)
localStorage.setItem('token', 'jwt-token');

// ✅ Better - Use httpOnly cookies (server-side)
// document.cookie = "token=jwt-token; HttpOnly; Secure; SameSite=Strict";

// For SPAs, consider using refresh token rotation
class AuthService {
  constructor() {
    this.accessToken = null;
    this.refreshToken = null;
  }
  
  async login(credentials) {
    const response = await secureFetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    });
    
    // Store in memory, not localStorage
    this.accessToken = response.accessToken;
    this.refreshToken = response.refreshToken;
    
    // Schedule token refresh
    this.scheduleRefresh();
    
    return response;
  }
  
  scheduleRefresh() {
    // Refresh token before it expires
    setTimeout(async () => {
      await this.refreshTokens();
    }, 29 * 60 * 1000); // Refresh after 29 minutes for 30-minute token
  }
  
  async refreshTokens() {
    const response = await secureFetch('/api/refresh', {
      method: 'POST',
      body: JSON.stringify({ refreshToken: this.refreshToken })
    });
    
    this.accessToken = response.accessToken;
    this.scheduleRefresh();
  }
  
  getAuthHeader() {
    return this.accessToken ? `Bearer ${this.accessToken}` : '';
  }
}

// 5. Data Protection
console.log("\n=== DATA PROTECTION ===");

// Never store sensitive data in client-side storage
const sensitiveData = {
  ssn: '123-45-6789',
  creditCard: '4111111111111111'
};

// ❌ Bad
localStorage.setItem('userData', JSON.stringify(sensitiveData));

// ✅ Good - Only store on server
// If you must store temporarily, use encryption
async function encryptData(data, key) {
  // Use Web Crypto API for encryption
  const encoded = new TextEncoder().encode(JSON.stringify(data));
  const encrypted = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv: new Uint8Array(12) },
    key,
    encoded
  );
  return encrypted;
}

// 6. CSRF Protection
console.log("\n=== CSRF PROTECTION ===");

// Always use CSRF tokens for state-changing operations
async function submitForm(data) {
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  
  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': csrfToken
    },
    body: JSON.stringify(data)
  });
  
  return response.json();
}

// 7. Secure Dependencies
console.log("\n=== SECURE DEPENDENCIES ===");

// Always:
// 1. Use package-lock.json or yarn.lock
// 2. Regularly update dependencies
// 3. Use npm audit or yarn audit
// 4. Review dependency licenses

// Example package.json security scripts
const packageJsonExample = {
  "scripts": {
    "audit": "npm audit",
    "audit:fix": "npm audit fix",
    "outdated": "npm outdated",
    "update": "npm update"
  }
};

// 8. Error Handling Security
console.log("\n=== ERROR HANDLING SECURITY ===");

// ❌ Bad - Exposing sensitive information
try {
  // Database operation
} catch (error) {
  console.error('Database error:', error);
  // Shows database credentials in stack trace
}

// ✅ Good - Generic error messages
try {
  // Database operation
} catch (error) {
  console.error('Operation failed');
  // Log full error server-side only
  logErrorToServer(error);
  
  // Show user-friendly message
  alert('An error occurred. Please try again.');
}

// 9. Secure Configuration
console.log("\n=== SECURE CONFIGURATION ===");

// Use environment variables for configuration
const config = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL || 'https://api.example.com',
  environment: process.env.NODE_ENV || 'development',
  debug: process.env.NODE_ENV === 'development',
  featureFlags: {
    newDashboard: process.env.REACT_APP_FEATURE_NEW_DASHBOARD === 'true'
  }
};

// Never commit .env files to version control
// .env files should be in .gitignore

// 10. Regular Security Audits
console.log("\n=== SECURITY AUDITS ===");

// Implement security headers
const securityHeaders = {
  'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline';",
  'X-Frame-Options': 'DENY',
  'X-Content-Type-Options': 'nosniff',
  'Referrer-Policy': 'strict-origin-when-cross-origin',
  'Permissions-Policy': 'camera=(), microphone=(), geolocation=()'
};

// Use security scanning tools
// - OWASP ZAP
// - Snyk
// - npm audit
// - SonarQube

⚠️ Critical Security Rules:

Never trust user input
Always validate and sanitize data
Use HTTPS for all communications
Implement proper authentication
Keep dependencies updated

🔒 Security Tools:

Content Security Policy (CSP)
OWASP security headers
npm audit / yarn audit
Snyk for vulnerability scanning
Helmet.js for Express security

🧪 Testing Best Practices

Comprehensive testing ensures your code works correctly and prevents regressions. Follow these patterns for effective testing strategies.

JavaScript Editor

// JavaScript Testing Best Practices
console.log("=== TESTING BEST PRACTICES ===");

// 1. Test Structure and Organization
console.log("\n=== TEST STRUCTURE ===");

// ❌ Bad - Unorganized tests
test('calculator', () => {
  // Mixed concerns
  expect(add(1, 2)).toBe(3);
  expect(subtract(5, 3)).toBe(2);
  expect(multiply(2, 3)).toBe(6);
});

// ✅ Good - Organized tests
describe('Calculator', () => {
  describe('add()', () => {
    it('should add two positive numbers', () => {
      expect(add(2, 3)).toBe(5);
    });
    
    it('should add negative numbers', () => {
      expect(add(-1, -2)).toBe(-3);
    });
    
    it('should handle zero', () => {
      expect(add(0, 5)).toBe(5);
    });
  });
  
  describe('subtract()', () => {
    it('should subtract two numbers', () => {
      expect(subtract(5, 3)).toBe(2);
    });
  });
});

// 2. Pure Functions for Testing
console.log("\n=== PURE FUNCTIONS ===");

// ❌ Bad - Impure function (hard to test)
let counter = 0;
function increment() {
  counter++;
  return counter;
}

// ✅ Good - Pure function (easy to test)
function add(a, b) {
  return a + b;
}

// Pure function with no side effects
function calculateTotal(items, taxRate) {
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  const tax = subtotal * taxRate;
  return subtotal + tax;
}

// 3. Mocking and Stubbing
console.log("\n=== MOCKING AND STUBBING ===");

// Real API call (hard to test)
async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

// Testable version with dependency injection
async function fetchUserDataTestable(userId, fetch = window.fetch) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  return response.json();
}

// Test example
describe('fetchUserDataTestable', () => {
  it('should fetch user data', async () => {
    // Mock fetch function
    const mockFetch = jest.fn().mockResolvedValue({
      ok: true,
      json: () => Promise.resolve({ id: 1, name: 'John' })
    });
    
    const user = await fetchUserDataTestable(1, mockFetch);
    
    expect(user).toEqual({ id: 1, name: 'John' });
    expect(mockFetch).toHaveBeenCalledWith('/api/users/1');
  });
});

// 4. Test Data Factories
console.log("\n=== TEST DATA FACTORIES ===");

// ❌ Bad - Hardcoded test data
const user1 = { id: 1, name: 'John', email: 'john@test.com' };
const user2 = { id: 2, name: 'Jane', email: 'jane@test.com' };

// ✅ Good - Test data factory
function createTestUser(overrides = {}) {
  const defaultUser = {
    id: Math.floor(Math.random() * 1000),
    name: 'Test User',
    email: 'test@example.com',
    isActive: true,
    createdAt: new Date().toISOString()
  };
  
  return { ...defaultUser, ...overrides };
}

// Usage in tests
const activeUser = createTestUser({ name: 'Active User' });
const inactiveUser = createTestUser({ name: 'Inactive User', isActive: false });

// 5. Testing Asynchronous Code
console.log("\n=== ASYNC TESTING ===");

// ❌ Bad - Not handling async properly
test('async function', () => {
  fetchData().then(data => {
    expect(data).toBe('expected');
  });
  // Test passes even if expectation fails
});

// ✅ Good - Proper async testing
test('async function', async () => {
  const data = await fetchData();
  expect(data).toBe('expected');
});

// Testing promises
test('promise resolves', () => {
  return expect(fetchData()).resolves.toBe('expected');
});

test('promise rejects', () => {
  return expect(failingFetch()).rejects.toThrow('Network error');
});

// 6. Test Coverage
console.log("\n=== TEST COVERAGE ===");

// Aim for:
// - 80-90% line coverage
// - 100% critical path coverage
// - Edge cases and error scenarios

// Example comprehensive test
describe('User Registration', () => {
  it('should register user with valid data', async () => {
    // Happy path
    const result = await registerUser(validUserData);
    expect(result.success).toBe(true);
  });
  
  it('should reject duplicate email', async () => {
    // Edge case
    await expect(registerUser(duplicateEmailData))
      .rejects
      .toThrow('Email already exists');
  });
  
  it('should validate password strength', async () => {
    // Validation test
    await expect(registerUser(weakPasswordData))
      .rejects
      .toThrow('Password too weak');
  });
  
  it('should handle network errors', async () => {
    // Error scenario
    mockNetworkFailure();
    await expect(registerUser(validUserData))
      .rejects
      .toThrow('Network error');
  });
});

// 7. Integration Tests
console.log("\n=== INTEGRATION TESTS ===");

// Test component integration
describe('LoginForm Integration', () => {
  it('should submit form and show success message', async () => {
    // Render component
    render(<LoginForm />);
    
    // Fill form
    fireEvent.change(screen.getByLabelText(/email/i), {
      target: { value: 'test@example.com' }
    });
    fireEvent.change(screen.getByLabelText(/password/i), {
      target: { value: 'password123' }
    });
    
    // Submit form
    fireEvent.click(screen.getByText(/login/i));
    
    // Verify success message appears
    await waitFor(() => {
      expect(screen.getByText(/login successful/i)).toBeInTheDocument();
    });
  });
});

// 8. Performance Testing
console.log("\n=== PERFORMANCE TESTING ===");

// Test function performance
describe('Performance', () => {
  it('should process 1000 items under 100ms', () => {
    const items = Array.from({ length: 1000 }, (_, i) => i);
    
    const start = performance.now();
    processItems(items);
    const end = performance.now();
    
    expect(end - start).toBeLessThan(100);
  });
});

// 9. Snapshot Testing
console.log("\n=== SNAPSHOT TESTING ===");

// Useful for UI components
describe('Button Component', () => {
  it('should render correctly', () => {
    const button = render(<Button>Click me</Button>);
    expect(button.container).toMatchSnapshot();
  });
  
  it('should render disabled state', () => {
    const button = render(<Button disabled>Disabled</Button>);
    expect(button.container).toMatchSnapshot();
  });
});

// 10. Continuous Testing
console.log("\n=== CONTINUOUS TESTING ===");

// Example test script in package.json
const testScripts = {
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:ci": "jest --ci --maxWorkers=2",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "type-check": "tsc --noEmit",
    "validate": "npm run lint && npm run type-check && npm run test"
  }
};

// Pre-commit hooks (husky)
const huskyConfig = {
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test",
      "pre-push": "npm run test:ci"
    }
  }
};

// 11. Testing Utilities
console.log("\n=== TESTING UTILITIES ===");

// Helper function for testing
function waitForElement(selector, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();
    
    const checkElement = () => {
      const element = document.querySelector(selector);
      
      if (element) {
        resolve(element);
      } else if (Date.now() - startTime > timeout) {
        reject(new Error(`Element ${selector} not found after ${timeout}ms`));
      } else {
        setTimeout(checkElement, 100);
      }
    };
    
    checkElement();
  });
}

// Test cleanup helper
function setupTest() {
  const container = document.createElement('div');
  container.id = 'test-container';
  document.body.appendChild(container);
  
  return {
    container,
    cleanup: () => {
      document.body.removeChild(container);
    }
  };
}

// Usage
describe('DOM Testing', () => {
  let testSetup;
  
  beforeEach(() => {
    testSetup = setupTest();
  });
  
  afterEach(() => {
    testSetup.cleanup();
  });
  
  it('should add element to DOM', () => {
    const element = document.createElement('div');
    element.textContent = 'Test';
    testSetup.container.appendChild(element);
    
    expect(testSetup.container.querySelector('div').textContent).toBe('Test');
  });
});

Testing Pyramid:

Unit Tests - Fast, isolated
Integration Tests - Component interactions
E2E Tests - User workflows

Testing Tools:

Jest - Test runner and framework
React Testing Library
Cypress - E2E testing
Storybook - Component testing

Test Principles:

Test behavior, not implementation
Write deterministic tests
Avoid test interdependence
Keep tests fast and reliable

📋 Comprehensive Best Practices Checklist

Code Quality:

✅ Use meaningful variable names
✅ Write small, focused functions
✅ Follow consistent formatting
✅ Add meaningful comments
✅ Use proper error handling

Performance:

✅ Minimize DOM operations
✅ Use event delegation
✅ Implement debouncing
✅ Choose optimal data structures
✅ Lazy load resources

Security:

✅ Validate all user inputs
✅ Escape output properly
✅ Use HTTPS everywhere
✅ Implement CSRF protection
✅ Keep dependencies updated

Testing:

✅ Write unit tests for business logic
✅ Test edge cases and errors
✅ Use mocking for external dependencies
✅ Maintain test coverage > 80%
✅ Run tests in CI/CD pipeline

Maintenance:

✅ Use version control properly
✅ Write comprehensive documentation
✅ Regular code reviews
✅ Refactor technical debt
✅ Monitor application performance

← Debugging

JavaScript Tutorial

JavaScript Best Practices

📝 Coding Standards & Conventions

Essential Standards:

Tools to Enforce Standards:

⚡ Performance Optimization

🚀 Performance Checklist:

🛡️ Security Best Practices

⚠️ Critical Security Rules:

🔒 Security Tools:

🧪 Testing Best Practices

Testing Pyramid:

Testing Tools:

Test Principles:

📋 Comprehensive Best Practices Checklist

Code Quality:

Performance:

Security:

Testing:

Maintenance:

Explore Related Tools

Production Docker Deployment & Cloud Hosting Guide

Academic Essay Word Counter & Readability Analyzer

JWT Debugger, Signer & Expiration Inspector Online

Permutation and Combination Calculator (nPr & nCr)

Permutations & Combinations (nPr & nCr) Calculator

Bootstrap 5 Blockquotes: Styling Quotes, Alignment & Examples

Follow Us

Our Tools

Our Company

Special Tools