Jak działają operatory import i export w JavaScript?

Operatory import i export są używane w JavaScript do pracy z modułami, umożliwiając dzielenie kodu na niezależne, wielokrotnie używane części i zarządzanie zależnościami między nimi.

export

Operator export służy do eksportowania zmiennych, funkcji, klas lub innych wartości z modułu. Eksport może być nazwany lub domyślny.

Eksport nazwany:

// module.js
export const myVariable = 10;
export function myFunction() { // ... }
export class MyClass { // ... }

Eksport domyślny: w module może być tylko jeden eksport domyślny.

// module.js
const defaultValue = 'default value';
export default defaultValue;

import

Operator import służy do importowania wartości eksportowanych przez inne moduły.

Import nazwany:

// another-module.js
import { myVariable, myFunction } from './module.js';

Import z inną nazwą:

// another-module.js
import { myVariable as newVariableName } from './module.js';

Importowanie wszystkich nazw eksportowanych jako obiekt:

// another-module.js
import * as moduleAlias from './module.js';
// Dostęp: moduleAlias.myVariable, moduleAlias.myFunction

Importowanie eksportu domyślnego:

// another-module.js
import defaultValueName from './module.js';

Importowanie jednocześnie nazwanego eksportu i eksportu domyślnego:

// another-module.js
import defaultValueName, { myVariable, myFunction } from './module.js';

Zasady działania:

1. Analiza statyczna: Silnik JavaScript analizuje operatory import i export podczas kompilacji (przed wykonaniem kodu), tworząc wykres zależności między modułami.
2. "Żywe" powiązania: Importowane zmienne nie są kopiami wartości z eksportującego modułu. To "żywe" powiązania (żywe odwołania) do zmiennych z oryginalnego modułu. Jeśli wartość zmiennej w module eksportującym się zmieni, ta zmiana będzie widoczna przez zaimportowane powiązanie.
3. Jednorazowe wykonanie: Kod każdego modułu jest wykonywany tylko raz przy pierwszym imporcie tego modułu. Wyniki eksportu są buforowane i używane przy kolejnych importach.
4. Użycie w kontekście: Moduły są wykonywane w własnym kontekście, odizolowanym od globalnego zakresu. Zmienne zadeklarowane na poziomie głównym modułu nie zanieczyszczają przestrzeni globalnej, chyba że są jawnie eksportowane.