Ecmascript 6 Modül Sistemi

Kategori: Javascript Dersleri, Node Js, React Js | 0

Merhaba arkadaşlar, bu gün ecmascript 6’da modül sistemini inceleyeceğiz. Ecmascript 6 hakkında bilginiz yoksa ilk makalemi incelemenizi öneririm. React kodu yazarken çok fazla kullanacağımız için önceden iyi şekilde öğrenmeliyiz.

Modül Oluşturma

Öncelikle bir modül dosyası oluşturalım ve adını myModule yapalım. Modül dosyamızın içerisinde bir modül oluşturalım ve export edelim.

cikar adında bir fonksiyon oluşturduk ve export anahtar kelimesi ile dışarıya aktardık. Export ile dışarıya aktarmazsanız yazdığınız fonksiyonu kullanamazsınız.

Şimdi bir index.js dosyası oluşturalım ve dışarıya aktardığımız fonksiyonu kullanalım.

Kodu ile myModule dosyamızdaki cikar adındaki fonksiyonumuzu Js dosyamıza dahil ediyoruz.

Fonksiyonumuzu Js dosyasına dahil ettikten sonra kullandık. Ekrana 1 değeri yazdırıldı.

Modülümüzde ki her fonksiyon için ” import { cikar } from “./myModule”; ” kodunu tekrar yazmamıza gerek yok. Aynı modülden daha fazla fonksiyon import etmek için;

olarak kullanabiliriz. Peki modülümüzde 100 tane fonksiyon varsa ne yapmamız lazım? Tek tek yazmalı mıyız? Tabii ki hayır.

olarak deger ismine bütün fonksiyonlarınızı atayabilirsiniz. Kullanmak için deger.birinciFonksiyon ,
deger.ikinciFonksiyon olarak ulaşabilirsiniz.

Varsıyılan Modül Belirleme

Modül yazarken default adında bir anahtar kelimemiz var. Default anahtar kelimesi varsayılan olarak modül belirtmeyi sağlıyor. Örneğin bir modül dosyamız var ve bu dosyamızda birden fazla fonksiyonumuz var. Biz bu modül dosyamızda varsayılan bir fonksiyon ataması yapabiliyoruz. Bir örnek ile açıklayayım.

myModule.js dosyamız

index.js dosyamız

Dikkat ederseniz ” kupAl ” fonksiyonunu süslü parantezler dışarısında kullandık. Modülden dışarıya aktardığımız default fonksiyon olduğu için istediğimiz ismi verebiliriz. Örneğin kupAl yerine sayininKupu olarak isimlendirip kullanabiliriz.

Default fonksiyonun bir farklı kullanımı bu şekilde. Şimdide topla fonksiyonunu dışarıya aktarıyoruz. Artık topla fonksiyonunu süslü parantezler dışarısında istediğimiz isimle tanımlayıp kullanabiliriz.

Modülü Tekrar İsimlendirme

Modül dosyamızda yazdığımız fonksiyonları dışarı aktardıktan sonra farklı bir isimde kullanmak isteyebiliriz. Bu durumda AS anahtar kelimesi devreye giriyor 🙂 Normal şartlarda modül dosyamızdaki fonksiyon ismi neyse import ederken de o ismi kullanmamız lazımdı. As anahtar kelimesi ile fonksiyonumuza takma ad vererek kullanabiliriz.

myModul dosyamızda kare adında bir fonksiyon oluşturduk. Bu fonksiyonu as anahtar kelimesi ile tekrar adlandırarak index.js dosyamızda kullanalım.

kare adındaki fonksiyonumuzun ismini kareAl olarak değiştirdik ve kullandık.

Çoklu Modül İsimlendirme

Modül dosyamızda birden fazla fonksiyon var ve hepsini kullanmanız gerekiyor. Bunlar tek tek yazmak yerine isimlendirmenin kısa bir yolu var. Ben pek tavsiye etmiyorum çünkü kod uzuyor ve karışıyor.

diyerek modül dosyanızda ki bütün modülleri degerIsmi olarak adlandırabilirsiniz. Fonksiyonlara ulaşmanız için degerIsmi.fonksiyonIsmi olarak kullanabilirsiniz.

Temiz Modül Yazma

Yukarıda birden fazla modül tanımlamadık şimdi bunları daha kısa ve okunabilir olarak nasıl tanımlayabiliriz ona bakalım.

Yazdığınız modülde değeri tek satır işlem yapıp return ediyorsanız bu şekilde kullanımı mevcut

Bu modül yukarıda tanımladığımız topla modülü ile aynı işlemi görmektedir. Bu ecmascript 6 ile yeni gelen bir özellik kullanabildiğiniz yerlerde kesinlikle kullanın. Gördüğünüz gibi süslü parantezler ve return anahtar kelimesini kullanmamıza gerek kalmadı ve modülün okunabilirliği arttı.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir