JavaScript’te Fonkisyon Kavramı

Öncelikle herkese merhaba, bugün sizlere JavaScript’te fonksiyon kavramını anlatmaya çalışacağım. Fonksiyonlar birçok programlama dilinde vardır ve programın yapı taşıdır diyebiliriz. Kodumuzu daha okunabilir, düzenli ve modüler hale getirmemize yardımcı olur. Daha sade bir şekilde açıklamak gerekirse fonkisyonlar, belirli bir işlemi ya da görevi olan kod yapılarıdır. Bu işlem çalışması gerektiğinde sadece yazılan fonksiyon çağrılır ve böylece defalarca aynı kodu yazmamıza gerek kalmaz. İlerleyen zamanlarda bir değişiklik yapmak istediğimizde ise gidip sadece o fonksiyonun içini değiştiririz ve böylece tek bir yerde yaptığımız değişiklik o fonksiyonun çağrıldığı her yeri etkilemiş olur. Son olarak fonksiyonlar tek bir işi yapmalıdır örneğin girilen sayının karesini almaksa görevi sadece kare almalıdır başka işlemleri dahil etmemeliyiz.

Fonksiyon Tipleri Nelerdir ?

JavaScript’te 3 tür fonksiyon vardır;
1) Function Decleration
2) Function Expression
3) Arrow Function (ES6)

Biz bugün daha çok Function Declaration ile Function Expression arasındaki farklara yoğunlaşacağız.

1.Function Declaration (Function Statement)

Function Declaration, adlandırılmış bir fonksiyonu tanımlar. Yani önce function keywordünü kullanırız ardından fonksiyonun adı ve sonra parametrelerin yazılacağı parantez açılır daha sonra fonksiyonun gövdesinde yapmasını istediğimiz işlemleri yazarız. Bir örnek yapacak olursak;

Yukarıdaki örnekte fonksiyonu tanımladık. Fonksiyonumuzun amacı parametre olarak gelen sayının karesini almak. Ancak fonksiyon oluşturmak bir işlem fonksiyonu çalıştırmak ayrı bir işlemdir.
5. satırda fonksiyonumuza parametre olarak 3 sayısını gönderdik ve çalıştırdık ancak bir şey göremedik.
6. satıra bakacak olursak fonksiyonumuza parametre olarak 5 sayısını gönderdik ve consol log içinde çağırdığımız için 25 değerini ekranda gördük.
7. satıra baktığımızda ise düz bir şekilde fonksiyonun kendisini print ettik. (Dikkat ettiyseniz çalıştırmadık yani parantezi açıp kapatmadık)

Function declaration, ile ilgili bahsedeceğim son şey ise hoisted bir şekilde davranmasıdır. Bu, bir fonksiyonun tanımlandığı yeri kodumuzun başına taşıdığı ve bu fonksiyona erğişim sağladığımızda tanımlandığı yerden önce kullanabileceğimiz anlamına gelir.

Yukarıdaki örnekte square fonksiyonunu, gördüğümüz gibi tanımladığımız yerden önce kullanabiliyoruz çünkü JavaScript engine, bu fonksiyonu kodun başına hoist ediyor.

2.Function Expression

Function Expression, bir fonksiyonun bir değişkene atanması veya başka bir ifadenin parçası olarak kullanılmasıdır. Yani bir function declaration’ı bir değişkene atıyorsak buna Function Expression denir. Genelde Function Expression yapısında fonksiyon ismi kullanmayız (optional) ve isim kullanmadığımız fonksiyona da Anonymous Function deriz. Bir örnek verecek olursak;

Yukarıdaki örnekte de gördüğümüz gibi biz anonymous fonksiyonu square değişkenine atıyoruz. Yani biz artık fonksiyona bir değişkene davrandığımız gibi davranabiliriz demektir. İşte buna First Class Functions deriz.

Yukarıdaki örneği incelediğimiz zaman biz artık fonksiyonları bir array veya object elemanı gibi kullanabiliyoruz.
myArr’in 2. elemanını çalıştırdığımız zaman Slipknot çıktısını alıyoruz
myObj’nin func elemanını çalıştırdığımızda direkt Queen çıktısını alıyoruz

Özetle; JavaScript’te fonksiyonlar Function Expression’da gördüğümüz gibi First Class Functions’dır. Biz bu fonksiyonları değişkenlere atabilir bir değişken ne yapıyorsa onu fonksiyonlarla da yapabiliriz.

JavaScript’in First Class Functions olmasının en büyük avantajlarından biri de bir fonksiyonu başka bir fonksiyona parametre olarak geçebiliyor olmamızdır. Bunu hemen bir örnek ile anlatmaya çalışalım.

