### 3. Caching Strategies

// Service Worker caching
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

---

## 🔹 Security Best Practices
### 1. Input Sanitization

function sanitizeInput(input) {
  return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

### 2. Content Security Policy (CSP)

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'unsafe-inline'">

### 3. Secure Authentication

// Never store tokens in localStorage
const auth = {
  getToken() {
    return window.sessionStorage.getItem('token');
  },
  setToken(token) {
    window.sessionStorage.setItem('token', token);
  }
};

---

## 🔹 Practical Example: Robust API Wrapper

class ApiClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
    this.cache = new Map();
  }

  async request(endpoint, options = {}) {
    const cacheKey = JSON.stringify({ endpoint, options });
    
    try {
      // Cache-first strategy
      if (this.cache.has(cacheKey)) {
        return this.cache.get(cacheKey);
      }

      const response = await fetch(`${this.baseUrl}${endpoint}`, {
        headers: { 'Content-Type': 'application/json' },
        ...options
      });

      if (!response.ok) {
        throw new ApiError(
          endpoint, 
          response.status, 
          await response.text()
        );
      }

      const data = await response.json();
      this.cache.set(cacheKey, data); // Cache response
      return data;

    } catch (error) {
      if (error instanceof ApiError) {
        console.error(`API Error: ${error.message}`);
      } else {
        console.error(`Network Error: ${error.message}`);
      }
      throw error;
    }
  }
}

---

## 🔹 Best Practices Checklist
1. Error Handling
- [ ] Use specific error types
- [ ] Implement global error handlers
- [ ] Validate API responses

2. Debugging
- [ ] Utilize source maps
- [ ] Leverage browser dev tools
- [ ] Add strategic debugger statements

3. Performance
- [ ] Audit bundle size regularly
- [ ] Implement lazy loading
- [ ] Debounce rapid events

4. Security
- [ ] Sanitize user input
- [ ] Use secure token storage
- [ ] Implement CSP headers

---

### 📌 What's Next?
In Final Part 10, we'll cover:
➡️ Modern JavaScript (ES2023+)
➡️ TypeScript Fundamentals
➡️ Advanced Patterns
➡️ Where to Go From Here

#JavaScript #ProfessionalDevelopment #WebDev 🚀

Practice Exercise:
1. Implement error boundaries in a React/Vue app
2. Profile a slow function using Chrome DevTools
3. Create a memory leak and detect it