ES6+ ile Gelen Module Yapısı Kullanımı, JavaScript kodlarınızın daha etkili ve kolay bir şekilde yönetilmesini sağlar Yeni module yapısı ile kodlarınızı modüler hale getirebilir ve farklı dosyalar arasında kolayca paylaşabilirsiniz Bu yazıda, ES6+ module yapısının kullanımını detaylı bir şekilde ele alıyoruz Kod yazarken zaman kazanmak istiyorsanız, mutlaka okumalısınız!

JavaScript dilinde, son yıllarda önemli gelişmeler yaşanmıştır. ES6+ sürümü ile birlikte, modül yapısı kullanımı önemli bir yenilik olarak karşımıza çıkmıştır. Bu yapı sayesinde, kodların farklı dosyalarda organize edilip, birbirleriyle etkileşim içerisine girmesi kolaylaşıyor ve kod yazımı daha verimli hale geliyor.

ES6+ ile birlikte gelen modül yapısı, birden çok dosyada organize edilen kodları bir araya getirir ve dışa aktarılan değerleri belirler. Modül import ve export işlemleri ise, farklı dosyalarda bulunan kodların birbirleriyle ilişkilendirilmesini sağlar. Bu sayede kod okunurluğu artarken, tekrar kullanılabilirlik ve bakım kolaylığı da sağlanır.

ES6+ Modül Sistemi Nedir?

ES6+ modül sistemi, JavaScript dilindeki önemli gelişmelerden biridir. Bu sistem, kodların birden fazla dosyada saklanarak daha organize edilmesini sağlar. Farklı dosyalarda bulunan kodlar, import ve export işlemleri kullanılarak birbiriyle etkileşimli hale getirilir.

Bu sayede, büyük projelerde dosyalar ve kod blokları arasında geçiş yapmak daha kolay hale gelir. Modül sistemi, kod tekrarını azaltır ve programcıların kodları daha kolay yönetebilmelerini sağlar.

Modül İmport ve Export İşlemleri

ES6+ modül yapısı, farklı dosyalarda bulunan JavaScript kodlarını bir araya getirerek, merkezi bir yerden yönetilmesini sağlar. Modül yapısı, JavaScript projelerinde modüler programlamayı kolaylaştırır. Bu sayede, kodlar daha okunaklı, sürdürülebilir ve değiştirilebilir hale gelir.

Bir modülün diğer bir modül tarafından kullanılabilir yapılabilmesi için export edilmesi gerekmektedir. Export işlemi, modül içinden dışarıya bir veya birden fazla değerin gönderilmesi anlamına gelir. İki ana export türü vardır: named export ve default export.

• Named Export: Bu export türü, bir modülden birden çok değerin dışa aktarılmasına izin verir. Dışa aktarılan değerlerin import edildiği yerde, ilgili adlarının kullanılması gerekmektedir.
• Default Export: Bu export türü, bir modülün sadece bir değerinin dışa aktarılmasına izin verir. Dışa aktarılan değer, modül adını taşır ve import edildiği yerde, farklı bir isim altında kullanılabilir.

Bir modülü kullanabilmek için öncelikle import etmek gerekmektedir. Import işlemi, kullanılacak modülün dosya yolunu ve dışa aktarılan değeri içerir.

ES6+ modül yapısı sayesinde, kodların daha düzenli ve okunaklı hale gelmesi sağlanır. Modüler programlama, büyük projelerde daha iyi bir organizasyon ve daha kolay yönetim sağlar.

Named Export Kullanımı

ES6+ modül yapısında, bir modülden birden çok değerin dışa aktarılması için named export kullanılır. Named export, export anahtar kelimesiyle birlikte, dışa aktarılacak olan değerlerin adları belirtilerek kullanılır.

Yukarıdaki örnekte, add ve multiply fonksiyonları bir arada named export kullanılarak dışa aktarılmıştır. Bu iki fonksiyon, import işlemi yapıldıktan sonra ilgili adlarla kullanılabilir. Örneğin:

import { add, multiply } from './example.js';console.log(add(2,4), multiply(2,4));

Bu kodda, example.js dosyasındaki add ve multiply fonksiyonları import edilmiş ve bu fonksiyonlar kullanılarak console'a değer yazdırılmıştır.

Named export kullanımı aynı zamanda bir modülden birden çok fonksiyonun veya değişkenin dışa aktarılmasını sağlar. Böylece, farklı dosyalarda kullanılması gereken değerler tek bir yerden export edilebilir ve bu değerler farklı adlar altında kullanılabilir.

Tablo: Named export kullanımında dikkat edilmesi gereken noktalar:

Adım	Açıklama
1	Dışa aktarılacak değerlerin belirlenmesi
2	Değerlerin export anahtar kelimesiyle birlikte adları belirtilerek dışa aktarılması
3	Kullanılacak dosyanın import edilmesi
4	Dışa aktarılan değerlerin, import edildikleri dosyada kullanımı

