Bugün JavaScript, web sitesi geliştirmede büyük bir rol oynamaktadır. Ön uç geliştiriciler, etkileşimli web uygulamaları oluşturmak için JavaScript kullanır. Sonuç olarak, JavaScript geliştiricilerine olan talepte bir artış oldu.

Elbette, JavaScript yıllar içinde gelişti. ES6, dile birçok yeni özellik kazandırdı. Bunlardan biri, kodları JavaScript dosyaları arasında kolayca paylaşmanın bir yoludur.

JavaScript için işlev içe ve dışa aktarma, sizi daha iyi bir geliştirici yapacak yeni özelliklerdir. Bu özelliklerin nasıl çalıştığı aşağıda açıklanmıştır.

JavaScript Modülü Nedir?

JavaScript modülü, kullanmanız için bir kod koleksiyonu içeren bir JavaScript dosyasıdır. Modüller genellikle ayrı dosyalara yazılır ve import anahtar sözcüğü kullanılarak içe aktarılır. Daha sonra tekrar kullanabileceğiniz için zamandan ve emekten tasarruf sağlar.

Örneğin, hesaplaSum() adlı bir işleviniz varsa, onu başka bir dosyaya ekleyebilir ve JavaScript’i dışa ve içe aktarma işlevlerini sorunsuz bir şekilde kullanarak projenizin herhangi bir yerinde kullanılabilir hale getirebilirsiniz .

Modül kullanmanın faydalarından biri, kodunuzu düzenli tutmanıza yardımcı olmasıdır. Ayrıca kodunuzu daha yönetilebilir ve hata ayıklamayı kolaylaştırır.

Bir JavaScript dosyasını modül olarak kullanmak için HTML belgenizde type=”module” ile bir komut dosyası oluşturmanız gerekir .

<script type=”module” src=”fileName.js”></script>

İki tür modül vardır:

ECMAScript modülleri: standart JavaScript modülleri ve tüm büyük tarayıcılar tarafından desteklenir.

CommonJS modülleri: daha eskidir ve yaygın olarak desteklenmezler.

Burada ECMAScript Modüllerine odaklanacağız. Gerekirse, temel bilgileri tazelemek için JavaScript’e girişimize bakın.

JavaScript’te İşlevler Nasıl Dışa Aktarılır

JavaScript’te işlevler, kendi başlarına kullanılmalarının yanı sıra bağımsız değişken olarak iletilebilen birinci sınıf nesnelerdir. İşlevleri dışa aktarmak, bunları diğer programlara aktarmanın iyi bir yoludur. Yeniden kullanılabilir kitaplıklar oluşturmak istediğinizde de kullanılır.

JavaScript’te işlevleri dışa aktarma, dışa aktarma işlevi kullanılarak yapılır . Dışa aktarma işlevi, belirli bir işlevi başka bir dosya veya komut dosyası tarafından kullanılmak üzere dışa aktarır. Kendi işlevlerimizi dışa aktararak , lisans sorunları hakkında endişelenmeden bunları başka dosyalarda veya komut dosyalarında özgürce kullanabiliriz.

Dışa aktarma işlevini verimli bir şekilde kullanmanın iki yolu vardır . Bunları kod örnekleriyle ele alacağız.

Bir komut girdisinden sonra kullanıcının tam adını döndüren bir işleve sahip bir getPersonalDetails .js dosyanız olduğunu varsayalım . İşlev şöyle görünür:

function getFullName(fullName){

            fullName = prompt(‘What is your First Name’);

            console.log(fullName);

        }

Bu işlevi, yalnızca dışa aktarma anahtar sözcüğünü ve ardından işlevin süslü parantez içindeki adını kullanarak dışa aktarabilirsiniz. Şuna benziyor:

export {getFullName};

İkinci yöntem, işlevi bildirmeden hemen önce dışa aktarma anahtar sözcüğünü eklemektir.

export function getFullName (fullName){…}

İlk yöntemi kullanarak birden çok işlevi dışa aktarabilirsiniz. Bu, istenen işlevlerin adlarını küme parantezine dahil ederek yapılır. Fonksiyonlar virgülle ayrılır.

Örneğin: Diyelim ki getPersonalDetails .js dosyamızda üç fonksiyonunuz var – getFullName(), getEmail() , getDob() . Aşağıdaki kod satırını ekleyerek işlevleri dışa aktarabilirsiniz:

