Bugün JavaScript’te modüler yapıyı ve kütüphane mantığını öğreneceğiz. Bu bilgiler, daha büyük ve karmaşık projelerde kodumuzu daha düzenli ve yönetilebilir hale getirmemize yardımcı olacak.

1. Modül Sistemi (export, import)

Modüller, kodumuzu mantıksal parçalara bölerek daha okunabilir ve sürdürülebilir hale getiren yapı taşlarıdır.

1.1. Neden Modül Kullanırız?

1.2. ES6 Modül Sistemi

ES6 ile birlikte gelen modül sistemi, export ve import anahtar kelimelerini kullanır.

Fonksiyonları ve Değişkenleri Dışa Aktarma

math.js:

// Değişken ve fonksiyonları dışa aktarıyoruz
export const pi = 3.1415;

export function kareAl(sayi) {
    return sayi * sayi;
}

export function kupAl(sayi) {
    return sayi * sayi * sayi;
}

Varsayılan İhracat (export default)

Bir modülün tek bir varsayılan ihracatı olabilir.

topla.js:

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

Modülleri İçeri Aktarma

main.js:

import { kareAl, kupAl, pi } from './math.js';

console.log(kareAl(5)); // 25
console.log(kupAl(3));  // 27
console.log(pi);        // 3.1415

import topla from './topla.js';

console.log(topla(2, 3)); // 5

export vs export default farkı:

  • export ile birden fazla fonksiyon, değişken veya sınıfı dışa aktarabilirsiniz — import sırasında isim eşleşmeli
  • export default ise modülün varsayılan ihracatını belirler — import sırasında istediğiniz ismi verebilirsiniz

2. JavaScript Kütüphaneleri ve Paketleri

2.1. Kütüphane Nedir?

Kütüphaneler, belirli işlevleri yerine getirmek için hazırlanmış fonksiyon ve metodların bir araya geldiği kod parçacıklarıdır. Örneğin Moment.js tarih ve saat işlemlerini kolaylaştıran bir kütüphanedir.

2.2. Paket Nedir?

Paketler, dağıtılabilir, yeniden kullanılabilir kod parçacıklarıdır. Kütüphaneler ve modüller paket olarak dağıtılabilir. Paket yöneticileri (örneğin NPM), paketleri kolayca yüklememize ve yönetmemize olanak tanır.

3. NPM Nedir ve Nasıl Kullanılır?

NPM (Node Package Manager), JavaScript paketlerini yönetmek için kullanılan en popüler araçtır. Node.js ile birlikte gelir ve hem sunucu tarafında hem de istemci tarafında kullanılabilir paketleri barındırır.

Temel NPM Komutları

# Yeni bir proje başlat
npm init -y

# Bir paket yükle
npm install lodash

# Geliştirme bağımlılığı yükle
npm install --save-dev jest

# Paketleri çalıştır
npm run dev

# Bağımlılıkları listele
npm list

4. Modern JavaScript Özellikleri Özeti

4.1. let ve const

4.2. Ok Fonksiyonları

Daha kısa ve bağlamsal this içeren fonksiyon tanımlama:

const merhaba = (isim) => {
    console.log(`Merhaba, ${isim}!`);
};

4.3. Template Literals

Metin içinde değişkenleri ve ifadeleri kolayca kullanmamızı sağlar:

let ad = "Ali";
console.log(`Merhaba, ben ${ad}.`);

4.4. Destructuring (Parçalama)

Dizilerden ve objelerden değişkenlere kolayca değer atama:

let kisi = { isim: "Ayşe", yas: 25 };
let { isim, yas } = kisi;

console.log(isim); // "Ayşe"

4.5. Spread ve Rest Operatörleri

let sayilar = [1, 2, 3];
let yeniSayilar = [...sayilar, 4, 5];
console.log(yeniSayilar); // [1, 2, 3, 4, 5]

4.6. Classes (Sınıflar)

ES6 ile gelen sınıf yapısı, nesne yönelimli programlamayı destekler:

class Hayvan {
    constructor(ad) {
        this.ad = ad;
    }

    sesCikar() {
        console.log(`${this.ad} ses çıkardı.`);
    }
}

class Kedi extends Hayvan {
    sesCikar() {
        console.log(`${this.ad} miyavladı.`);
    }
}

let kedim = new Kedi("Minnoş");
kedim.sesCikar(); // "Minnoş miyavladı."

Pratik Sorular

Soru 1: hesap.js adlı bir modül oluşturun. İçinde carp ve bol fonksiyonlarını tanımlayın. Bu fonksiyonları başka bir dosyada kullanın.

// hesap.js
export function carp(a, b) {
    return a * b;
}

export function bol(a, b) {
    if (b === 0) throw new Error("Sıfıra bölünemez");
    return a / b;
}

// main.js
import { carp, bol } from './hesap.js';

console.log(carp(4, 5)); // 20
console.log(bol(10, 2)); // 5

Soru 2: NPM kullanarak moment kütüphanesini yükleyin ve şu anki tarihi formatlayarak konsola yazdırın.

npm install moment
import moment from 'moment';

const simdi = moment().format('DD MMMM YYYY, HH:mm:ss');
console.log(simdi);

Soru 3: ES6 sınıflarını kullanarak bir Araba sınıfı oluşturun. marka, model ve yil özellikleri olsun; bilgiVer metodu bu bilgileri ekrana yazsın.

class Araba {
    constructor(marka, model, yil) {
        this.marka = marka;
        this.model = model;
        this.yil = yil;
    }

    bilgiVer() {
        console.log(`${this.yil} model ${this.marka} ${this.model}`);
    }
}

const aracim = new Araba("Tesla", "Model 3", 2024);
aracim.bilgiVer(); // "2024 model Tesla Model 3"

Günün Özeti

Bugün JavaScript’te modül yapısını ve kütüphane mantığını öğrendik:

🎉 Tebrikler!

5 günlük JavaScript BootCamp’ini başarıyla tamamladın! Artık:

Sonraki Adımlar