ES6 Modülleri: JavaScript’te Import ve Export Kullanımı

Modern JavaScript geliştirmesinde modüller, kodun düzenlenmesi, yönetilmesi ve yeniden kullanılabilirliği için vazgeçilmez bir araç haline gelmiştir. ES6 (ECMAScript 2015) ile birlikte JavaScript’e doğal modül sistemi entegre edilmiş, bu da geliştiricilerin daha temiz, daha sürdürülebilir ve daha performanslı uygulamalar oluşturmasına olanak tanımıştır. Bu makalede, ES6 modüllerinin ne olduğunu, neden ihtiyaç duyulduğunu ve özellikle import ile export anahtar kelimelerinin nasıl kullanılacağını derinlemesine inceleyeceğiz.

Giriş: Neden Modüllere İhtiyaç Duyarız?

JavaScript’in ilk zamanlarında, tüm kod genellikle tek bir küresel kapsamda (global scope) çalışırdı. Bu yaklaşım, basit uygulamalar için yeterli olsa da, projeler büyüdükçe ciddi sorunlara yol açmaya başladı:

• Küresel Kapsam Kirliliği (Global Scope Pollution): Tüm değişkenler ve fonksiyonlar küresel kapsamda tanımlandığında, isim çakışmaları (name collisions) kaçınılmaz hale geliyordu. Farklı kütüphaneler veya geliştiriciler aynı isimleri kullandığında beklenmedik davranışlar ortaya çıkabiliyordu.
• Bağımlılık Yönetimi Zorlukları: Bir dosyanın başka bir dosyaya veya kütüphaneye bağımlı olması durumunda, bu bağımlılıkların doğru sırada yüklenmesini sağlamak karmaşık bir hal alıyordu. Manuel olarak etiketlerini sıralamak hataya açıktı ve bakımı zordu.
• Kodun Yeniden Kullanılabilirliği ve Bakımı: Kod parçalarını farklı projelerde veya uygulamanın farklı bölümlerinde yeniden kullanmak, küresel kapsamdaki bağımlılıklar nedeniyle zorlaşıyordu. Bir kod parçasını değiştirmek, uygulamanın beklenmedik başka yerlerini etkileyebiliyordu.
• Kapsülleme Eksikliği: Veri gizleme ve kapsülleme (encapsulation) mekanizmaları yetersizdi. Her şey küresel kapsamda erişilebilir olduğundan, dahili uygulama detaylarını dışarıdan izole etmek zordu.

Bu sorunları çözmek için ES6 öncesinde CommonJS (Node.js için) ve AMD (Asynchronous Module Definition, RequireJS gibi tarayıcılar için) gibi çeşitli modül sistemleri geliştirildi. Bu sistemler kendi içlerinde başarılı olsa da, JavaScript'in dilin bir parçası olan standart bir modül sistemine ihtiyacı vardı. İşte bu noktada ES6 modülleri devreye girdi.

ES6 Modülleri Nedir?

ES6 modülleri (resmi adıyla ECMAScript Modülleri veya ESM), JavaScript'in dil seviyesinde tanımlanmış standart modül sistemidir. Bu sistem, kodunuzu mantıksal parçalara ayırmanıza ve bu parçalar arasında kontrollü bir şekilde bilgi alışverişi yapmanıza olanak tanır. Temel özellikleri şunlardır:

• Statik Yapı: ES6 modülleri, kod çalıştırılmadan önce bağımlılıkları statik olarak analiz edebilir. Bu, hata kontrolü, optimizasyon (örneğin tree-shaking) ve daha iyi araç desteği sağlar.
• Tekil Modül Kapsamı: Her modül kendi özel kapsamına (module scope) sahiptir. Bir modülde tanımlanan değişkenler, fonksiyonlar veya sınıflar, açıkça dışa aktarılmadıkça diğer modüllerden doğrudan erişilemez. Bu, küresel kapsam kirliliğini önler.
• Belirgin Bağımlılıklar: Bir modülün başka bir modüle bağımlılığı import anahtar kelimesi ile açıkça belirtilir. Bu, kodun okunabilirliğini ve anlaşılabilirliğini artırır.
• Tarayıcı ve Node.js Desteği: ES6 modülleri hem modern tarayıcılarda hem de Node.js ortamında doğal olarak desteklenir. Bu, aynı modül yapısının farklı JavaScript çalışma zamanlarında kullanılabilmesini sağlar.

Bir JavaScript dosyasını modül olarak kullanmak için, tarayıcıda etiketine type="module" özniteliğini eklemeniz gerekir:

