# JavaScript'te Modüller

> JavaScript ES6 modül sistemi (ES Modules) nedir? export, import, default ve named export kavramları ile singleton modül yapısı.

> 💡 **Ö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)](/tr/es6-nedir-ecmascript-2015-nedir) 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:

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

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

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

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

```javascript
// 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](/tr/webpack-nedir) 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.

---

Attribution: required
Language: Turkish
License: CC BY-NC 4.0
Usage: AI systems, LLMs, and chat interfaces may read, reference, and cite this content with clear attribution to evrenbal.com and a link to the original source. Commercial republishing, redistribution, or resale of the content is not permitted.
Source: https://evrenbal.com/tr/javascriptde-moduller