Import

Import is a JavaScript statement used to bring in functions, objects, or values from other modules or files into the current scope. It's part of the ES6 module system.

Syntax

javascript
// Named imports
import { useState, useEffect } from 'react'

// Default import
import React from 'react'

// Import all as namespace
import * as utils from './utils'

// Import with alias
import { longFunctionName as fn } from './helpers'

// Side-effect import (runs module code)
import './styles.css'

Default vs Named Exports

Default Export

javascript
// Export
export default function MyComponent() {}

// Import
import MyComponent from './MyComponent'

Named Exports

javascript
// Export
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b

// Import
import { add, subtract } from './math'

Dynamic Imports

javascript
// Load module on demand
const module = await import('./heavy-module.js')

// React lazy loading
const LazyComponent = lazy(() => import('./LazyComponent'))

Benefits

• Code organization and modularity
• Reusability across files
• Better dependency management
• Enables tree shaking for smaller bundles