export {getFullName, getEmail, getDob};

JavaScript’te İşlevler Nasıl İçe Aktarılır

Bir modülü kullanmak için önce onu içe aktarmanız gerekir. Herhangi bir işlev, tam yol başvurusu kullanılarak içe aktarılabilir.

İşlevleri içe aktarmak oldukça basittir. JavaScript, kendi işlevlerinizi diğer dosyalardan içe aktarmak için yerleşik bir özelliğe sahiptir. Bu işlevlere diğer modüllerden erişmek istiyorsanız, yardımcı programlarınızın her biri için bir işlev bildirimi eklemek iyi bir fikirdir.

İçe aktarılacak bir işlev, orijinal dosyasında zaten dışa aktarılmıştır.

İçe aktarma anahtar sözcüğü işlevini kullanarak işlevleri farklı bir dosyadan içe aktarabilirsiniz. İçe Aktar , bir dosyanın veya modülün hangi bölümünün yükleneceğini seçmenize olanak tanır.

getFullName işlevimizi getPersonalDetails .js’den şu şekilde içe aktarırsınız :

import {getFullName} from ‘./getPersonalDetails.js’

Bu, bu işlevi mevcut dosyamızda kullanıma hazır hale getirecektir.

Birden çok işlevi içe aktarmak için, içe aktarılacak işlevler küme parantezlerine dahil edilir. Her biri virgül (,) ile ayrılır.

import {getFullName, getEmail, getDob} from ‘./getPersonalDetails.js’

İçe aktarma işlevini kullanmanın başka bir yolu daha vardır . Bu, belirli bir dosyadaki tüm dışa aktarmaları içe aktarmamızı sağlar. Sözdizimi olarak import * kullanılarak yapılır .

Aşağıdaki kod satırını ekleyerek getPersonalDetails .js dosyamızdaki tüm dışa aktarmaları içe aktarabilirsiniz :

import * as personalDetailsModule from ‘./getPersonalDetails.js’

Yukarıdakiler, personalDetailsModule adlı bir nesne oluşturacaktır.

Bu sadece bir değişken adıdır, ona herhangi bir isim verebilirsiniz.

Bu nesne, getPersonalDetails.js dosyamızdaki tüm dışa aktarmaları içerir. Fonksiyonlar bu nesnede saklanır ve herhangi bir nesne özelliğine eriştiğiniz gibi erişilebilir.

Örneğin, aşağıdaki kod satırını ekleyerek getFullName işlevine erişebiliriz.

personalDetailsModule.getFullName();

Dışa Aktarma Varsayılanı Nedir?

Dışa aktarma varsayılanı , olağanüstü bir dışa aktarma işlevidir. Bu, bir dosyadan yalnızca bir değişken dışa aktarılıyorsa kullanılır. Ayrıca bir dosya veya modül için bir geri dönüş değeri oluşturmak için kullanılır.

Aşağıda, varsayılan olarak getFullName işlevini kullandığımız bir örnek verilmiştir:

export default function getFullName (fullName){…}

Her modül veya dosyada varsayılan olarak birden fazla değere sahip olamazsınız.

Varsayılan olarak kullanılan bir İşlev farklı şekilde içe aktarılır. Varsayılan olarak kullanılan getFullName işlevimizi nasıl içe aktaracağınız aşağıda açıklanmıştır :

import fullName from ‘./getPersonalDetails.js’

İşte farklar:

İçe aktarılan fullName değerinin çevresinde küme parantezleri yoktur .

fullName burada sadece bir değişken adıdır. Varsayılan işlev ne olursa olsun değerini depolar.

JavaScript İşlevlerinizi Güçlendirin

JavaScript modülleri, JavaScript içe ve dışa aktarma işlevlerini kullanarak kodunuzun diğer bölümlerinde yeniden kullanılabilen kod parçalarıdır. Genellikle ayrı dosyalara yazılırlar ve import anahtar sözcüğü kullanılarak içe aktarılırlar. Modül kullanmanın faydalarından biri, kodunuzu düzenli tutmanıza yardımcı olmasıdır. Ayrıca kodunuzu daha yönetilebilir ve hata ayıklamayı kolaylaştırır.