Üst Edit: Türkçe’de script’e karşılık olarak betik kelimesi kullanılıyor fakat script yazılımcıların diline tamamen yerleştiği için bu yazıda script olarak kullanacağım.

Javascriptde modül kullanımı basit ve küçük boyutlu scriptlerin yeterli olduğu zamanlarda çok özel durumlar hariç bir ihtiyaç değildi. Javascriptin web uygulamalarında yardımcı bir araç olmaktan çıkıp neredeyse kullanıcı ara yüzünün temeli haline gelmesiyle birlikte modüllere olan ihtiyaç arttı ve javascript topluluğu kütüphaneler yardımı ile bu sorunu aşacak çözümler üretti.

ECMAScript6 (ES6) ile birlikte modüller JavaScriptin bütünleşik bir parçası haline gelerek çoğu modern tarayıcı ve Node.js tarafından destekleniyor. ES6 nedir bilmeyen eski tarayıcılara da destek vermeniz şart değilse modül işlevi sağlayan kütüphanelerin adını bile bilmemiz gerekmiyor.

Modül nedir?

Kabaca “bir dosyadan” “bir script” çağırır ve buna “bir modül” deriz. (Bazen bir script içerisinde birden fazla modülde olabilir). Javascript modüllerini kullanırken ihtiyacımız olan iki ifade var;

“export” (dışa aktarma) ifadesi mevcut modülün dışarıdan çağırılabilecek sabit, değişken ve fonksiyonlarını tanımlamak için kullanılır

“import” (içe aktarma) ifadesi modülün diğer modüller içerisinden çağrılabilmesi için kullanılır.

Örneğin merhaba.js içerisinde bir modül tanımlayalım

export function merhaba(isim) {
    alert('Merhaba, ${isim}!');
}

Not: ${isim} kullanımı da ES6 ile kullanıma sunulmuştur.

Daha sonra index.js dosyamız içerisine bu modülü alıp kullanalım

import {merhaba} from './merhaba.js'; 
alert(merhaba);   // function...
merhaba('Evren'); // Merhaba, Evren!

Export Türleri

  • Default Export

Bir dosyadaki varsayılan modül default kelimesi ile belirlenir. Her dosyada sadece bir tane default modül tanımlanabilir.

export default function deneme() {};

deneme.js dosyası içinde default tanımlaması ile export ettiğimiz deneme adında bir fonksiyonumuz olsun.

import deneme from './exportdeneme.js';
import baskabirornek from './exportdeneme.js';
import merhaba from './exportdeneme.js';

Görüldüğü üzere import ettiğimiz modüle istediğimiz ismi verebiliriz ve derleyici deneme.js içerisinde default olarak tanımlanan deneme() fonksiyonunu ototmatik olarak bu isimle import edecektir.

  • Named Export

Tek dosyada birden fazla export ifadesi ile çoklu modül tanımlayalım.

export let isim1 = …, isim2 = …, …, isimN;
export function merhaba(){...} 
export class ClassAdi {...}

Bu modüllerden hiç biri default olarak tanımlanmadığı için, neyi import etmek istediğimizi belirtmek için import ifadesini özel bir şekilde kullanmamız gerekir. Örneğin;

import {merhaba} from './exportdeneme2.js';
import {merhaba AS selamla} from './deneme2.js'; //ALIAS IMPORT

Gördüğünüz üzere yazının en başında verilen örnekte named export tekniğini kullanmıştık

Modüller tekil (singleton) özelliktedir

Projenizde aynı modülü farkı noktalarda birden fazla defa import edebilirsiniz, fakat modül yalnızca ilk çağrılışında derlenecektir.

export let admin = { name: "John" };

Oluşturduğumuz bu admin.js dosyası yalnızca ilk import edilişinde derlenip bir admin objesi oluşturualcaktır, daha sonra farklı noktalardan import edildiğinde yeniden derlenmeden aynı admin objesi döndürülecektir.

import {admin} from './admin.js'; 
admin.name = "Evren"
import {admin} from './admin.js'; 
alert (admin.name) //Sonuç : Evren

Tekrar gözden geçirirsek modül yalnızca bir defa çalıştırılır. Export edilecek objeler oluşturulur ve gelecekteki import işlemleri ile oluşturulan bu objeler paylaşılır, yenileri oluşturulmaz.

Bu özellik modülleri ilk çağırışımızda ayarlayarak daha sonra proje genelinde kolayca kullanmamızı sağlar.

Sonuç Olarak

Modüller ES6 ile birlikte bütünleşik olarak Javascript’e dahil olan, ES6 desteklemeyen seki tarayıcı sürümlerinde yalnızca çeşitli kütüphanelerin dseteği ile kullanılabilen, özellikle büyük projeleri parçalara ayırmak, kodlama kolaylığı ve kod kalitesini arttıran harika bir yöntem.

Modül kullanımını gerekli kılan büyük bir proje oluşturacaksanız sonraki aşamada ihtiyacınız olan Webpack gibi bir modül paketleyicisi olacaktır. Yazılacaklar listemin arasında bir Merhaba Webpack yazısı da var. Yorumlarınız ve sorularınız başka hangi konulara yer vermem gerektiğini gösterecektir.

Bu Yazıda Yapılan Değişiklikler
  • 11.05.2022: Yazı özeti düzenlendi.