Yukarıdaki örneğe baktığımızda addFive isminde bir fonksiyon tanımladık. Bu fonksiyon ilk parametre olarak num isminde bir sayı alıyor ikinci parametre olarak func adında bir fonksiyon alıyor. Daha sonra bu sayı ile fonksiyonun invoke edilmiş halini topluyoruz.
5. satırda addFive fonksiyonuna; birinci parametre olarak 10, ikinci parametre olarak 5 sayısını return eden bir fonksiyon yazıyoruz. Sonuç olarak ekranda 15 çıktısını görüyoruz. Yani özetle bir fonksiyonu başka bir fonksiyona parametre olarak geçmiş olduk bu da bizim açımızdan First Class Functions’ın en önemli özelliklerinden biridir.

First Class Functions’ların bizim açımızdan diğer önemli sonucundan biri de bir fonksiyonu bir başka fonksiyonun return ifadesinde de kullanabiliriz. Son olarak bunu da bir örnekle açıklayalım.

Yukarıdaki örneği biraz inceleyelim. myFunc isminde bir fonksiyon oluşturduk ve bu fonksiyon num isminde bir parametre alıyor. Daha sonra bu fonksiyonun toDouble isminde bir fonksiyonun return etmesini istiyoruz. toDouble fonksiyonu herhangi bir parametre almıyor ve bize (num * 2)’yi dönüyor. Buradaki önemli olan detay myFunc fonksiyonunun return olarak toDobule fonksiyonu dönmesidir.

7. satırda myFunc fonksiyonunu çalıştırdık ancak herhangi bir dönüş alamadık. 8. satıra baktığımızda ise bize içindeki toDouble fonksiyonunu döndüğünü görüyoruz.
9. satırda myFunc fonksiyonunu iki kere çalıştırdığımızda ise NaN hatası aldık. Bu gayet beklediğimiz bir sonuç çünkü myFunc fonksiyonuna parametre göndereceğimizi söyledik ve herhangi bir parametre göndermeden fonksiyonu çalıştırmaya çalışıyoruz.
10. satırda ise fonksiyonu iki kere çalıştırıp ilk fonksiyona 3 parametresi verdiğimizde ise 6 değerini aldık. (Birinci fonksiyonda parametre beklediğimiz için ilk fonksiyona 3 parametresini gönderdik)

Özetle; Biz myFunc fonksiyonunu bir kere çalıştırdığımızda toDouble fonksiyonunun kendisini return ediyor extra bir kez daha çalıştırdığımızda toDouble fonksiyonunu çalıştırıyor. Bizim burada asıl odaklanmamız gereken konu, First Class Functions sayesinde biz bir fonksiyon içerisinde başka bir fonksiyonu return edebiliyoruz.

IIFE (Immediately Invocable Function Expression)

IIFE, bir fonksiyonu tanımladıktan hemen sonra fonksiyonu çağırmak için kullanılır. Yani tanımladığımız fonksiyonu çağırmamıza gerek kalmadan, tanımlandığı yerde anında çalışan fonksiyonlardır. Bir örnek ile daha iyi anlaşılacağını düşünüyorum.

Soldaki normal Function Expression örneği herhangi bir sürpiz yok. Şimdi bir de sağdaki IIFE örneğine bakalım. Dikkat ettiyseniz 3. satırda fonksiyonun bittiği süslü parantezin yanında parantezleri açıp kapattık yani fonksiyonu çalıştırdık ve 15 çıktısını aldık. Fakat 6. satırda sum değişkenini ekrana yazdırmak istediğimizde undefined alıyoruz. Çünkü sum fonksiyonunu oluşturduk, çalıştırdık ve 15 sonucunu aldık. Artık değişkene atayabileceğimiz herhangi bir şey kalmadı yani değişken yapısı anlamsız hale geldi. Ee biz de o zaman değişkensiz yapalım ?

Yukarıdaki hataya baktığımızda “function statements require a function name” diyor. Ama biz Function Expression kullandık neden Function Statement diyor? Çünkü JavaScript engine’i function keywordünü görünce Function Statement olarak algılıyor. Hatırlarsanız Function Statement’in tanımını yaparken bir isim kullanmak zorunda demiştik. İşte bu yüzden böyle bir hata alıyoruz. Fonksiyonun başlangıcına ve sonuna normal parantez koyarak bundan kurtulabiliriz.

Evet arkadaşlar bugün sizlere JavaScript’in önemli konularından biri olan fonksiyon kavramını olabildiğince sade bir şekilde anlatmaya çalıştım. Umarım faydalı bir yazı olmuştur, iyi çalışmalar.

Referanslar;
1.Arin Yazılım
2.W3 Schools
3.MDN Web Docs