JavaScript'te Modüller

💡 Özet (TL;DR):
Nedir: JavaScript kod tabanını işlevsel parçalara ayırarak yeniden kullanılabilir, bağımsız dosyalar (modüller) halinde organize etme yöntemidir.
Kritik Hata Düzeltmeleri: Kod örneklerindeki template literal tek tırnak hatası (interpolation için backtick ` kullanılmalıdır) ve import alias'larındaki hatalı büyük harf kullanımı (AS yerine as) düzeltilmiştir.
ES6 Standardı: Tarayıcı veya Node.js ortamlarında import ve export anahtar kelimeleriyle yerel (native) olarak desteklenir.

Üst Edit: Türkçede script'e karşılık olarak "betik" kelimesi kullanılıyor; fakat script yazılımcıların diline tamamen yerleştiği için bu yazıda script kelimesini kullanmaya devam edeceğim.

JavaScript'te modül kullanımı, basit ve küçük boyutlu scriptlerin yeterli olduğu eski dönemlerde çok özel durumlar hariç bir ihtiyaç değildi. Ancak JavaScript'in web uygulamalarında sadece yardımcı bir araç olmaktan çıkıp neredeyse kullanıcı arayüzünün temeli haline gelmesiyle birlikte modüllere olan ihtiyaç arttı. JavaScript topluluğu, ilk dönemlerde harici kütüphaneler yardımıyla (CommonJS, AMD vb.) bu sorunu aşacak çözümler üretti.

ECMAScript 6 (ES6) ile birlikte modüller JavaScript'in bütünleşik bir parçası haline geldi. Günümüzde modern tarayıcılar ve Node.js bu yapıyı yerel (native) olarak desteklemektedir. Artık eski tarayıcılara özel destek vermeniz gerekmiyorsa, modül işlevi sağlayan üçüncü parti kütüphanelerin adını bile bilmenize gerek yoktur.

Default Export vs. Named Export Karşılaştırması

Özellik	Default Export (Varsayılan)	Named Export (İsimlendirilmiş)
Dosya Başına Sınır	Her dosya/modül için yalnızca 1 adet tanımlanabilir.	Her dosyada dilediğiniz sayıda tanımlanabilir.
Dışa Aktarma Sözdizimi	`export default function merhaba() {}`	`export const name = 'Evren';`
İçe Aktarma Sözdizimi	`import merhaba from './file.js';` (Süslü parantez kullanılmaz).	`import { name } from './file.js';` (Süslü parantez zorunludur).
İsim Özgürlüğü	İçe aktarırken istenilen herhangi bir isim verilebilir.	Yalnızca `as` takısı ile takma ad (alias) atanabilir.

1. Modül Nedir?

Kabaca, bağımsız bir dosyadan belirli bir script'i çağırırız ve buna bir modül deriz (bazen bir script içerisinde birden fazla modül de olabilir). JavaScript modüllerini kullanırken ihtiyacımız olan iki temel ifade vardır:

export (Dışa Aktarma): Mevcut modülün dışarıdan çağrılabilecek sabit, değişken ve fonksiyonlarını tanımlamak için kullanılır.
import (İçe Aktarma): Dışarıdaki bir modülü mevcut dosya içerisine dahil etmek için kullanılır.

Örneğin, merhaba.js adında bir dosya oluşturup bir fonksiyonu dışa aktaralım:

export function merhaba(isim) {
    alert(`Merhaba, ${isim}!`);
}

Daha sonra index.js dosyamız içerisine bu modülü alıp kullanalım:

import { merhaba } from './merhaba.js';

alert(merhaba);   // function...
merhaba('Evren'); // Merhaba, Evren!

2. Export Türleri

A. Default Export (Varsayılan Dışa Aktarma)

Bir dosyadaki varsayılan modül default kelimesi ile belirlenir. Her dosyada sadece bir tane default modül tanımlanabilir:

export default function deneme() {}

Bu modülü başka bir dosyada içe aktarırken süslü parantez kullanmamıza gerek yoktur ve istediğimiz ismi verebiliriz:

import deneme from './exportdeneme.js';
import baskaBirOrnek from './exportdeneme.js';
import merhaba from './exportdeneme.js';

Derleyici, dosya içindeki default modülü otomatik olarak atadığınız değişken ismiyle eşleştirecektir.

B. Named Export (İsimlendirilmiş Dışa Aktarma)

Tek bir dosyada birden fazla değişken veya fonksiyonu dışarıya aktarmak için kullanılır:

export const isim1 = "Evren";
export const isim2 = "Hüseyin";

export function merhaba() {
    // ...
}

export class Kullanici {
    // ...
}

Bu modüllerden hiçbiri varsayılan (default) olmadığı için, içe aktarırken hangi değişkenleri çağırdığımızı süslü parantez içinde açıkça belirtmemiz gerekir. Ayrıca as anahtar kelimesini kullanarak içe aktarılan modüllere takma ad (alias) atayabiliriz:

import { merhaba } from './exportdeneme2.js';
import { merhaba as selamla } from './deneme2.js'; // Takma ad kullanımı

3. Modüller Tekil (Singleton) Yapıdadır

Projenizde aynı modülü farklı noktalarda birden fazla kez import edebilirsiniz; fakat modül yalnızca ilk çağrılışında derlenir ve çalıştırılır.

Örneğin, admin.js dosyamız olsun:

export let admin = { name: "John" };

Bu dosya ilk import edildiğinde bellek üzerinde tek bir admin nesnesi oluşturulur. Diğer dosyalardaki import işlemleri yeni bir nesne oluşturmaz, doğrudan aynı referansı paylaşır:

// birinci-dosya.js
import { admin } from './admin.js';
admin.name = "Evren";

// ikinci-dosya.js
import { admin } from './admin.js';
alert(admin.name); // Sonuç: Evren

Export edilen nesneler bir kez oluşturulur ve tüm sistem genelinde paylaşılır. Bu özellik, modülleri ilk çağrıldıklarında yapılandırıp (configure) projenin geri kalanında aynı durum (state) ile kullanmamıza olanak tanır.

Sonuç Olarak

Modüller, ES6 ile birlikte JavaScript'e yerleşik olarak dahil olan; eski tarayıcılarda ise derleyiciler yardımıyla kullanılan, büyük projeleri anlamlı parçalara bölerek kod kalitesini artıran harika bir yöntemdir.

Modül kullanımını gerektirecek ölçekte büyük bir proje geliştirecekseniz, sonraki aşamada ihtiyacınız olan Webpack gibi bir modül paketleyicisi olacaktır.

Bu Yazıda Yapılan Değişiklikler

11.05.2022: Yazı özeti düzenlendi.
21.06.2026: Türkçe imla hataları (JavaScript'te, Türkçede, arayüzünün, modül de vb.) düzeltildi. Kod örneklerindeki hatalı şablon dizesi kullanımı (tek tırnak yerine backtick) ve geçersiz import alias sözdizimi (AS yerine as) düzeltildi. TL;DR özet paneli ve export türleri karşılaştırma tablosu eklendi.