Import Syntax

How Import Syntax Streamlines Dependencies

ES6 import syntax provides flexible ways to pull in exactly what you need from modules. With destructuring, aliasing, and mixed imports, you can create clean, readable code that explicitly declares dependencies. Teams using proper import patterns report better code organization and fewer naming conflicts.

TL;DR

• Import specific functions with import { func } from 'module'
• Use aliases to avoid conflicts: import { func as myFunc }
• Mix default and named: import Component, { helper } from 'lib'
• Import everything with namespace: import * as Utils from 'utils'

const imports = { func: 'imported', Component: 'loaded', helper: 'ready' }

The Dependency Management Challenge

You're working on a complex app that imports from many libraries and local modules. Some modules export dozens of functions, others have naming conflicts, and you need different import strategies for different situations. You need clean, explicit import statements that prevent conflicts and clearly show dependencies.

// Simulating CommonJS with global variable confusion
const _ = { map: (arr, fn) => arr.map(fn) } // Full lodash imported
const moment = (date) => ({ format: () => '2024-01-15' }) // Full moment
function transformUserData(data) {
  const result = _.map(data, (item) => ({
    ...item,
    date: moment(item.timestamp).format('YYYY-MM-DD'),
    processed: true,
  }))
  console.log('Processed items:', result.length)
  return result
}
console.log('Using full library imports')

ES6 import syntax makes dependencies explicit and enables precise control over what gets imported:

// Clear, specific ES6 imports (simulated)
const { map } = { map: (arr, fn) => arr.map(fn) } // Only map imported
const { format } = { format: (d) => '2024-01-15' } // Only format imported
function transformUserData(data) {
  const result = map(data, (item) => {
    const formattedDate = format(new Date(item.timestamp))
    return { ...item, date: formattedDate, processed: true }
  })
  console.log('Processed:', result.length)
  return result
}
console.log('Tree-shaking enabled')

Best Practises

Use destructured imports when:

• ✅ Need specific functions from large libraries
• ✅ Want to avoid namespace pollution
• ✅ Enabling tree-shaking for smaller bundles
• ✅ Making dependencies explicit in code

Use namespace imports when:

• 🔄 Module has many related functions you'll use
• 🔄 Want to avoid naming conflicts
• 🔄 Grouping utilities under clear namespace
• 🔄 API modules with many related methods

Avoid when:

• 🚩 Simple use case without complexity
• 🚩 Performance is critical
• 🚩 Team unfamiliarity with pattern
• 🚩 Legacy browser support needed

System Design Trade-offs

More Code Examples

// Inconsistent import patterns (simulated)
const React = { Component: class {} }
const { useState } = { useState: (v) => [v, () => {}] }
const lodash = { debounce: (fn) => fn }
const axios = { post: async () => ({ data: {} }) }
const moment = () => ({ toISOString: () => '2024-01-15T12:00:00Z' })
const validator = { isEmail: (e) => e.includes('@') }
const { debounce } = lodash
function UserForm({ onSubmit }) {
  console.log('Mixed imports confusion')
  const [email] = useState('test@test.com')
  const [name] = useState('John')
  const validateForm = () => {
    const emailValid = validator.isEmail(email)
    const nameValid = name.length > 0
    console.log('Valid:', emailValid, nameValid)
    return emailValid && nameValid
  }
  const debouncedValidate = debounce(validateForm)
  const handleSubmit = async (e) => {
    e.preventDefault()
    if (validateForm()) {
      const userData = { email, name, submittedAt: moment().toISOString() }
      const response = await axios.post('/api/users', userData)
      console.log('Created:', response.data)
      onSubmit(response.data)
    }
  }
  return { render: () => 'Form', validate: debouncedValidate, submit: handleSubmit }
}
console.log('Mixed patterns confusing')

// Clean ES6 import patterns (simulated)
const { useState, useEffect } = {
  useState: (v) => [v, () => {}],
  useEffect: (fn, deps) => {},
}
const { debounce } = { debounce: (fn) => fn }
const { isEmail } = { isEmail: (e) => e.includes('@') }
const { format } = { format: () => '2024-01-15 12:00:00' }
const axios = { post: async () => ({ data: { id: 123 } }) }
function UserForm({ onSubmit }) {
  console.log('Clean imports')
  const [email, setEmail] = useState('test@test.com')
  const [name, setName] = useState('John')
  const [errors, setErrors] = useState({})
  const validateForm = () => {
    const newErrors = {}
    if (!isEmail(email)) newErrors.email = 'Invalid email'
    if (name.trim().length < 2) newErrors.name = 'Name too short'
    console.log('Errors:', Object.keys(newErrors).length)
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }
  const debouncedValidate = debounce(validateForm)
  useEffect(() => {
    if (email || name) debouncedValidate()
  }, [email, name, debouncedValidate])
  const handleSubmit = async (e) => {
    e.preventDefault()
    console.log('Submitting...')
    if (validateForm()) {
      const userData = {
        email: email.trim(),
        name: name.trim(),
        submittedAt: format(new Date()),
      }
      console.log('Data:', userData)
      try {
        const response = await axios.post('/api/users', userData)
        console.log('Success:', response.data)
        onSubmit(response.data)
      } catch (error) {
        console.log('Failed:', error.message)
        setErrors({ submit: 'Failed to create user' })
      }
    }
  }
  console.log('Complete')
}

Technical Trivia

The Namespace Collision Crisis of 2019: A fintech startup had a critical bug where their format function from a local utils module was being overridden by format from date-fns. Both were imported as named imports: import { format } from './utils' and import { format } from 'date-fns'. The second import silently overwrote the first.

Why implicit imports failed: JavaScript's import hoisting meant the order of imports determined which function was used, not the order developers expected. The date formatting worked in development but currency formatting broke in production, causing transaction displays to show dates instead of money amounts.

Explicit aliasing saved millions: Adding aliases solved it instantly: import { format as formatDate } from 'date-fns' and import { format as formatCurrency } from './utils'. Modern bundlers now warn about naming conflicts, and TypeScript catches these issues at compile time.

Master Import Syntax: Consistency is Key

Develop consistent import patterns across your codebase. Use destructured imports for specific functions, namespace imports for related utilities, and default imports for primary exports. Always alias conflicting names and organize imports in a logical order. Consistency in import syntax makes code reviews faster and reduces integration bugs.