9  Imports

Since you’re already familiar with Python’s import system, I’ll explain JavaScript’s import mechanisms by drawing parallels while highlighting the key differences. This should make the transition more intuitive for you.

9.1 Comparing to Python’s Import System

Since you’re familiar with Python, here’s how it compares:

Python	Node.js CommonJS
import numpy as np	const np = require('numpy')
from math import sqrt	const { sqrt } = require('math')
import my_module	const myModule = require('./my_module')

The key difference is that Python imports are handled at compile time, while Node.js require() is a function call that happens at runtime.

9.2 Modern JavaScript Import System (ES Modules)

Modern JavaScript has an import system that’s conceptually similar to Python’s, but with some syntax differences:

// Importing an entire module
import * as math from './math.js';

// Importing specific exports
import { sum, multiply } from './math.js';

// Importing with a default export
import Calculator from './calculator.js';

// Combining default and named imports
import Calculator, { sum, multiply } from './calculator.js';

9.2.1 Local Module Imports

Unlike Python, JavaScript requires file extensions in import paths:

// Python
# from math_utils import calculate_area

// JavaScript - note the .js extension is required
import { calculateArea } from './math_utils.js';

The paths are also different: - ./ means “current directory” - ../ means “parent directory”

// From a file in the same directory
import { helper } from './helper.js';

// From a parent directory
import { utils } from '../utils.js';

// From a nested directory
import { component } from './components/button.js';

9.2.2 External Dependencies (NPM Packages)

For external libraries (similar to Python’s pip packages), JavaScript uses npm packages that you can import without file paths:

// No ./ needed for npm packages
import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';

Before you can import these, you need to install them using npm:

npm install react axios

This is similar to pip install in Python, and creates a package.json file that tracks your dependencies.

9.3 Traditional JavaScript Import Systems

9.3.1 CommonJS (Node.js)

If you’re working with Node.js, you might encounter the older CommonJS format:

// Importing in CommonJS
const math = require('./math.js');
const { sum, multiply } = require('./math.js');

// Exporting in CommonJS
module.exports = {
  sum,
  multiply
};

9.3.2 Script Tags (Browser)

The traditional browser way before ES Modules:

<!-- Loading external library -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<!-- Loading your local code -->
<script src="./script.js"></script>

9.4 Exporting in JavaScript

For imports to work, you need to export from the source files:

// Named exports
export function sum(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// Default export (only one per file)
export default class Calculator {
  // Implementation
}

9.5 Practical Comparison with Python

Python	JavaScript (ES Modules)
import numpy as np	import * as math from './math.js'
from math import sqrt, pow	import { sqrt, pow } from './math.js'
from module import *	import * as module from './module.js'

9.6 Key Differences from Python

1. File extensions: JavaScript requires .js extensions in import paths
2. Path notation: Uses ./ for current directory
3. Package installation: Uses npm instead of pip
4. Module system variety: Has multiple systems (ES Modules, CommonJS, script tags)
5. Default exports: Has a special “default” export concept not in Python
6. Asynchronous imports: Supports dynamic imports with import() function

9.7 Setting Up a JavaScript Project

To get started with JavaScript modules:

1. Create a package.json file (similar to Python’s requirements.txt but more powerful):

   npm init -y

2. Add a "type": "module" field to enable ES modules:

   {
     "name": "my-project",
     "type": "module",
     "version": "1.0.0"
   }

3. Install dependencies:

   npm install lodash axios

4. Create your files with imports and exports:

   // utils.js
   export function formatDate(date) {
     return date.toISOString().split('T')[0];
   }
   
   // main.js
   import { formatDate } from './utils.js';
   console.log(formatDate(new Date()));