Как импортировать и экспортировать модули в JavaScript?

В современном JavaScript (особенно начиная с ES6) поддержка модулей позволяет разработчикам разбивать код на более мелкие и управляемые файлы. Это значительно улучшает организацию и читаемость кода. Во многих случаях мы используем import для подключения модулей и export для их экспорта.

Экспорт модулей

Существует два основных способа экспорта: именованный экспорт и экспорт по умолчанию.

1. Именованный экспорт

При именованном экспорте вы можете экспортировать несколько значений из одного модуля.

// myModule.js
export const myVariable = 42;

export function myFunction() {
    console.log('Hello from myFunction!');
}

2. Экспорт по умолчанию

Экспорт по умолчанию позволяет экспортировать одно значение из модуля, которое может быть импортировано без фигурных скобок.

// myDefaultModule.js
const myDefaultFunction = () => {
    console.log('This is the default function!');
};

export default myDefaultFunction;

Импорт модулей

Импорт модулей осуществляется при помощи ключевого слова import.

1. Импорт именованных экспортов

При импорте именованных экспортов вы должны использовать фигурные скобки и точно указывать имя из экспортируемого модуля.

// main.js
import { myVariable, myFunction } from './myModule.js';

console.log(myVariable); // 42
myFunction(); // Hello from myFunction!

2. Импорт по умолчанию

Импорт по умолчанию не требует фигурных скобок. Вы можете назначить импорту любое имя.

// main.js
import myDefaultFunction from './myDefaultModule.js';

myDefaultFunction(); // This is the default function!

Совместный импорт

Вы также можете импортировать и именованные экспорты вместе с экспортом по умолчанию.

// myModule.js
export const myVariable = 42;

const myDefaultFunction = () => {
    console.log('This is the default function!');
};

export default myDefaultFunction;

// main.js
import myDefaultFunction, { myVariable } from './myModule.js';

console.log(myVariable); // 42
myDefaultFunction(); // This is the default function!

Заключение

Использование модулей помогает улучшить структуру вашего кода, делая его более читаемым и поддерживаемым. Вы можете создавать отдельные файлы для различных частей вашей программы и легко их импортировать, когда это необходимо. Понимание механизма импорта и экспорта модуля – это важный шаг в становлении компетентного фронтенд-разработчика.