CodeBlanks Logo Icon CodeBlanks

Özet - Modüller

JavaScript kursu · Orta seviye · Ders 129/134

Named ve default export/import kullanarak iki dosyalı basit bir hesap modülü oluşturursun.

Özet - Hesap modülü

Bu özette iki dosyalık bir hesap modülü oluşturacaksın: calc.js işlemleri dışa aktarır, main.js onları içe aktarır ve kullanır.

calc.js içinde add ve subtract named export, calculate default export olacak. main.js bunları tek bir import satırıyla alıp console.log ile sonucu gösterecek.

Bu, gerçek projelerde dosyaları nasıl birbirine bağladığını özetler.

Uygulama calc.js modülünü yaz

calc.js modülü yaz: add ve subtract işlevlerini named export olarak, calculate işlevini default export olarak dışa aktar. calculate bir op ve iki sayı alsın.

Örnek çözümü göster
İki named export function, bir default export function yaz. calculate bir op ve iki sayı alsın.
Örnek çözüm:
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}
export default function calculate(op, a, b) {
  if (op === "+") return add(a, b);
  if (op === "-") return subtract(a, b);
  return 0;
}

main.js içe aktarımı

main.js dosyası calc.js'ten değerleri içe aktarır. Named ve default import'u tek satırda birleştirebilirsin; bu gerçek projelerde dosyaları birbirine bağlamanın temel yoludur.

import calculate, { add, subtract } from './calc.js';

Sonra calculate'i çağırıp sonucu yazdırırsın:

console.log(calculate("+", 5, 3));

Bu, modüllerin nasıl birbirini bulup kullandığını gösterir.

Uygulama main.js içe aktarımı yaz

main.js dosyasında ./calc.js modülünden add ve subtract'ı named, calculate'i default import ile içe aktar. Sonra calculate("+", 5, 3) sonucunu console.log ile yazdır.

Örnek çözümü göster
Default ismi ve süslü parantezli named listesini virgülle ayır. Sonra calculate'i çağır.
Örnek çözüm:
import calculate, { add, subtract } from './calc.js';
console.log(calculate("+", 5, 3));

Kendini test et

  1. Bir modülde hem named hem default export olabilir mi?

    • Hayır, sadece bir tür
    • Evet, ikisi birden
    • Sadece named
    • Sadece default
    Cevabı göster

    Evet, ikisi birden — Doğru! Bir modülde hem named hem default export bulunabilir.

  2. Dışa/içe aktarım türlerini eşleştir

    named export
    isme göre
    default export
    modül başına bir
    named import
    { } ile
    default import
    isme gerek yok

Orta seviye bölümündeki tüm dersler