ES6 modules nedir? Nasıl kullanılır?

ES5 de CommonJS ve AMD (Asynchronous module definition) gibi modül yapıları kullanılıyordu. Babel ile ES6 formatında yazılarak CommonJS,AMD ve SystemJS gibi modül yapıları kullanılabiliyor.

İlk olarak math.js adında bir dosya oluşturarak modülümüzü bu dosyanın içerisine ekleyelim.

export const pow = (x,y) => Math.pow(x,y);

Sonrasında main.js adında bir dosya oluşturup math.js dosyamızı çağıralım.

import { pow } from './math';

console.log(pow(5,2));

çıktı:
25

Math.pow fonksiyonunu pow isminde bir fonksiyona atayıp export ile math.js dosyasından çağırılabilir yaptık. Ve sonrasında main.js dosyasında import ile math.js dosyasını çağırarak süslü parantezler içerisinde fonksiyon olarak ekleyip kullanılabilir olmasını sağladık.

Birden fazla fonksiyon ve değerle ilgili bir örnekle devam edelim.

math.js dosyası:

const topla = (x,y) => x + y;

const cikar = (x,y) => x - y;

const isim = "math";

export { topla,cikar,isim };

main.js dosyası:

import { topla,cikar,isim } from './math';

console.log(topla(5,5));

console.log(cikar(5,5));

console.log(isim);

çıktı:
10
0
math

from parametresi ile modül dosya yolunu belirterek sağ tarafta istediğimiz fonksiyonları çağırabiliyoruz.

Şimdide as parametresi ile kullanımı görelim.

main.js dosyası:

import * as math from './math';

console.log(math.topla(5,5));

console.log(math.cikar(5,5));

console.log(math.isim);

çıktı:
10
0
math

* as parametresi ile modül içerisindeki tüm fonksiyon ve değişkenlerin math ile çağırılarak kullanılabilmesini sağladık.

Bir modülün tek bir geri dönüş değeri döndürmesini istiyorsak export parametresine default ekleyerek yapabiliriz.

math.js dosyası:

const math = {
  topla : (x,y) => x+y,
  cikar : (x,y) => x-y,
  isim  : "math"
}

export default math;

main.js dosyası:

import math from './math';

console.log(math.topla(5,5));

console.log(math.cikar(5,5));

console.log(math.isim);

çıktı:
10
0
math

Bu sefer math modülünü math from şeklinde math değişkeni ile kullanılabilir yaptık.

Aynı dosyada default dışında fonksiyon ve değerlerde dönebiliriz.

math.js dosyası:

const math = {
  topla : (x,y) => x+y
}

export const cikar = (x,y) => x-y;

export const isim = "math";

export default math;

main.js dosyası:

import math,{ cikar,isim } from './math';

console.log(math.topla(5,5));

console.log(cikar(5,5));

console.log(isim);

çıktı:
10
0
math

math değişkenine default olarak dönen değerler ve süslü parantezler içerisinde ise diğer değerleri değişkenlere aktardık.

as parametresi ile süslü parantezler içerisinde tanımladığımız değerleri farklı isimler ile kullanabiliriz.

main.js dosyası:

import { cikar as _ } from './math';

console.log(_(5,5));

çıktı:
0

Modüller içerisinde classlar ile ilgili bir örnek;

math.js dosyası:

class math {
    topla(x,y){
        return x+y;
    }
    cikar(x,y){
        return x-y;
    }
    get isim(){
        return "math";
    }
}

export default math;

main.js dosyası:

import math from './math';

const _ = new math;

console.log(_.topla(5,5));

console.log(_.cikar(5,5));

console.log(_.isim);

çıktı:
10
0
math

Birden fazla modülün kullandıldığı bir örnek;

nokta.js dosyası:

export default class nokta {
constructor(x,y){
this.x = x;
this.y = y;
}
}

uzaklik.js dosyası:

const uzaklik = (nokta1,nokta2) =>

      Math.sqrt(Math.pow(nokta2.x-nokta1.x,2) + Math.pow(nokta2.y-nokta2.y,2));

export default uzaklik;

main.js dosyası:

import nokta   from './nokta';

import uzaklik from './uzaklik';

const n1 = new nokta(5,5);

const n2 = new nokta(20,10);

console.log(uzaklik(n1,n2));

çıktı:

15

İki nokta arasındaki uzaklığı hesaplamayı sağlayan uzaklik modülünü ve nokta tanımlamayı sağlayan nokta modülleri ile basit bir örnek tanımladık.

Modül yapısının kullanımını basit örnekler ile anlatmaya çalıştım. Sonraki yazıda görüşmek üzere.