Fe | Scripts

Callback hell is the graveyard of FE scripts. Use async/await with Promise.allSettled for concurrent operations.

// Efficient FE script for dashboard data
async function loadDashboardData(userId) 
  const [profile, notifications, reports] = await Promise.allSettled([
    fetch(`/api/users/$userId`).then(r => r.json()),
    fetch('/api/notifications').then(r => r.json()),
    fetch('/api/sales-reports').then(r => r.json())
  ]);
return 
profile: profile.status === 'fulfilled' ? profile.value : null,
notifications: notifications.status === 'fulfilled' ? notifications.value : [],
reports: reports.status === 'fulfilled' ? reports.value :  error: true 
;
 fe scripts

const copyToClipboard = async (text) => 
  try 
    await navigator.clipboard.writeText(text);
    console.log('Copied:', text);
   catch (err) 
    console.error('Copy failed:', err);
;
// Usage: copyToClipboard('Hello FE world!');

// Toggle dark class & save preference
const toggle = document.getElementById('darkModeToggle');
const enableDark = () => 
  document.body.classList.add('dark');
  localStorage.setItem('theme', 'dark');
;
const disableDark = () => 
  document.body.classList.remove('dark');
  localStorage.setItem('theme', 'light');
;
toggle?.addEventListener('click', () => 
  document.body.classList.contains('dark') ? disableDark() : enableDark();
);
// Load saved preference
if (localStorage.getItem('theme') === 'dark') enableDark();