JavaScript এ Default Export বনাম Named Export: কখন কোনটা ব্যবহার করবেন?

// mathUtils.js

// বিভিন্ন গাণিতিক ফাংশনগুলো named export হিসেবে এক্সপোর্ট করছি
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

// অথবা আলাদাভাবে এক্সপোর্ট করতে পারেন
const divide = (a, b) => b !== 0 ? a / b : 'Cannot divide by zero';
const percentage = (value, total) => (value / total) * 100;

export { divide, percentage };

// app.js

// নির্দিষ্ট ফাংশনগুলো ইমপোর্ট করছি - নাম একদম ঠিক রাখতে হবে
import { add, subtract, multiply } from './mathUtils.js';

// ব্যবহার করা
console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6

// অথবা সব একসাথে ইমপোর্ট করতে চাইলে
import * as MathUtils from './mathUtils.js';
console.log(MathUtils.multiply(4, 5)); // 20

// Button.js

// একটা React কম্পোনেন্ট যেটা ফাইলের মূল ফাংশন
const Button = ({ children, onClick, type = "button" }) => {
  return (
    <button 
      type={type} 
      onClick={onClick}
      className="custom-button"
    >
      {children}
    </button>
  );
};

// Default export হিসেবে এক্সপোর্ট করছি
export default Button;

// App.js

// Default export ইমপোর্ট করার সময় যেকোনো নাম দিতে পারেন
import Button from './Button.js';
import MyButton from './Button.js';  // এটাও কাজ করবে
import CoolButton from './Button.js'; // এটাও কাজ করবে

// ব্যবহার করা
function App() {
  return (
    <div>
      <Button onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

// UserService.js

class UserService {
  constructor() {
    this.users = [];
  }
  
  addUser(user) {
    this.users.push(user);
  }
  
  getUsers() {
    return this.users;
  }
  
  findUser(id) {
    return this.users.find(user => user.id === id);
  }
}

// ক্লাসটি default export হিসেবে এক্সপোর্ট করছি
export default UserService;

// main.js

// যেকোনো নাম দিয়ে ইমপোর্ট করতে পারি
import UserService from './UserService.js';
// অথবা
import MyUserService from './UserService.js';

const userService = new UserService();
userService.addUser({ id: 1, name: 'আহমেদ' });

// helpers.js
export const formatDate = (date) => { /* code */ };
export const formatCurrency = (amount) => { /* code */ };
export const validateEmail = (email) => { /* code */ };

// config.js
export const API_BASE_URL = 'https://api.example.com';
export const DEFAULT_TIMEOUT = 5000;
export const SUPPORTED_LANGUAGES = ['bn', 'en', 'hi'];

// stringUtils.js
export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
export const truncate = (str, length) => str.length > length ? str.slice(0, length) + '...' : str;
export const slugify = (str) => str.toLowerCase().replace(/\s+/g, '-');

// Header.js
const Header = () => {
  return <header>My Website</header>;
};

export default Header;

// Database.js
class Database {
  connect() { /* code */ }
  query() { /* code */ }
}

export default Database;

// logger.js
const logger = (message, level = 'info') => {
  console.log(`[${level.toUpperCase()}] ${message}`);
};

export default logger;

// Button.js

// Helper function - named export
export const getButtonTheme = (type) => {
  const themes = {
    primary: 'bg-blue-500',
    secondary: 'bg-gray-500',
    danger: 'bg-red-500'
  };
  return themes[type] || themes.primary;
};

// Constants - named export
export const BUTTON_SIZES = {
  small: 'px-2 py-1',
  medium: 'px-4 py-2',
  large: 'px-6 py-3'
};

// Main component - default export
const Button = ({ children, type = 'primary', size = 'medium' }) => {
  const theme = getButtonTheme(type);
  const sizeClass = BUTTON_SIZES[size];
  
  return (
    <button className={`${theme} ${sizeClass}`}>
      {children}
    </button>
  );
};

export default Button;

// App.js
import Button, { getButtonTheme, BUTTON_SIZES } from './Button.js';

// অথবা শুধু default import
import Button from './Button.js';

// অথবা শুধু named imports
import { getButtonTheme, BUTTON_SIZES } from './Button.js';

// Button.js ফাইলে
export default Button; // ✅ Good

// Button.js ফাইলে
export default MyAwesomeComponent; // ❌ Confusing

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b; // এটা ব্যবহার না হলে bundle এ আসবে না

// app.js
import { add, subtract } from './utils.js'; // শুধু দরকারি functions import

// types.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

export type UserRole = 'admin' | 'user' | 'moderator';

// main service - default export
const UserService = {
  // service methods
};

export default UserService;