Node.js ortamında ise, package.json dosyanıza "type": "module" ekleyebilir veya modül dosyalarınızı .mjs uzantısıyla kaydedebilirsiniz.

Export Kullanımı

export anahtar kelimesi, bir modüldeki değişkenleri, fonksiyonları, sınıfları veya sabitleri dış dünyaya (yani diğer modüllere) açmak için kullanılır. İki ana türde dışa aktarım vardır: adlandırılmış (named) ve varsayılan (default).

Adlandırılmış Dışa Aktarımlar (Named Exports)

Adlandırılmış dışa aktarımlar, bir modülden birden fazla değeri belirli isimlerle dışa aktarmanıza olanak tanır. İçe aktaran modül, bu değerleri aynı isimlerle veya yeniden adlandırarak alabilir.

Tek Tek Dışa Aktarma

Her bir öğenin başına export anahtar kelimesini koyarak dışa aktarabilirsiniz:

// utils.js
export const PI = 3.14159;

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

export class Calculator {
    constructor() {
        this.result = 0;
    }
    multiply(a, b) {
        return a * b;
    }
}

export const subtract = (a, b) => a - b;

Toplu Dışa Aktarma

Modülün sonunda, süslü parantezler içinde dışa aktarmak istediğiniz tüm öğeleri listeleyerek de toplu dışa aktarım yapabilirsiniz:

// constants.js
const API_KEY = "your_api_key";
const MAX_RETRIES = 5;

function getConfig() {
    return { API_KEY, MAX_RETRIES };
}

export { API_KEY, MAX_RETRIES, getConfig };

Yeniden Adlandırarak Dışa Aktarma (as keyword)

Dışa aktarma sırasında bir öğeyi farklı bir isimle dışa aktarmak isterseniz as anahtar kelimesini kullanabilirsiniz. Bu, isim çakışmalarını önlemek veya daha açıklayıcı isimler sağlamak için kullanışlıdır.

// mathOperations.js
function sum(a, b) {
    return a + b;
}

function difference(a, b) {
    return a - b;
}

export { sum as addFunction, difference as subtractFunction };

Varsayılan Dışa Aktarımlar (Default Exports)

Her modül sadece bir tane varsayılan dışa aktarıma sahip olabilir. Varsayılan dışa aktarım, o modülün "ana" veya "birincil" öğesini temsil etmek için kullanılır. İçe aktarırken, varsayılan dışa aktarıma istediğiniz herhangi bir ismi verebilirsiniz.

export default anahtar kelimesi ile doğrudan bir değişkeni, fonksiyonu, sınıfı veya ifadeyi dışa aktarabilirsiniz:

// myModule.js
const greeting = "Hello from my module!";
export default greeting;

// utilityFunction.js
export default function multiply(a, b) {
    return a * b;
}

// User.js
export default class User {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return Hi, I'm ${this.name};
    }
}

Varsayılan dışa aktarımlar genellikle bir modülün ana işlevini veya tek bir ana bileşenini dışa aktarmak için tercih edilir. Örneğin, bir React bileşeni veya bir yardımcı fonksiyon kütüphanesi.

Yeniden Dışa Aktarma (Re-exporting)

Bazen bir modülün, başka bir modülden aldığı öğeleri doğrudan dışa aktarması gerekebilir. Bu, modül hiyerarşilerini basitleştirmek ve kodun daha düzenli görünmesini sağlamak için kullanışlıdır.

// common/index.js
export { add, subtract } from './math.js';
export { fetchData } from './api.js';

Bu örnekte, common/index.js dosyası, math.js ve api.js dosyalarından aldığı öğeleri kendi dışa aktarımları arasına katıyor. Böylece, diğer modüller math.js ve api.js yerine sadece common/index.js dosyasından tüm bu işlevlere erişebilir.

Tüm adlandırılmış dışa aktarımları yeniden dışa aktarmak için wildcard (*) kullanabilirsiniz:

// common/index.js
export * from './math.js'; // math.js içindeki tüm adlandırılmış export'ları yeniden dışa aktarır
export * from './api.js';  // api.js içindeki tüm adlandırılmış export'ları yeniden dışa aktarır

Ancak, bu yöntem varsayılan dışa aktarımları doğrudan yeniden dışa aktarmaz. Varsayılan dışa aktarımı yeniden dışa aktarmak için özel bir sözdizimi kullanmanız gerekir:

// moduleA.js
export default function sayHello() { return "Hello!"; }

// moduleB.js
export { default as sayHelloFromA } from './moduleA.js';

Import Kullanımı

