JavaScript Fonksiyonları ve Fonksiyon İfadeleri: Örneklerle Anlatım, fonksiyonların nasıl oluşturulduğunu, çağrıldığını ve kullanıldığını öğrenmenize yardımcı olan bir kaynaktır Bu eğitici kaynak, JavaScript'teki fonksiyon ifadeleri, anonim fonksiyonlar ve lambda fonksiyonları gibi konuları detaylı bir şekilde ele alır Ayrıca, örnekler üzerinden adım adım nasıl yapılacağına dair ayrıntılı açıklamalar sunar JavaScript'i anlamak ve tam olarak kullanmak isteyenler için çok faydalı bir kaynak olduğunu söyleyebilirim

JavaScript web programlama dillerinden biridir ve bu dilin temel öğelerinden biri fonksiyonlardır. JavaScript fonksiyonları, bir dizi talimatı gruplayan yapılardır ve bu talimatlar belirli bir işlevi yerine getirmek için kullanılır. Fonksiyonlar, kodun düzenli, tekrarlanabilir ve yeniden kullanılabilir olmasını sağlar.
Fonksiyon ifadeleri, değişkenlere atanabilen ve daha sonra çağrılabilen fonksiyonlardır. Bu fonksiyonlara değişken üzerinden erişilebilir ve bu sayede fonksiyonların daha verimli ve esnek bir şekilde kullanılması sağlanır.
Bu yazıda, JavaScript fonksiyonları ve fonksiyon ifadeleri hakkında detaylı bir anlatım yapılacaktır. Ayrıca, anonim fonksiyonlar, callback fonksiyonları, IIFE fonksiyonları ve arrow fonksiyonları gibi farklı türlerdeki fonksiyonlar üzerinde de durulacaktır. Bu farklı fonksiyon türleri, kodun okunaklılığını artırmak ve daha temiz ve anlaşılır bir kod yazmak için kullanışlıdır.
Fonksiyon Nedir?
Fonksiyonlar programlama dillerinin temel yapı taşlarından biridir ve JavaScript'te de oldukça sık kullanılırlar. Fonksiyonlar, belli bir görevi yerine getirmek üzere tasarlanan program parçalarıdır. Bu görevi tek başlarına ya da işlevsel olarak birlikte çalıştıkları diğer fonksiyonlarla birlikte yerine getirebilirler. Fonksiyonlar, programlama dillerinde sıklıkla yeniden kullanılabilir kod parçaları olarak kullanılırlar.
JavaScript'te fonksiyonlar, belirli bir adlandırmaya sahip kod blokları olarak kullanılırlar. Fonksiyonlar belirli bir kod bloğunu ya da bir işlevi yerine getirirler ve belirli bir isimle çağrılabilirler. Fonksiyonlar, belirli bir isimle çağrılmadan önce tanımlanmalıdırlar. Bir fonksiyon tanımlarken parametreler belirtilerek bu parametreler işlevlerine göre değişken olarak kullanılabilirler. Fonksiyonlar, sıklıkla tekrar kullanılmaları gereken kod parçaları için kullanılırlar ve daha okunaklı, anlaşılır ve kolay bakım yapılabilir kodlar yazılmasına yardımcı olurlar.
Fonksiyon İfadeleri
Fonksiyon ifadeleri, bir değişken içerisinde tanımlanmış bir fonksiyondur ve değişkene atanabilir. Bu sayede, fonksiyonu çağırmak için kullanılan isim yerine değişkeni çağırarak fonksiyonu çağırabiliriz. Fonksiyon ifadeleri, JavaScript'te oldukça yaygın olarak kullanılır ve birçok durumda kullanışlıdır.
Öncelikle, bir fonksiyon ifadesi oluşturmak için "function" anahtar kelimesi kullanılır, ardından fonksiyonun adı ve parantezleri belirtilir. Fonksiyon içerisindeki kod bloğu süslü parantezler ile belirtilir. Buna benzer bir örnek aşağıdaki gibidir:
let carpma = function(a, b) { return a * b;}
Yukarıdaki örnekte, "carpma" adlı fonksiyon ifadesi, iki parametre alır ve bu parametreleri çarparak sonucunu döndürür. Bu fonksiyon, gerektiği zaman "carpma" değişkeni ile çağrılabilir.
Fonksiyon ifadeleri, özellikle anonim fonksiyonlar gibi daha karmaşık durumlarda kullanışlıdır. Anonim fonksiyonlar, isim yerine direk olarak bir değişkene atanarak kullanıldığından fonksiyon ifadesi kullanımı oldukça yaygındır. Bir örnek hemen aşağıda yer almaktadır:
let topla = function(a, b) { return a + b;}let sonuc = topla(5, 3);console.log(sonuc); // 8
Yukarıdaki örnekte, "topla" adlı fonksiyon değişkeni, iki parametre alır ve bu parametreleri toplayarak sonucunu döndürür. "sonuc" adlı değişkene, "topla" fonksiyon değişkeni kullanılarak 5 ve 3 parametreleri geçilerek elde edilen sonuç atanır ve bu sonuç "console.log" metodu ile ekrana yazdırılır.
Fonksiyon ifadeleri, birçok durumda kullanılır ve programlama dilinin en önemli yapı taşlarından biridir. Bu yapı taşı sayesinde, karmaşık kodların daha anlaşılır ve düzenli hale getirilmesi mümkün olmaktadır.
Anonim Fonksiyonlar
Anonim fonksiyonlar, isimsiz olarak tanımlanan ve kendisi içinde çalışan bir fonksiyon türüdür. Bu fonksiyonlar, değişkenlere atanabilir, bir fonksiyonun argümanı olarak kullanılabilir veya bir objenin özelliği haline getirilebilir.
Genellikle, callback fonksiyonlarının hangi işlevleri yerine getirdiği belirsizse veya bir kereye mahsus küçük bir işlem yapacaksa anonim fonksiyon kullanılır. Bu fonksiyonların kullanım alanları arasında olay dinleyicileri, zamanlayıcılar, jQuery kodları, and URL işlemleri yer alır.
Anonim fonksiyonlar, diğer fonksiyon şekillerine oranla daha esnektir ve belirli amaçlara hizmet etmek amacıyla kullanılabilir. Ancak, kod okunabilirliğini azaltabilir ve herhangi bir parametre adı olmadığından, bu fonksiyonların ne yaptığı hakkında bilgi sahibi olmak zorlaşabilir.
Callback Fonksiyonlar
Callback fonksiyonları, bir fonksiyonun diğer bir fonksiyona argüman olarak iletilmesi ve çağrılması yoluyla kullanılır. Bu fonksiyonlar, uzun ve karmaşık fonksiyonları daha küçük parçalara bölmek için kullanılabilirler. Böylece, kodun okunabilirliği ve yeniden kullanılabilirliği artar. Ayrıca, callback fonksiyonlarının kullanımı, bir işlemin tamamlanmasını beklemek yerine, işlem tamamlandığında devam etmek için daha esnek bir yaklaşım sunar.
Örneğin, bir veritabanından veri almak için bir AJAX (Asynchronous JavaScript and XML) isteği yaparsanız, callback fonksiyonunu kullanarak verilerin yüklenmesi tamamlandığında çalışacak işlemler tanımlayabilirsiniz. Bu şekilde, verilerin yüklenmesi işlemi tamamlanmadan önce gereksiz veya hatalı işlemlere geçmekten kaçınırsınız.
Metot | URL | Parametreler |
---|---|---|
GET | https://example.com/api/data | {key: 'value'} |
Ayrıca, callback fonksiyonları, bir event'in (olayın) gerçekleşmesiyle çağrılan işlevleri tanımlamak için de sıkça kullanılır. Örneğin, bir butona tıklandığında çağrılacak bir fonksiyon tanımlamak için eventListener'ı kullanabilirsiniz.
document.getElementById('myButton').addEventListener('click', function() { console.log('Butona tıklandı!'); });
document.getElementById('myButton').addEventListener('click', myFunction);
Bu örneklerde görüldüğü gibi, callback fonksiyonları, bir fonksiyona argüman olarak iletilir ve çağrıldığı anda işlevi gerçekleştirir. Böylece, kodun okunaklılığı ve karmaşıklığı azaltılarak, daha kolay bakım yapılabilir ve daha hızlı bir şekilde geliştirme yapabilirsiniz.
IIFE Fonksiyonları
IIFE, JavaScript'te sıkça kullanılan bir fonksiyon ifadesi şeklidir. İsmi, “Immediately Invoked Function Expression” yani “Hemen Çalıştırılan Fonksiyon İfadesi”' dir. Bu fonksiyon ifadesi, bir fonksiyonu tanımlamak ve derhal çalıştırmak için kullanılır. Böylece, kodumuzda kullanılan değişkenler için ana kapsamda yer açılır ve global kapsama kirletilmesi önlenir.
IIFE fonksiyonları, genellikle bir dizi işlevi bir arada gruplamak ve güvenli bir şekilde saklamak için kullanılabilirler. Bu fonksiyonlar, öncelikle “closure” kavramına bağlı olduklarından, değişkenlerin özellikle hızlı bir şekilde tanımlanması gerektiğinde önemlidirler. IIFE fonksiyonları, bir işlevi hemen bir dizi işlem yürütmek için kullanmak gerektiğinde de kullanışlı bir tekniktir.
Aşağıdaki kod parçası, bir IIFE fonksiyonu örneği göstermektedir.
```(function() { var message = "Merhaba Dünya!"; alert(message);})();```
Yukarıdaki kodda, işlev kendi kendine çağrılır ve derhal çalıştırılır. Bu sayede, "message" değişkeni sadece IIFE fonksiyonu kapsamında kalır. Bu, diğer kodlarla karıştırılması veya diğer işlevlerle çelişkili olması ihtimalini azaltır ve daha güvenli bir kod yazımı sağlar.
IIFE fonksiyonları, düzenli işlevlerde olduğu gibi değişkenlere parametre de geçebilir. Ayrıca, bu fonksiyonlar dizi veya nesne gibi diğer veri yapıları da dönüştürebilirler.
Sonuç olarak, IIFE fonksiyonları, kodumuzda yer açmak ve global kapsama kirletmesini önlemek için kullanışlı bir tekniktir. Bu fonksiyonları kullanarak, kodumuz daha güvenli ve okunaklı hale getirebiliriz.
Arrow Fonksiyonlar
Arrow fonksiyonları, ok işareti (=>) ile tanımlanabilen kısa ve pratik fonksiyonlardır. Bu fonksiyonlar, karmaşık fonksiyon tanımlamalarını ve düzensiz kod akışlarını azaltarak kodun okunabilirliğini artırır.
Bir örnek olarak, normal fonksiyon tanımlamasında "function" kelimesi kullanılması gerekirken, arrow fonksiyonlarında ok işaretiyle tanımlama yapılır. Ayrıca, birden fazla parametre kullanılacaksa normal fonksiyonlarda parantez kullanılması gerekirken arrow fonksiyonlarında paranteze gerek yoktur.
Örneğin, aşağıdaki normal fonksiyon:
function topla(a,b) { return a + b;}
Aşağıdaki arrow fonksiyonuyla aynı işlevi görür:
const topla = (a,b) => a + b;
Arrow fonksiyonlarının bir diğer avantajı, kısa ve tek satırlık fonksiyonlar olmasıdır.
Örneğin, tek parametre alan ve yazının ilk harfini büyük harfe dönüştüren bir normal fonksiyon:
function ilkHarfBuyuk(yazi) { return yazi.charAt(0).toUpperCase() + yazi.slice(1);}
Aynı fonksiyonun arrow fonksiyonu versiyonu:
const ilkHarfBuyuk = yazi => yazi.charAt(0).toUpperCase() + yazi.slice(1);
Arrow fonksiyonları, kodun okunabilirliğini artırması ve pratik fonksiyon tanımlamalarıyla sıklıkla tercih edilmektedir.
Fonksiyonların Kullanımı ve Avantajları
Fonksiyonlar JavaScript'te oldukça önemli bir konudur ve kullanımı programlama dilinin vazgeçilmez bir parçasıdır. Fonksiyonların kullanımı kod tekrarını azaltır, daha okunaklı bir kod sağlar ve kodun bakımını kolaylaştırır. Bunun yanı sıra, fonksiyonlar başka bir fonksiyon içinde kullanılabilir ve programın daha karmaşık işlemler yapmasına olanak tanır.
Fonksiyonların bir diğer avantajı değişkenleri ve değerleri saklamak ve işlemleri gerçekleştirmektir. Fonksiyonlar aynı zamanda parametreler kullanarak birden fazla değeri alabilirler ve bir çıktı sağlayabilirler.
Örneğin, bir toplama fonksiyonu düşünelim:
Kod | Çıktı |
---|---|
function topla(a, b) { let sonuc = a + b; return sonuc; } let sayi1 = 5; let sayi2 = 10; let toplam = topla(sayi1, sayi2); console.log(toplam); // 15 | 15 |
Bu fonksiyon iki parametre alır, bunların toplamını hesaplar ve sonucu geri döndürür. Daha sonra aynı fonksiyon farklı değişkenlerle kullanılarak, çıktılar elde edilebilir.
Başka bir örnek olarak, hesap makinesi oluşturmak istediğimizde her bir işlem için ayrı ayrı kod yazmak yerine fonksiyonlar kullanarak kod tekrarını önleyebiliriz. Ayrıca programın okunaklı olmasını sağlamak için kod dosyasını da daha kısa hale getirebiliriz.
- Toplama işlemi için topla() fonksiyonunu kullanabiliriz.
- Çıkarma işlemi için cikar() fonksiyonunu kullanabiliriz.
- Çarpma işlemi için carp() fonksiyonunu kullanabiliriz.
- Bölme işlemi için bol() fonksiyonunu kullanabiliriz.
Bu şekilde fonksiyonları kullanarak programlama dosyasını kısa, okunaklı ve kolay bakım yapılabilir hale getirilebilir.
Kod Tekrarını Azaltma
Kod tekrarları sıkıcı ve zaman alıcı bir durumdur. Fonksiyonlar sayesinde aynı kodlar tekrar tekrar yazılmaktan kurtulunabilir ve daha az kod yazarak daha hızlı bir şekilde işlemler gerçekleştirilebilir. Örneğin, bir web sitesinde kullanıcıların profillerini görüntülemeleri için gereken kodları yazarken, her seferinde aynı kodları tekrar tekrar yazmak yerine, bu kodları bir fonksiyon içinde toplayarak kullanabilirsiniz.
Bu örnekte, kullanıcının profiline erişmek için kullanılan kodu bir fonksiyon içinde yazabilirsiniz:
Fonksiyon Adı | Açıklama |
getUserProfile() | Bu fonksiyon kullanıcının profiline erişmek için gereken kodları içerir. |
Bu fonksiyonu yazarak, aynı işi yapmak için her defasında daha az kod yazmanız mümkündür. Ayrıca, kod tekrarı azaltılarak daha az hata yapabilme ve kodun okunabilirliğinin artması gibi avantajlar da sağlanmış olur.
Bir başka örnek olarak, bir web uygulamasında kullanıcının girdiği verileri kontrol etmek için kullanılan kodlarda da fonksiyonlar kullanılabilir. Örneğin, kullanıcı adının boş olup olmadığını kontrol eden bir fonksiyon yazabilirsiniz:
Fonksiyon Adı | Açıklama |
checkUsername(username) | Bu fonksiyon kullanıcının girdiği kullanıcı adının boş olup olmadığını kontrol eder. |
Bu fonksiyonu yazdıktan sonra, her seferinde kullanıcı adını kontrol etmek için aynı kodları tekrar yazmak yerine, bu fonksiyonu kullanarak daha az kod yazmanız mümkündür. Bu sayede, kodunuz daha az yer kaplar, daha anlaşılır hale gelir ve daha kolay bakım yapabilir hale gelir.
Kodun Okunabilirliği ve Bakımı
Kodun okunabilirliği ve bakımı, yazılım geliştirme sürecinde oldukça önemlidir. Kodun okunabilirliği, kodun ne yaptığını ve nasıl yapıldığını anlamak için gerekli olan kolaylık ve anlaşılırlıktır. Aynı şekilde, bakım, yazılımın ileride güncellenebilir olmasını sağlar. Fonksiyon kullanımı, kodun okunabilirliğini ve bakımını kolaylaştırır.
Bir fonksiyon, belirli bir görevi yerine getiren, birkaç satırdan oluşan kod bloğudur. Fonksiyonlar, kodun tekrar kullanımını kolaylaştırır ve kodun okunabilirliğini artırır. Birden fazla yerde kullanılacak işlem kodlarını bir fonksiyon içinde toplamak, ilgili yerlerde sadece bir fonksiyon çağrısı yaparak işlem yapma imkanı sağlar. Bu durumda, fonksiyon değiştikçe, sadece fonksiyonun çağrıldığı yerlerde değişiklik yapmak yeterlidir.
Kodun okunabilirliği artırarak, diğer geliştiriciler tarafından kolaylıkla anlaşılması mümkün hale gelir. Bu durumda, diğer geliştiriciler, kodun anlaşılması için fazla zaman harcamak zorunda kalmazlar ve kod üzerinde çalıştıkları sürece, kolaylıkla kodu anlayıp sonraki aşamalara geçebilirler.
Bununla birlikte, fonksiyonların kullanımı, kodun bakımını da kolaylaştırır. Fonksiyonların içindeki kod blokları, bağımsız birimler olarak ele alınır. Bu nedenle, fonksiyon içinde değişiklik yapmanın, kodun geri kalanına etkisi minimum düzeydedir. Ayrıca, kodun parça parça ayrılması, bakım maliyetlerini de azaltır. Kodun değiştirilmesi gerektiğinde, bu fonksiyonlar bağımsız bir şekilde değiştirilebilir. Bu sayede, kodun sürekli olarak gelişiminde, fonksiyonel bakımdan kritik olan parçaların hızlı bir şekilde bakımı yapılabilir.
Özetle, fonksiyon kullanarak, kodun tekrar kullanımını, yeniden düzenlenmesini, kolay okunmasını ve bakımını mümkün hale getirir.