Problem Statement
What is the difference between named exports and default exports?
Explanation
A module can have multiple named exports but only one default export.
Named exports use the exact name when importing. They must be imported with curly braces.
Default export can be imported with any name without curly braces.
Named exports are better for exporting multiple items. Default exports are convenient for main module export.
You can mix named and default exports in the same module.
Understanding exports is essential for modular JavaScript development.
Code Solution
SolutionRead Only
// NAMED EXPORTS
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
// Or export all at once
const divide = (a, b) => a / b;
const power = (a, b) => a ** b;
export {divide, power};
// Importing named exports (must use exact names)
import {add, subtract} from './math.js';
import {add as addition} from './math.js'; // Rename
// Import all named exports
import * as math from './math.js';
console.log(math.add(1, 2));
// DEFAULT EXPORT
// user.js
class User {
constructor(name) {
this.name = name;
}
}
export default User;
// Or inline
export default class User {
constructor(name) {
this.name = name;
}
}
// Function default export
export default function greet(name) {
return `Hello ${name}`;
}
// Importing default export (any name)
import User from './user.js';
import MyUser from './user.js'; // Can rename
import greetFunction from './greet.js';
// MIXING BOTH
// utils.js
export const PI = 3.14159;
export function square(x) {
return x * x;
}
class Calculator {
// Main export
}
export default Calculator;
// Importing mixed exports
import Calculator, {PI, square} from './utils.js';
// Default first, then named in {}
// EXPORT PATTERNS
// Re-exporting
// index.js
export {default as User} from './User.js';
export {add, subtract} from './math.js';
export * from './helpers.js';
// Aggregating exports
// api/index.js
export {fetchUsers} from './users.js';
export {fetchPosts} from './posts.js';
export {fetchComments} from './comments.js';
// Now can import all from one place
import {fetchUsers, fetchPosts} from './api/index.js';
// PRACTICAL EXAMPLES
// constants.js
export const API_URL = 'https://api.example.com';
export const TIMEOUT = 5000;
export const MAX_RETRIES = 3;
// config.js
const config = {
apiUrl: 'https://api.example.com',
timeout: 5000
};
export default config;
// Multiple utilities
// utils.js
export const formatDate = (date) => {
return date.toLocaleDateString();
};
export const formatCurrency = (amount) => {
return `$${amount.toFixed(2)}`;
};
export const capitalize = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
// Main class with helpers
// Database.js
export class Database {
connect() {}
}
export const query = (sql) => {};
export const close = () => {};
// Or
class Database {
connect() {}
}
const query = (sql) => {};
const close = () => {};
export default Database;
export {query, close};
// IMPORT PATTERNS
// Selective import
import {add, subtract} from './math.js';
// Import all as namespace
import * as Math from './math.js';
Math.add(1, 2);
// Dynamic import (async)
const module = await import('./heavy-module.js');
module.default();
// Conditional import
if (condition) {
const {feature} = await import('./feature.js');
feature();
}
// BEST PRACTICES
// Prefer named exports for utilities
export const helper1 = () => {};
export const helper2 = () => {};
// Use default for main class/component
export default class Component {}
// Avoid mixing too much
// Either many named exports OR one default
// Not both unless necessary