Örnek Kullanım:

ES6+ modül yapısı, JavaScript'teki kodların daha örgütlü ve etkileşimli hale gelmesini sağlayan önemli bir gelişmedir. Bu yapıyla birlikte, farklı dosyalardaki kodlar tek bir yerde birleştiriliyor ve farklı dosyalar arasında kolayca etkileşim kurulabiliyor.

Modül yapısı, import ve export işlemleri aracılığıyla kullanılır. İki ana export türü olan named export ve default export, birçok farklı değerin dışa aktarılmasına izin verir. Örneğin, export const add = (a, b) => a + b; export const multiply = (a, b) => a * b; kodları ile named export kullanarak, add ve multiply fonksiyonları dışa aktarılabilir. Bu fonksiyonlar import edildiğinde, ilgili değerin adı kullanılarak herhangi bir dosyada kullanılabilir.

Örnek Kullanımın Açıklaması:

Bu örnekte, named export kullanılarak dışa aktarılan add ve multiply fonksiyonları, başka bir dosyada import edilerek kullanılabilir hale getirilmiştir. Örneğin, aynı proje içinde başka bir dosyada bu fonksiyonları kullanmak istediğimizde, sadece import işlemi yaparak ve fonksiyon adlarını kullanarak bu fonksiyonları kullanabiliriz.

Özellikle büyük projelerde, kodu farklı dosyalara bölmek, düzenli bir yapı oluşturmak ve daha okunaklı hale getirmek için modül kullanımı oldukça önemlidir. Ayrıca, modül yapısı kullanarak, her fonksiyonun her yerde kullanılabilir olmasından ziyade sadece ilgili yerlerde kullanılabilir olmasını sağlamış oluruz. Bu da, daha güvenli bir kod yazımı işlemine yardımcı olur.

Default Export Kullanımı

ES6+ modül yapısı, birçok modülü bir araya getirerek proje kodlarını daha düzenli ve anlaşılır bir hale getirir. Modül yapısı içerisinde yer alan default export, bir modülün tek bir değerinin dışa aktarılmasına izin verir. Bu değer, modülün adını taşır ve import edildiği dosyada farklı bir isim altında kullanılabilir.

Default export kullanımı, adından da anlaşılacağı gibi, standart bir nitelik taşıyan tek bir değeri dışa aktarmak için kullanılır. Bir modüle bu işlevi kazandırmak için export default anahtar kelimesi ile birlikte, dışa aktarılacak değerin adı belirtilir.

Mesela, bir kullanıcı adını açıklayan bir değişkeni dışa aktarmak isterseniz, şu şekilde bir kod yazabilirsiniz:

Example Code:	const username = 'JohnDoe'; export default username;

Bu kodun çalıştırılmasının ardından, username değişkeni default export olarak dışa aktarılır ve farklı bir isimle kullanılabilir hale gelir. Örneğin, başka bir dosyada import işlemi yaparak ve farklı bir isimle değişkene atama yaparak kullanabilirsiniz:

Example Usage:	import user from './example.js'; console.log(user); //JohnDoe

Bu şekilde, default export kullanarak farklı modüller arasında veri paylaşmak ve erişmek daha kolay hale gelir.

Örnek Kullanım:

‘Merhaba Dünya’; export default message;

Bu örnek kullanımda, message değeri const kullanılarak tanımlanmış ve default export ile dışa aktarılmıştır. Bu şekilde, başka bir dosyada farklı bir isimle kullanılabilmektedir. Örneğin, bu modülün import edildiği dosyada aşağıdaki gibi kullanılabilir:

import greetingMessage from './example.js';

console.log(greetingMessage);

Bu kod bloğunda, example.js dosyasından default export edilen değer greetingMessage değişkeninde tanımlanarak, console'da 'Merhaba Dünya' yazdırılmıştır. Bu örnekte, default export'un kullanımı bir değişkenin dışa aktarılması üzerine yapılmıştır ancak fonksiyon, sınıf, nesne veya modül de default export ile dışa aktarılabilir.

Merhaba Dünya

Günümüzde, web geliştirme ve programlama dünyasında JavaScript oldukça yaygın bir şekilde kullanılmaktadır. ES6+ ile birlikte birçok yenilik getirilmiş ve bu da JavaScript kodları yazarken daha kolay ve etkili olmayı sağlamıştır.

ES6+ modül yapısı ise, JavaScript'te organize edilen kodları bir araya getirerek, birden fazla dosya üzerinde çalışmayı kolaylaştıran bir gelişmedir. Bu modüller sayesinde, programcılar kodlarını daha modüler bir şekilde organize edebilirler.

Modüllerin kullanımı, farklı dosyalar arasındaki etkileşimi sağlar. Bir modülü import ederek kullanılabilir hale getirmek için export edilmesi gerekir. İki ana export türü vardır: named export ve default export.

