Modüller (import / export) — JavaScript: Başlangıçtan İleri Seviyeye

Modüller, kodu mantıksal parçalara ayırmanı sağlar. Her dosya kendi scope'una sahiptir; sadece dışa aktardığın şeyler görünür.

Named export

// utils.js
export function topla(a, b) {
  return a + b;
}
 
export const PI = 3.14159;
 
export class Logger { ... }

Veya tek seferde:

function topla() { ... }
const PI = 3.14;
 
export { topla, PI };

İçe aktarma:

import { topla, PI } from "./utils.js";
 
topla(2, 3);
console.log(PI);

İsim değiştirme:

import { topla as add } from "./utils.js";

Default export

Bir dosyanın tek bir ana export'u için:

// Logger.js
export default class Logger { ... }

import Logger from "./Logger.js";
// veya istediğin isim:
import Whatever from "./Logger.js";

Default + named bir arada:

// api.js
export default function fetch() { ... }
export const VERSION = "1.0";

import fetch, { VERSION } from "./api.js";

Tüm modülü import

import * as utils from "./utils.js";
 
utils.topla(1, 2);
utils.PI;

Re-export

Bir dosyada başka dosyaların exportlarını birleştirmek:

// index.js (barrel file)
export { topla, carp } from "./math.js";
export { logger } from "./logger.js";
export * from "./helpers.js";

Sonra: import { topla, logger } from "./index.js";

⚠️Dikkat

Barrel file'lar büyük projelerde bundle boyutunu ve build süresini artırabilir. Tree-shaking'in zorlanmaması için aşırıya kaçma.

Default vs named — hangisi?

Named tercih et. Refactor yapması, IDE auto-import'u ve grepping kolay.
Default sadece dosyanın tek ana ihracatı varsa (React component dosyası, vs.).

Dynamic import

Çalışma anında modül yüklemek için:

const { default: Editor } = await import("./Editor.js");
 
// Code-splitting için yaygın
button.onclick = async () => {
  const { showModal } = await import("./modal.js");
  showModal();
};

Sadece gerektiğinde yükleniyor — bundle boyutu küçük kalıyor.

Tarayıcıda kullanım

<script type="module" src="./main.js"></script>

Veya inline:

<script type="module">
  import { topla } from "./utils.js";
  console.log(topla(2, 3));
</script>

type="module" ile:

import/export çalışır
defer otomatik (HTML parse bittikten sonra)
strict mode default

Node.js'te ESM

package.json'a:

{ "type": "module" }

Veya dosyaya .mjs uzantısı ver. Node.js'te ESM içinde dosya yolu zorunludur:

import { topla } from "./utils.js";  // ✅ uzantı şart
import { topla } from "./utils";     // ❌ Node ESM'de çalışmaz

(Bundler/TypeScript ile çalışan projelerde bu kural gevşetilebilir.)

CommonJS (eski)

Node.js'in eski sistemi:

// math.js
function topla(a, b) { return a + b; }
module.exports = { topla };
 
// app.js
const { topla } = require("./math");

Yeni projede ES Modules kullan. CommonJS'i sadece eski Node.js paketleriyle çalışırken görürsün.