JavaScript'de Module Yapısını Anlama

JavaScript programlama dilinde, kodu organize etmek ve yeniden kullanabilirliği artırmak için modül yapısını kullanabiliriz. Eğer her şeyi bir dosyada tutarsak, işler karmaşık ve yönetilmesi zor hale gelebilir. Bu yazıda, JavaScript'te modül yapısını ve bunu nasıl etkili bir şekilde kullanabileceğinizi detaylı bir şekilde anlatacağım.

Ne İşe Yarar?

  • Kodunuzu daha organize hale getirir
  • Global değişkenlerin ve fonksiyonların isim çakışmasını önler
  • Kodunuzun yeniden kullanılabilir olmasını sağlar

Örnek Proje

Örnek bir proje oluşturalım; bir araba galerisi. Araba galerisinde farklı markalar, modeller ve fiyatlar olacak.

// carGallery.js
export function displayCar(model, price) {
return `Model: ${model}, Price: ${price}`;
}

export function discount(price, percentage) {
return price - (price * (percentage / 100));
}

// taxes.js
export const taxRate = 18;

export function calculateTax(price) {
return price * (taxRate / 100);
}

Bu iki dosya, farklı işlevlerle ilgileniyor. İlki bir araba galerisini simgelerken, ikincisi vergi hesaplamaları yapar. Şimdi bu modülleri ana dosyamızda nasıl kullanacağımızı görelim.

// app.js
import * as carGallery from './carGallery';
import { taxRate, calculateTax } from './taxes';

const carPrice = 50000;
const carModel = "Tesla Model S";

// Araba fiyatını ve modelini göster
console.log(carGallery.displayCar(carModel, carPrice));

// İndirim uygula
const discountedPrice = carGallery.discount(carPrice, 10);
console.log(`Discounted Price: ${discountedPrice}`);

// Vergi hesapla
console.log(`Tax Rate: ${taxRate}%`);
console.log(`Tax: ${calculateTax(carPrice)}`);

Modül Türleri

Named Exports: Fonksiyon veya değişkeni ismiyle dışa aktarır. Bir dosyada birden fazla olabilir.

// carGallery.js
export function displayCar() { ... }
export function discount() { ... }

Default Exports: Bir dosyada sadece bir tane olabilir ve ismi olmaksızın dışa aktarılır.

// math.js

export default function add(x, y) {

return x + y;

}

Sonuç

Modül yapısı, JavaScript'te kodu organize etmek için oldukça güçlü ve esnek bir mekanizmadır. Özellikle büyük projelerde, farklı dosyalarda ve klasörlerde kodu düzenlemek ve yönetmek için vazgeçilmezdir.

Elinizde şimdi temel bir anlayış ve bir örnek proje var. Daha karmaşık uygulamalar için bu temel üzerine inşa edebilirsiniz.

Mutlu kodlamalar!