Articles
JavaScript'e Giriş
JavaScript'te Modüller

JavaScript'te Modüller

Bu makale, JavaScript'teki modülleri açıklar.

YouTube Video

JavaScript'te Modüller

JavaScript'teki modüller, kodu düzenlemenin ve tekrar kullanılabilir bileşenlere ayırmanın bir yoludur. Modüller kullanılarak kodun okunabilirliği ve sürdürülebilirliği artırılır ve aynı işlev diğer projelerde yeniden kullanılabilir. Burada modül kavramından belirli kullanım örneklerine kadar çeşitli modül sistemlerini açıklıyoruz.

JavaScript Modüllerinin Kavramı

JavaScript başlangıçta bir modüler sisteme sahip değildi. Ancak, uygulamalar büyüdükçe modülerleştirme, kodu tekrar kullanım için daha küçük birimlere bölmek adına önemli hale geldi. Bir modül, belirli bir işlevi olan ve diğer kodlardan bağımsız olarak yönetilebilen, böylece birden fazla dosyaya bölünebilen bir kod parçasıdır.

Modüllerin Ana Türleri

JavaScript'te birkaç modül sistemi vardır. En yaygın olanları ES Modülleri (ESM) ve CommonJS'dir.

  • ES Modülleri, modülleri import ve export anahtar kelimeleriyle tanımlayan, ECMAScript 2015 (ES6)'da tanıtılan bir modül sistemidir. Bu sistem, hem istemci tarafında (tarayıcılar) hem de sunucu tarafında (Node.js) yaygın olarak kullanılır.

  • CommonJS, öncelikle Node.js'te kullanılan bir modül sistemidir. Modüller, dosyaları içe aktarmak ve dışa aktarmak için require ve module.exports kullanılarak tanımlanır.

ES Modüllerinin (ESM) Ayrıntıları

ES Modülleri, JavaScript'teki standart modül sistemidir ve modüller arasında işlevlerin kolayca değiş tokuş edilmesini sağlar. Tarayıcılarda ve Node.js'de bu sistem modülleri tanımlamak ve içe aktarmak için kullanılır.

export ve import

export, bir modülden dışarıya işlevleri açığa çıkarmak için kullanılan bir anahtar sözcüktür. import, diğer modüllerde tanımlanmış işlevleri dahil etmek için kullanılır.

Örnek: Modül Dışa Aktarma

Modüller ES Modüllerinde aşağıdaki gibi dışa aktarılabilir.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

Bu math.mjs modülünde, add ve subtract fonksiyonları dışa aktarılmıştır. Bu işlevler diğer modüllerden içe aktarılabilir.

Burada, .mjs ES Modülleri formatında bir JavaScript dosyasını açıkça belirten bir dosya uzantısıdır. Node.js'de, dosya uzantısı bunun CommonJS mi yoksa ES Modülleri mi olduğunu belirler. Ancak, package.json dosyasında type: "module" belirtilirse, .js uzantılı dosyalar varsayılan olarak ES Modülleri olarak kabul edilir.

Örnek: Modül İçe Aktarma

Modüller ES Modüllerinde aşağıdaki gibi içe aktarılabilir.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

Bu şekilde, import kullanarak diğer dosyalarda tanımlı işlevleri kolayca kullanabilirsiniz.

Varsayılan Dışa Aktarma ve Adlandırılmış Dışa Aktarma

Modüller için iki dışa aktarma yöntemi vardır. Biri adlandırılmış dışa aktarma, diğeri ise varsayılan dışa aktarmadır.

  • Adlandırılmış dışa aktarma, bir modülden birden fazla işlev veya değişken dışa aktarırken kullanılır. Birden fazla dışa aktarma yapabilirsiniz ve içe aktarırken onları belirlenen adlarla alırsınız.
1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}
1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15
  • Varsayılan dışa aktarma, bir modülden tek bir işlev veya sınıf dışa aktarılırken kullanılır. İçe aktarırken herhangi bir adla alınabilir.
