“Kodlarını Böl, Mutluluğunu Çoğalt” – Ultra Gelişmiş, Eğlenceli, Aşırı Öğretici Sürüm

(Bu yazıda gereksiz dram yoktur. Fazla JavaScript vardır.)

💥 Giriş:

“JavaScript’in Dağınıklığını Toplayan Süper Kahraman: Modüller”

JavaScript bazen o kadar dağınıktır ki…
Kod yazarken kendini 50 sekmeli tarayıcı, 38 dosyalık proje, mentalde sürekli dönen ‘bu fonksiyon neredeydi?’ hissi ile baş başa bulursun.

Derken bir mucize olur.

Bir ses gelir:

✨ “Kodlarını modüllere ayıralım mı?”

Bu ses önce ürkütücü gelir… Ama sonra bir bakarsın, hayatını kurtarmış.
Kodu parçalara bölmek hem düzen getirir hem profesyonellik katarsın hem de bizim ilişkimize benzer şekilde her şey daha akıcı olur aşkımmm 😄💛

🧠 1) Modül Nedir?

“Her dosya kendi işini bilsin, kavgasız gürültüsüz yaşayın.”

Modül, kodunu küçük, yönetilebilir, tekrar kullanılabilir parçalar halinde bölmektir.

Bu tıpkı:

• Bir dolabı düzenlemek
• Bir mandalina soymak
• Hayatı bölümlere ayırıp daha sağlıklı hale getirmek
• Eski sevgilileri ‘arşiv’e atmak

gibi işlerdir.

➤ Neden modül kullanırsın?

Çünkü modüller sayesinde:

• Kodun temiz olur
• Bir dosyada başlayan drama başka dosyaya sıçramaz
• Bir bug olduğunda “kimin suçu?” sorusu kolaylaşır
• Kodu Google’a değil, kendine yazıyormuş gibi hissedersin
• Profesyonelliğin +20 artar

➤ Basit bir modül örneği:

// mesaj.js
export const hello = "Merhaba dünya!";

// app.js
import { hello } from './mesaj.js';
console.log(hello);

Dünyanın en küçük modülü bile organizasyon sağlar.

🚚 2) Export Nedir?

“Bu fonksiyonu dışarı gönderiyorum, alışırsınız.”

Bir dosyada yazdığın fonksiyonun başka bir dosyada da kullanılmasını istiyorsan export yaparsın.

İki çeşit export vardır:

• Named export
• Default export

✔ Named export örneği:

// hesap.js
export function topla(a, b) {
  return a + b;
}

export function carp(a, b) {
  return a * b;
}

export const sabitSayi = 42;

✔ Pratik ipucu:

• Bir dosyada birden fazla şey varsa named export kullan 👍
• Tutarlı bir isimlendirme yap, sonra “ben bu fonksiyona ne demiştim?” stresi azalır

📥 3) Import Nedir?

“Başka dosyadan fonksiyon almak demek, kapı çalıp içeri girmek gibi.”

Import kullanırken:

import { topla, carp, sabitSayi } from './hesap.js';

✔ İleri seviye ipucu:

İsimleri değiştirebilirsin:

import { topla as ekle, carp as multiply } from './hesap.js';

Bu özellikle:

• aynı isimde fonksiyonların çarpıştığı projelerde
• daha semantik fonksiyon isimleri istediğinde

muhteşem bir numaradır.

⭐ 4) Default Export: Dosyanın Megastar’ı

Her dosyada bir ana fonksiyon/ana sınıf/ana değer varsa default export kullanılır.

✔ Örnek:

// selam.js
export default function selamVer() {
  console.log("Selam! Ben default exportum.");
}

✔ Çekerken:

import selam from './selam.js';
selam();

🎤 Default export’un imtiyazları:

• İstediğin ismi verebilirsin
• Dosyanın “ana içeriği” olduğunu anlatır
• Büyük projelerde okunabilirliği artırır

🧩 5) Modüllerle Dosya Organizasyonu

“Dağınıklığa savaş açıyoruz, askerleriniz hazır!”

Büyük bir projede alanlara göre dosyaları ayırmak en iyi ivme sağlar.

Örnek bir projeyi düşün:

/src
  /utils
    zaman.js
    format.js
  /api
    getUser.js
    sendData.js
  app.js

Bu örnekte:

• utils → yardımcı fonksiyonlar
• api → sunucuyla konuşan fonksiyonlar
• app.js → uygulamanın beyni

🔧 6) Modüllerde En Çok Yapılan Hatalar ve Çözümleri

❌ 1) “Extension” unutmak

Doğru:

import { topla } from "./math.js";

Yanlış:

import { topla } from "./math";

❌ 2) Dosya yolu travması

3 klasör yukarı çıkma:

import { data } from "../../../utils/data.js";

✔ Pratik ipucu:

Aliases (Vite, Webpack, Next.js’te var):

import { data } from "@/utils/data.js";

Dünyayı güzelleştirir.

💡 7) Gerçek Dünyada Modülleri Böyle Kullanacaksın

Mini uygulama: Hesap + Format + Log sistemi

✔ 1) hesap.js

export function topla(a, b) {
  return a + b;
}

export function bol(a, b) {
  if (b === 0) throw new Error("0'a bölme aşkımmm olmaz 😄");
  return a / b;
}

✔ 2) format.js

export function formatSayi(n) {
  return new Intl.NumberFormat('tr-TR').format(n);
}

✔ 3) log.js

export default function log(mesaj) {
  console.log("📢 LOG:", mesaj);
}

✔ 4) app.js

import { topla, bol } from './hesap.js';
import { formatSayi } from './format.js';
import log from './log.js';

const sonuc = topla(40, 2);
log("Toplam sonucunuz: " + formatSayi(sonuc));

const oran = bol(100, 4);
log("Oran: " + formatSayi(oran));

✔ Çalışınca:

📢 LOG: Toplam sonucunuz: 42
📢 LOG: Oran: 25

İşte gerçek bir modüler mini uygulama!
Temiz, düzenli, profesyonel, aşk gibi akıcı 😄💛

🛠️ 8) Modüllerle İlgili Sıradışı Pratik İpuçları

💡 1) “Helper Hell” oluşturma

Her şeyi helper dosyasına atma.
Sonra hiçbir şey bulunamaz.

💡 2) Tek dosyada 200 fonksiyon tutma

O dosya seni terk eder.

💡 3) Export’ları alfabetik sıraya diz

Projeye giren seni “bu kız/kardeş/bey çok iyi ya” diye düşünür.

💡 4) Import sıralaması

Her zaman şu sırayla:

1. Üçüncü parti paketler (React, Lodash…)
2. Proje içi modüller
3. Aynı klasör içi modüller

Profesyonellik = ✨ +10

💡 5) Büyük projelerde index.js kullan

Daha temiz importlar yaparsın.

✨ Kapanış

JavaScript Modülleri = Kodun için terapi seansı

Modüller:

• Stresi azaltır
• Debug süresini yarıya indirir
• Kodun düzenini artırır
• Profesyonel görünmeni sağlar
• Yeniden kullanım sağlar
• Ve en güzeli: kodu daha az küfürle yazmanı sağlar 😄💛