import anahtar kelimesi, başka bir modül tarafından dışa aktarılmış değerleri mevcut modülünüze dahil etmek için kullanılır. export gibi, import da adlandırılmış, varsayılan ve tümünü içe aktarma gibi farklı biçimlere sahiptir.

Adlandırılmış İçe Aktarımlar (Named Imports)

Adlandırılmış dışa aktarımları içe aktarmak için, süslü parantezler içinde dışa aktarılan öğelerin isimlerini belirtirsiniz. Bu isimler, dışa aktarılan modüldeki isimlerle tam olarak eşleşmelidir.

// main.js
import { PI, add, Calculator, subtract } from './utils.js';
import { API_KEY, getConfig } from './constants.js';
import { addFunction, subtractFunction } from './mathOperations.js'; // Yeniden adlandırılmış import

console.log(PI); // 3.14159
console.log(add(5, 3)); // 8

const calc = new Calculator();
console.log(calc.multiply(4, 2)); // 8

console.log(API_KEY); // "your_api_key"
console.log(getConfig()); // { API_KEY: "your_api_key", MAX_RETRIES: 5 }

console.log(addFunction(10, 5)); // 15

Yeniden Adlandırarak İçe Aktarma (as keyword)

İçe aktarma sırasında bir öğeyi farklı bir isimle kullanmak isterseniz as anahtar kelimesini kullanabilirsiniz. Bu, yerel kapsamdaki isim çakışmalarını önlemek veya daha kısa/anlamlı isimler kullanmak için faydalıdır.

// main.js
import { add as sumNumbers, subtract as minusNumbers } from './mathOperations.js';

console.log(sumNumbers(10, 20)); // 30
console.log(minusNumbers(50, 10)); // 40

Varsayılan İçe Aktarımlar (Default Imports)

Varsayılan dışa aktarımları içe aktarırken, süslü parantez kullanmanıza gerek yoktur. Dışa aktarılan öğeye istediğiniz herhangi bir ismi verebilirsiniz.

// main.js
import myGreeting from './myModule.js'; // 'myGreeting' istediğimiz isim
import performMultiply from './utilityFunction.js'; // 'performMultiply' istediğimiz isim
import MyUserClass from './User.js'; // 'MyUserClass' istediğimiz isim

console.log(myGreeting); // "Hello from my module!"
console.log(performMultiply(7, 8)); // 56

const user = new MyUserClass("Alice");
console.log(user.greet()); // "Hi, I'm Alice"

Bir modül hem varsayılan hem de adlandırılmış dışa aktarımlara sahipse, bunları tek bir import ifadesinde birleştirebilirsiniz:

// mixedModule.js
export const SOME_CONSTANT = 100;
export default function processData(data) { / ... / }

// main.js
import processData, { SOME_CONSTANT } from './mixedModule.js';

console.log(SOME_CONSTANT); // 100
processData([]);

Tümünü İçe Aktarma (Namespace Imports)

Bir modüldeki tüm adlandırılmış dışa aktarımları tek bir nesne altında içe aktarmak isterseniz, yıldız (*) operatörünü kullanabilirsiniz. Bu, özellikle bir modülün çok sayıda dışa aktarımı olduğunda veya isim çakışmalarını önlemek istediğinizde kullanışlıdır.

// main.js
import * as Utils from './utils.js'; // Tüm dışa aktarımlar 'Utils' nesnesi altında toplanır

console.log(Utils.PI); // 3.14159
console.log(Utils.add(10, 5)); // 15
const calc = new Utils.Calculator();
console.log(calc.multiply(6, 3)); // 18

Bu yöntem, varsayılan dışa aktarımı da Utils.default olarak erişilebilir kılar (eğer varsa).

Yan Etkili İçe Aktarımlar (Side-Effect Imports)

Bazı modüllerin dışa aktardığı belirli bir değer olmasa da, içe aktarıldıklarında küresel kapsamda bir değişiklik (örneğin, bir polyfill yüklemek, bir stil dosyasını dahil etmek veya bir veritabanı bağlantısı başlatmak) yapması istenebilir. Bu tür modülleri sadece yan etkileri için içe aktarabilirsiniz:

// polyfills.js
// Bu dosya, belirli bir özelliği küresel kapsamda tanımlar
Array.prototype.myCustomMethod = function() {
    console.log("This is a custom array method.");
};

// main.js
import './polyfills.js'; // Sadece yan etkisi için içe aktarılır

const arr = [1, 2, 3];
arr.myCustomMethod(); // "This is a custom array method." çıktısını verir

Dinamik Import (Dynamic Imports)

