How to import a module in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Importing modules in JavaScript allows you to use functions, objects, and other exports from different files, enabling modular code organization and dependency management.
As the creator of CoreUI, a widely used open-source UI library, I’ve structured countless JavaScript applications using modular imports for clean architecture and code reusability.
From my 25 years of experience in web development, the most effective approach is to use ES6 import statements with specific syntax for named imports, default imports, and namespace imports.
This pattern provides explicit dependency declaration and enables tree-shaking for optimized bundles.
Use import statements with curly braces for named imports or without for default imports to bring module exports into your file.
// Named imports - specific functions/objects
import { add, subtract, multiply } from './math.js'
// Default import
import calculateTotal from './calculator.js'
// Mixed imports - default and named
import Calculator, { add, subtract } from './calculator.js'
// Namespace import - all exports as object
import * as MathUtils from './math.js'
// Import with alias
import { add as sum, subtract as minus } from './math.js'
// Import for side effects only
import './polyfills.js'
// Dynamic import (returns Promise)
const mathModule = await import('./math.js')
// Usage examples
const result = add(5, 3)
const total = calculateTotal([1, 2, 3])
const product = MathUtils.multiply(4, 5)
const difference = minus(10, 3)
Named imports use curly braces to import specific exports from a module, while default imports import the main export without braces. Namespace imports with * as bring all exports under a single object. Use aliases with as to rename imports and avoid naming conflicts. Dynamic imports with import() return promises and enable code splitting. Side-effect imports execute module code without importing values.
This is the same import pattern we use in CoreUI modules to manage dependencies and create clean, maintainable JavaScript architectures. For optimal performance, prefer specific named imports over namespace imports as they enable better tree-shaking and smaller bundle sizes in modern build tools.