1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}
1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Sadece bir varsayılan dışa aktarma mümkündür, ancak adlandırılmış dışa aktarma birden fazla öğeyi aynı anda dışa aktarabilir.

İstemci tarafında (tarayıcıda) kullanım örneği.

Örnek: Modül Dışa Aktarma

Modüller ES Modüllerinde aşağıdaki gibi dışa aktarılabilir.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

Bu utils.js modülünde, sum ve multiply fonksiyonları dışa aktarılmıştır.

Örnek: Modül İçe Aktarma

Modüller istemci tarafında aşağıdaki gibi içe aktarılabilir.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>
  • <script> etiketinin type niteliğini module olarak ayarlayarak, HTML içinde import ve export gibi ES modül söz dizimi kullanılabilir.
  • import ifadesi harici utils.js dosyasını yükler ve sonucu gösterir.

CommonJS Ayrıntıları

CommonJS, ağırlıklı olarak Node.js'de kullanılan bir modül sistemidir. Modüller, module.exports ve require kullanılarak dışa ve içe aktarılır.

require ve module.exports

CommonJS'de modülleri dışa aktarmak için module.exports kullanılır. Ayrıca require, diğer dosyalardaki modülleri kullanmak için kullanılır.

Örnek: Modül Dışa Aktarma

Modüller CommonJS'de aşağıdaki gibi dışa aktarılabilir.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};
Örnek: Modül İçe Aktarma

Modüller CommonJS'de aşağıdaki gibi içe aktarılabilir.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

Node.js'de, CommonJS varsayılan modül sistemi olarak kullanılır, ancak ES Modülleri de desteklenir.

Dinamik İçe Aktarma

JavaScript'te modüller, import() kullanılarak dinamik olarak içe aktarılabilir. Bu yöntem, modülleri gerektiğinde yüklemek için asenkron işlem kullanır.

Dinamik içe aktarmalar aşağıdaki gibi yapılabilir.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Dinamik içe aktarma, uygulama performansını artırmanın bir yoludur. Tümünü ilk yükleme anında yüklemek yerine gerektiğinde modülleri yükleyebildiğiniz için, sayfa görüntüleme hızını artırır.

Modüllerin Avantajları

  • Kodun Yeniden Kullanılabilirliği

    • Modülerleştirilmiş kod, diğer projelerde yeniden kullanılabilir. Ortak işlevselliğe sahip modüller oluşturarak ve bunları birden fazla uygulamada kullanarak, geliştirme verimliliği önemli ölçüde artırılır.

  • Geliştirilmiş Bakım Kolaylığı

    • Kodu modüllere ayırarak, belirli özellikleri veya bölümleri değiştirmek daha kolay olur. Kodu küçük birimlerde yönetmek, hataların bulunmasını ve düzeltilmesini kolaylaştırır.

  • Ad Alanı Çakışmalarını Önleme

    • Birçok değişken ve fonksiyonu genel kapsamda tanımlamak, isim çakışmalarına yol açabilir; ancak modülerleştirme bunu önler ve daha temiz bir kod tabanı oluşturulmasına yardımcı olur.

  • Bağımlılık Yönetimi

    • Modüller kullanarak bir uygulamanın bağımlılıklarını açıkça yönetebilirsiniz. Hangi modülün diğer modüllere bağımlı olduğu netleşir ve kod yapısı daha kolay anlaşılır hale gelir.

Özet

JavaScript'in modül sistemi, kodu düzenlemek ve yeniden kullanılabilir bileşenlere bölmek için güçlü bir yöntemdir. ES Modülleri ile CommonJS arasındaki farkları anlayarak ve proje bazında uygun modül sistemini seçerek kodun okunabilirliğini ve sürdürülebilirliğini artırabilirsiniz. Ayrıca, dinamik importları kullanarak uygulama performansını optimize edebilirsiniz.

Haydi, daha ölçeklenebilir ve verimli JavaScript uygulamaları oluşturmak için modül sisteminden yararlanalım.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

JavaScript'te Sınıfların Ek ÖzellikleriJavaScript'te Hata Yönetimi