import() fonksiyonu, bir modülü çalışma zamanında (runtime) koşullu olarak veya kullanıcının bir eylemine bağlı olarak yüklemenize olanak tanır. Bu, özellikle performans optimizasyonu (code splitting, lazy loading) için çok önemlidir. import(), bir Promise döndürür ve modül yüklendikten sonra çözümlenir.

// main.js
const button = document.getElementById('loadModule');

button.addEventListener('click', async () => {
    try {
        // Modülü sadece butona tıklandığında yükle
        const module = await import('./heavyModule.js');
        console.log('Modül yüklendi:', module);
        module.doSomethingHeavy();
    } catch (error) {
        console.error('Modül yüklenirken hata oluştu:', error);
    }
});

// heavyModule.js
export function doSomethingHeavy() {
    console.log("Ağır bir işlem yapılıyor...");
    // ...
}

export default "Heavy Module Default Export";

Dinamik importlar, özellikle büyük uygulamalarda başlangıç yükleme süresini azaltmak için kritik bir rol oynar. Bir kullanıcı uygulamanın belirli bir bölümüne gitmediği sürece o bölümle ilgili kodun yüklenmesini erteleyebilirsiniz.

Modül Yolları ve Çözümleme

import ifadelerinde belirtilen modül yolları (specifiers), tarayıcı veya Node.js tarafından modül dosyasının nerede bulunacağını belirlemek için kullanılır.

• Bağıl Yollar (Relative Paths): Mevcut dosyanın konumuna göre modülün yerini belirtir.
  • ./module.js: Aynı dizindeki modül.
  • ../parent-module.js: Üst dizindeki modül.
  • ./sub-folder/module.js: Alt dizindeki modül.
• Mutlak Yollar (Absolute Paths): Sunucunun kök dizinine göre modülün yerini belirtir.
  • /scripts/utils.js
• Bare Import Specifiers (Çıplak İçe Aktarma Belirleyicileri): Genellikle npm paketleri için kullanılır ve doğrudan paket adını belirtir.
  • import React from 'react';
  • import { debounce } from 'lodash';

  Tarayıcılar varsayılan olarak bare import specifiers'ı çözemez. Bunları kullanabilmek için bir modül yükleyiciye (bundler) (Webpack, Rollup, Vite) veya Import Maps gibi tarayıcı özelliklerine ihtiyacınız vardır.

Node.js'te Modül Çözümlemesi: Node.js, bare import specifiers'ı node_modules dizinlerinde arayarak çözer. Ayrıca, dosya uzantıları (.js, .json, .node) veya package.json içindeki main veya exports alanlarını kullanarak modül dosyalarını bulabilir.

Tarayıcıda ES6 Modülleri

Modern tarayıcılar ES6 modüllerini doğrudan destekler. Bir JavaScript dosyasını modül olarak yüklemek için etiketini kullanmanız yeterlidir:

    


    
Hello Modules!
    

// app.js
import { greet } from './utils.js';

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('h1').textContent = greet('Browser User');
});

// utils.js
export function greet(name) {
    return Merhaba, ${name}!;
}

type="module" ile yüklenen scriptler, varsayılan olarak defer özniteliği gibi davranır; yani HTML ayrıştırıldıktan sonra, DOMContentLoaded olayından önce çalıştırılırlar. Ayrıca, modüller her zaman katı modda (strict mode) çalışır.

Üretim ortamlarında, genellikle Webpack, Rollup veya Vite gibi modül paketleyiciler (bundlers) kullanılır. Bu araçlar, birden fazla modül dosyasını tek bir optimize edilmiş dosyada birleştirerek tarayıcının daha az HTTP isteği yapmasını sağlar ve performans artışı sunar. Ayrıca, bare import specifiers gibi tarayıcının doğal olarak desteklemediği özellikleri de derleme zamanında çözerek uyumluluk sağlarlar.

Node.js'te ES6 Modülleri

Node.js, CommonJS modül sistemini (require() ve module.exports) uzun süredir kullanmaktadır. ES6 modüllerinin Node.js'e entegrasyonu zaman içinde gelişmiş ve artık tam destek sunmaktadır. Node.js'te ES6 modüllerini kullanmanın iki ana yolu vardır:

1. package.json dosyasında "type": "module" belirtmek: Bu, Node.js'e projenizdeki tüm .js dosyalarının ES6 modülleri olarak ele alınması gerektiğini söyler (CommonJS modülleri için .cjs uzantısı kullanmanız gerekir).

   // package.json
   {
     "name": "my-esm-project",
     "version": "1.0.0",
     "type": "module", // ES6 modüllerini etkinleştirir
     "main": "app.js",
     "scripts": {
       "start": "node app.js"
     }
   }
           

