Modüller ve İçe Aktarmalar
Modüller ve İçe Aktarmalar (Modules and Imports) JavaScript’te kodun düzenli, yeniden kullanılabilir ve yönetilebilir olmasını sağlayan temel araçlardır. Modüller, belirli bir işlevi kapsayan bağımsız dosyalardır ve export anahtar kelimesi ile diğer dosyalara sunulabilir. İçe aktarmalar (import) sayesinde bu modüller ihtiyaç duyulan yerlerde kullanılabilir. Bunu, bir evi inşa etmeye benzetebiliriz (like building a house); her oda belirli bir işlevi yerine getirir, ancak tüm odalar bir araya gelerek evin bütününü oluşturur.
Kişisel web sitelerinde, modüller sayfa animasyonlarını, galeri fonksiyonlarını ve form işlemlerini ayrı dosyalarda organize edebilir. Blog sitelerinde, yazı yayınlama, yorum yönetimi ve bildirim işlevleri modüllerle ayrılabilir. E-ticaret sitelerinde, ürün katalogları, sepet işlemleri ve ödeme süreçleri modüllerle yönetilir. Haber sitelerinde ise haber akışı, yorumlar ve etkileşimli widgetlar modüller aracılığıyla organize edilir.
Bu eğitimde, fonksiyonları (functions), değişkenleri (variables) ve sınıfları (classes) bir dosyadan export edip diğer dosyada import etmeyi öğreneceksiniz. Bu, bir mektup yazmaya benzer (writing a letter), her bilgi parçasının doğru yere ve doğru zamanda ulaşmasını sağlar. Modüler yapı, kod tekrarını azaltır, verimliliği artırır ve ekip çalışmasını kolaylaştırır.
Temel Örnek
javascript// file: mathUtils.js - reusable math functions
export function topla(a, b) {
return a + b; // addition
}
export function cikar(a, b) {
return a - b; // subtraction
}
// file: main.js - importing functions
import { topla, cikar } from './mathUtils.js';
console.log(topla(10, 5)); // 15
console.log(cikar(10, 5)); // 5Bu örnekte mathUtils.js dosyasında iki fonksiyon tanımlanmıştır: topla ve cikar. export ile bu fonksiyonlar dışa açılır, böylece diğer dosyalar tarafından kullanılabilir hale gelir. Bu, bir odadaki araçların ihtiyaç duyulduğunda kullanılabilmesine benzer (decorating a room).
main.js’de, import { topla, cikar } kullanılarak belirli fonksiyonlar içe aktarılır. Bu yöntem, yalnızca gerekli kodun yüklenmesini sağlar ve performansı artırır. Named exports (isimli exportlar) sayesinde sadece ihtiyacımız olan fonksiyonları alırız. Bu yapı, sorumlulukların ayrılmasını (Separation of Concerns) kolaylaştırır ve test, bakım ve ekip çalışmasını destekler. Yeni başlayanlar için süslü parantezlerin kullanımı önemli: hangi elemanların import edileceğini belirtir.
Pratik Örnek
javascript// file: api.js - news API handling
export async function haberleriGetir() {
const response = await fetch('[https://api.news.com/latest](https://api.news.com/latest)');
return response.json(); // latest news
}
export async function yorumlariGetir(haberId) {
const response = await fetch(`https://api.news.com/comments/${haberId}`);
return response.json(); // comments for the news
}
// file: app.js - importing API functions
import { haberleriGetir, yorumlariGetir } from './api.js';
async function haberleriGoster() {
const haberler = await haberleriGetir();
console.log('Haberler:', haberler);
const yorumlar = await yorumlariGetir(haberler\[0].id);
console.log('Yorumlar:', yorumlar);
}
haberleriGoster();Bu pratik örnekte, api.js dosyası asenkron fonksiyonlar (async) tanımlar ve haber API’si ile iletişim kurar. async/await, uzun süren işlemlerin sayfa akışını engellemeden yürütülmesini sağlar.
app.js dosyasında, import edilen fonksiyonlar kullanılarak haberler ve yorumlar gösterilir. Bu yapı, kodun veri çekme kısmını ve gösterim kısmını ayırır, tıpkı bir kütüphaneyi düzenlemek gibi (organizing library). Modüller, hata izolasyonu sağlar, performansı artırır ve kodun yeniden kullanımını kolaylaştırır. İçe aktarma sırasında sadece gerekli modüllerin seçilmesi, gereksiz yükleri ve hataları azaltır.
En iyi uygulamalar ve yaygın hatalar:
En iyi uygulamalar:
- ES6 export/import sözdizimini kullanmak, uyumluluk ve modern yapı sağlar.
- Modülleri işlevselliğine göre ayırmak, bakım ve ölçeklenebilirlik kolaylığı sunar.
- Asenkron işlemlerde try/catch veya uygun hata yönetimi kullanmak.
-
Sadece gerekli olan modülleri import etmek, performansı artırır (tree-shaking).
Yaygın hatalar: -
Event listener veya interval temizlememek, bellek sızıntısına yol açar.
- Yanlış veya tekrar eden event yönetimi, hatalı davranışlara neden olur.
- Import edilen modüllerdeki hataları göz ardı etmek, beklenmeyen sonuçlar üretir.
- Modül isim çatışmaları, fonksiyon veya değişkenlerin üzerine yazılmasına yol açar.
Hata ayıklama ipuçları:
- ESLint ile sözdizimi ve kuralları kontrol edin.
- Modülleri izole şekilde test edin.
- DevTools ile bellek ve ağ kullanımını izleyin.
- Asenkron akışı console.log veya breakpoint ile takip edin.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| export | Fonksiyon, değişken veya sınıfı modülden dışa aktarır | export const fiyat = 100; |
| import | Başka modülden fonksiyon, değişken veya sınıfı içe aktarır | import { fiyat } from './urun.js'; |
| default export | Modülün ana exportunu belirler | export default function hesapla() {} |
| named export | Modülde birden fazla isimli export sağlar | export function topla() {}; export function cikar() {}; |
| async/await | Modüllerde asenkron işlemleri yönetir | export async function veriGetir() { const res = await fetch(url); return res.json(); } |
Özet ve sonraki adımlar:
Bu eğitimde Modüller ve İçe Aktarmaların nasıl çalıştığını ve pratik kullanımını öğrendiniz. Modüler yapı, kodun sürdürülebilirliğini, yeniden kullanılabilirliğini ve performansını artırır. Fonksiyonları farklı dosyalarda ayırmak, projeleri daha okunabilir ve yönetilebilir kılar.
Sonraki adımlar olarak, dynamic imports ile modülleri talep üzerine yüklemeyi ve büyük projelerde Webpack veya Vite gibi bundler’larla entegrasyonu öğrenebilirsiniz. Kişisel web siteleri, bloglar, e-ticaret ve haber sitelerinde modüler yapıyı uygulayarak becerilerinizi pekiştirebilirsiniz. Mevcut projeleri modüler prensiplere göre refactor etmek de profesyonel yetkinliğinizi artırır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek