crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Modüler Yapının Avantajları
[]Bakım Kolaylığı: Her dosya sadece belirli bir işi yapar (Örneğin: matematik.js, api.js).
[]Tekrar Kullanılabilirlik: Bir dosyada yazdığınız fonksiyonu, projenin on farklı yerinde tekrar tekrar kullanabilirsiniz.- İsim Çakışmalarını Önleme: Her modül kendi kapsamına (scope) sahiptir. Farklı dosyalarda aynı isimli değişkenler birbirini bozmaz.
2. Verileri Dışa Aktarmak (export)
Bir dosyadaki değişkeni veya fonksiyonu başka bir dosyada kullanabilmek için önce onu "dışa açmanız" gerekir. İki ana yöntem vardır:
A. Named Export (İsimlendirilmiş Dışa Aktarım)
Bir dosyadan birden fazla öğeyi dışa aktarmak için kullanılır. Aktarırken verdiğiniz isimle çağırmanız gerekir.
JavaScript:
// dosya: hesapMakinesi.js
export const topla = (a, b) => a + b;
export const cikar = (a, b) => a - b;
export const PI = 3.14;B. Default Export (Varsayılan Dışa Aktarım)
Her dosyada sadece bir tane default export olabilir. Genellikle dosyanın ana amacını temsil eden fonksiyon veya sınıflar için kullanılır.
JavaScript:
// dosya: Kullanici.js
export default function selamla(isim) {
return Merhaba ${isim}!;
}3. Verileri İçe Aktarmak (import)
Dışa aktarılan öğeleri kullanmak için import komutunu kullanırız.
A. Named Import Kullanımı:
Süslü parantez { } içinde, dışa aktarılan isimle çağrılır.
JavaScript:
import { topla, PI } from './hesapMakinesi.js';
console.log(topla(5, 10)); // 15B. Default Import Kullanımı:
Süslü parantez kullanılmaz ve dilediğiniz ismi verebilirsiniz.
JavaScript:
import merhabaDe from './Kullanici.js';
console.log(merhabaDe("Ahmet"));4. Modülleri Tarayıcıda Çalıştırmak
Modül sistemini düz bir HTML dosyasında kullanmak istiyorsanız, <script> etiketine type="module" özelliğini eklemeniz şarttır. Aksi takdirde tarayıcı import komutunu anlamayacaktır.
HTML:
<script type="module" src="app.js"></script>Pratik Bir İpucu: Takma İsim (Alias) Kullanımı
Eğer içe aktardığınız fonksiyonun ismi mevcut dosyanızdaki bir değişkenle çakışıyorsa veya çok uzunsa as anahtar kelimesiyle ismini değiştirebilirsiniz:
JavaScript:
import { topla as toplamaIslemi } from './matematik.js';
console.log(toplamaIslemi(10, 20));Sonuç
Modüller, "Spagetti Kod" dediğimiz karmaşadan kurtulmanın en etkili yoludur. Kodunuzu küçük, yönetilebilir ve test edilebilir parçalara bölmek sizi iyi bir yazılımcıdan profesyonel bir yazılımcıya dönüştüren adımdır. React, Vue veya Node.js gibi modern teknolojilerin tamamı bu temel üzerine kuruludur.