2. .mjs uzantısını kullanmak: Dosyalarınızı .mjs uzantısıyla kaydettiğinizde, Node.js otomatik olarak bunları ES6 modülü olarak tanır. Bu, "type": "module" ayarı olmadan bile çalışır ve CommonJS ile ES6 modüllerini aynı projede karıştırmak için kullanışlıdır (CommonJS için .cjs kullanın).

   // app.mjs
   import { greeting } from './utils.mjs';
   
   console.log(greeting('Node.js User'));
   
   // utils.mjs
   export const greeting = (name) => Hello from Node.js, ${name}!;
           

CommonJS ile ES6 Modülleri Arasındaki Farklar ve Birlikte Çalışma:

• ES6 modülleri __dirname, __filename gibi CommonJS'e özgü global değişkenlere doğrudan erişemez. Bunlara eşdeğerlerini import.meta.url kullanarak elde edebilirsiniz.
• ES6 modüllerinden CommonJS modüllerini import ile içe aktarabilirsiniz (varsayılan dışa aktarım olarak gelir). Ancak CommonJS modüllerinden ES6 modüllerini require() ile doğrudan içe aktaramazsınız. Dinamik import() kullanılmalıdır.
• exports ve module.exports gibi CommonJS anahtar kelimeleri ES6 modül kapsamı içinde tanımlı değildir.

Modül Tasarım Kalıpları ve En İyi Uygulamalar

ES6 modülleri, kodunuzu daha iyi yapılandırmanıza yardımcı olur. İşte bazı en iyi uygulamalar:

• Tek Sorumluluk İlkesi (Single Responsibility Principle): Her modülün tek bir işlevi veya sorumluluğu olmalıdır. Bu, modüllerin daha küçük, daha odaklı ve bakımı daha kolay olmasını sağlar.
• Tutarlı Dışa Aktarma Stratejisi: Bir modülün ana işlevi varsa varsayılan dışa aktarımı kullanın. Yardımcı fonksiyonlar, sabitler veya birden fazla öğe için adlandırılmış dışa aktarımları tercih edin.
• İsimlendirme Kuralları: Dışa aktarılan isimler açık ve anlaşılır olmalıdır. Yeniden adlandırma (as anahtar kelimesiyle) gerektiğinde bunu kullanmaktan çekinmeyin.
• Dairesel Bağımlılıklardan Kaçınma: İki modülün birbirini içe aktarması (A -> B ve B -> A) dairesel bağımlılıklara yol açar. Bu durum beklenmedik davranışlara veya tanımsız değerlere neden olabilir. Mümkünse dairesel bağımlılıkları yeniden yapılandırma ile çözün.
• Modül Boyutunu Optimize Etme: Özellikle tarayıcı uygulamaları için, modüllerinizi mümkün olduğunca küçük tutun. Dinamik importlar ve ağaç sallama (tree-shaking) gibi tekniklerle sadece ihtiyacınız olan kodu yükleyin.
• index.js Dosyaları: Bir dizindeki birden fazla modülü tek bir noktadan dışa aktarmak için index.js (veya index.mjs) dosyaları kullanmak yaygın bir kalıptır. Bu, içe aktarma yollarını basitleştirir.

  // components/Button/index.js
  export { default } from './Button.js';
  export { ButtonType } from './constants.js';
  
  // app.js
  import Button, { ButtonType } from './components/Button';
          

Gelecek ve Sonuç

ES6 modülleri, JavaScript ekosisteminin temel bir parçası haline gelmiştir ve modern web geliştirmenin vazgeçilmezidir. Tarayıcı ve Node.js tarafından doğal olarak desteklenmesi, geliştiricilere güçlü ve standart bir modül sistemi sunar.

import ve export anahtar kelimeleri, kodunuzu daha modüler, daha düzenli ve daha sürdürülebilir hale getirir. Küresel kapsam kirliliğini önler, bağımlılıkları açıkça tanımlar ve kodun yeniden kullanılabilirliğini artırır. Dinamik importlar gibi özellikler sayesinde, performans optimizasyonları da kolayca uygulanabilir.

ES6 modüllerini anlamak ve etkili bir şekilde kullanmak, her JavaScript geliştiricisi için temel bir yetkinliktir. Bu modüller sayesinde, büyük ve karmaşık uygulamaları bile yönetilebilir, test edilebilir ve ölçeklenebilir parçalara ayırabiliriz. Geliştirme süreçlerinizi hızlandırırken, uygulamanızın kalitesini ve performansını artırmak için ES6 modüllerinin sunduğu tüm avantajlardan yararlanmaya devam edin.