Modüllerin kullanımı sayesinde, JavaScript kodlarının okunabilirliği ve yeniden kullanılabilirliği artmıştır. Bu sayede, kod yazma sürecinde zaman ve emek tasarrufu sağlanmaktadır. Bu nedenle, ES6+ modül yapısı yeni başlayanlar dahil olmak üzere tüm programcılar tarafından öğrenilmesi önerilir.

; export default message;

Modüllerin export işlemi yapılırken, tek bir değerin dışa aktarılması da mümkündür. Bu işlem default export kullanılarak gerçekleştirilir. Modülün default export edilen değeri, import edildiği dosyada farklı bir isim altında kullanılabilir.

Default export işlemi yapılırken, bir değişkenin ataması yapılarak export edilebilir. Bu değer modülün adını taşır ve kullanımı sırasında farklı bir isimle değiştirilebilir.

const message = 'Merhaba Dünya'; export default message;

Bu örnekte, message adlı değişken, default export kullanılarak dışa aktarılmıştır. İmport işlemi yapıldığı dosyada farklı bir isim ile çağrılabilir.

Örnek Kullanımın Açıklaması:

Bu örnekte, default export kullanarak message değeri dışa aktarılmıştır. Default export, bir modülün yalnızca tek bir değerinin dışa aktarılmasını sağlar ve dışarı aktarılan değer, modül adı yerine farklı bir isimle kullanılabilir.

Mesela, message modülü farklı bir isimle kullanılabilir:

Örnek Kullanım	Açıklaması
import myMessage from './example.js';	message değeri myMessage olarak kullanılabilir.

Kullanım sırasında farklı bir isimle kullanım, default export yapısının esnekliğini artırarak modül yapısında daha düzenli bir yapı sağlar.

Modül Kullanımı

ES6+ ile gelen modül yapısı, birden çok dosyada organize edilen kodları bir araya getirerek, farklı dosyalar arasında etkileşimli hale getiriyor. Ancak, modülleri kullanmadan önce import işlemi gerçekleştirilmesi gerekiyor. Import işlemi, kullanılacak modülün dosya yolunu ve dışa aktarılan değeri içerir. Bu sayede, modüller doğru şekilde kullanılabilir hale gelir.

Örneğin, önceki bölümde belirtildiği gibi, örnek.js dosyasından add ve multiply fonksiyonları import edilebilir:

Örnek Kod	Açıklama
import { add, multiply } from './example.js';	example.js dosyasından add ve multiply fonksiyonları import edilir.
console.log(add(2,4), multiply(2,4));	Import edilen fonksiyonlar kullanılarak, console üzerinde sonuçlar yazdırılır.

Bu işlem sayesinde, farklı dosyalarda bulunan kodlar bir araya getirilerek, daha düzenli ve okunaklı kodlar oluşturulabilir. Modüllerin kullanımı, JavaScript kodlarının yeniden kullanılabilirliğini ve bakımının kolaylaştırılmasını sağlar.

Örnek Kullanım:

Bir modülü kullanmak için önce import edilmesi gerekmektedir. Bu işlem yukarıda belirtildiği gibi file path ve dışa aktarılan değeri içermektedir. Aşağıdaki örnek kodda, example.js dosyasında yer alan add ve multiply fonksiyonları import edilmiştir.

File Path	Dışa Aktarılan Değer
'./example.js'	add, multiply

Import işlemi tamamlandıktan sonra, kullanılacak fonksiyonlar ilgili değişken ismiyle çağrılabilir. Aşağıdaki örnekte, add ve multiply fonksiyonları kullanılarak console'a yazdırılan sonuçlar görülebilir.

Çıktı
6 8

Bu örnek, modül yapısının kullanımını açıklayan örneklerden sadece biridir. ES6+ ile gelen modül yapısı, JavaScript kodlarını daha kolay yönetebilmenizi sağlar ve büyük projelerde işlevselliği artırır.

Örnek Kullanımın Açıklaması:

Bu örnekte, example.js dosyasındaki add ve multiply fonksiyonları import edilerek kullanılmıştır. İlk olarak, öncelikle kullanılacak modül import edilir:

Örnek:	import { add, multiply } from './example.js';

Bu şekilde, example.js dosyasında bulunan add ve multiply fonksiyonları import edilir. Daha sonra, bu fonksiyonlar kullanılarak console'a değer yazdırılır:

Örnek:	console.log(add(2,4), multiply(2,4));

Bu örnek kullanımda, add fonksiyonuna 2 ve 4 parametreleri verildiği için bu fonksiyon 2 + 4 = 6 değerini döndürür. Aynı şekilde, multiply fonksiyonuna verilen parametreler 2 ve 4 olduğunda bu fonksiyon 2 x 4 = 8 değerini döndürür. console.log fonksiyonu ile bu iki değer yan yana yazdırılır ve Sonuç olarak 6 8 olarak çıktı elde edilir.