JavaScript: Yüksek Mertebe Fonksiyonlar(Higher Order Functions)

By Tahir Kardak Last updated Feb 16, 2021

Merhaba bu yazımda Javascript içerisinde bulunan; önemli konseptlerden biri olan Yüksek Mertebe(Higher Order) Fonksiyonlardan bahsedeceğim.

Image for post — Yüksek Mertebe Fonksiyonlar

Yüksek Mertebe Fonksiyonlar: Parametre olarak başka bir fonksiyonu alan ve/veya sonuç olarak başka bir fonksiyonu dönen fonksiyonlardır.

Yüksek Mertebe Fonksiyonlar çoğunlukla; yaygın olarak yer alan problemlerin soyutlanmasında kullanılır. Türkçesi Yüksek Mertebe Fonksiyonlar, soyutlamaların yapılmasına olanak sağlayarak,biz geliştiriciler için fonksiyon API’leri oluşturulmasında yardımcı olurlar. Array.prototype.forEach() API’si Yüksek Mertebe Fonksiyonudur. Yazılımcı dizinin her bir elamanın dizi içerisinde nasıl döngü yapıldığını bilmeden, bu döngü esnasında dizinin elemanları ne yapılması gerektiğini söyleyebilir. forEach Yüksek mertebe fonksiyonu ile dizin elemanları üzerinde gezme durumu soyutlanmıştır. Sadece çalışma mantığını bilmek yeterlidir. Benzer şekilde yazılımcı ihtiyacına göre kendi forEach metodunu yazabilir.

Sayısal bir parametre alıp fonksiyon dönen, Yüksek Mertebe Fonksiyon için aşağıdaki örneğe yakından bakalım:

bakalım:



//es6 dan Ã¶nce
function buyuktur(n){
   return function(m){
    return m>n
   }
}

//es6
function buyukturES6(n){
return m=> m>n
}

//es6 ikinci yÃ¶ntem
const buyukturES6_2 = (x)=>(y)=>(x>y);

// kullanÄ±mÄ±

//1. kullanÄ±m Åekli
let onIkidenBÃ¼yÃ¼ktÃ¼r= buyuktur(12);
console.log("13 sayÄ±sÄ± 12'den bÃ¼yÃ¼k mÃ¼?-->"+ onIkidenBÃ¼yÃ¼ktÃ¼r(13));


let onIkidenBÃ¼yÃ¼ktÃ¼rES6= buyukturES6(12);
console.log("ES6 ile 13 sayÄ±sÄ± 12'den bÃ¼yÃ¼k mÃ¼?-->"+ onIkidenBÃ¼yÃ¼ktÃ¼rES6(13));

//2. kullanÄ±m Åekli
console.log("11 sayÄ±sÄ± 10'den bÃ¼yÃ¼k mÃ¼?-->"+ buyuktur(10)(11));
console.log("ES6 ile 11 sayÄ±sÄ± 10'den bÃ¼yÃ¼k mÃ¼?-->"+ buyukturES6(10)(11));

console.log("Es6 2. versiyon. 5 sayÄ±sÄ± 2 den bÃ¼yÃ¼k mÃ¼? -->" + buyukturES6_2(5)(4))

//es6 dan Ã¶nce

function buyuktur(n){

return function(m){

return m>n

}

//es6

function buyukturES6(n){

return m=> m>n

}

//es6 ikinci yÃ¶ntem

const buyukturES6_2 = (x)=>(y)=>(x>y);

// kullanÄ±mÄ±

//1. kullanÄ±m Åekli

let onIkidenBÃ¼yÃ¼ktÃ¼r= buyuktur(12);

console.log("13 sayÄ±sÄ± 12'den bÃ¼yÃ¼k mÃ¼?-->"+ onIkidenBÃ¼yÃ¼ktÃ¼r(13));

let onIkidenBÃ¼yÃ¼ktÃ¼rES6= buyukturES6(12);

console.log("ES6 ile 13 sayÄ±sÄ± 12'den bÃ¼yÃ¼k mÃ¼?-->"+ onIkidenBÃ¼yÃ¼ktÃ¼rES6(13));

//2. kullanÄ±m Åekli

console.log("11 sayÄ±sÄ± 10'den bÃ¼yÃ¼k mÃ¼?-->"+ buyuktur(10)(11));

console.log("ES6 ile 11 sayÄ±sÄ± 10'den bÃ¼yÃ¼k mÃ¼?-->"+ buyukturES6(10)(11));

console.log("Es6 2. versiyon. 5 sayÄ±sÄ± 2 den bÃ¼yÃ¼k mÃ¼? -->" + buyukturES6_2(5)(4))

Büyüktür fonksiyonları (4. 11. 16. satır) bir parametre alan bir fonksiyonlar. Fonksiyonlara verilen parametre içeri de bulunan diğer bir fonksiyonun içinde kullanılıyor ve geriye bir parametre alan başka bir fonksiyon dönüyor. Bu dönen fonksiyona verilen parametre ile önceki parametre ile işleme tabi tutulup sonuç dönülüyor. Oluşturulan bu fonksiyon 2 farklı şekilde kullanılabilir. 21. satırda buyuktur fonksiyonundan dönen değer onIkidenBüyüktür değişkenine atanıyor. Dönen değer bir fonksiyon olduğundan, onIkidenBüyüktür değişkeni de fonksiyon oluyor. 22 satırda yeni parametresi ile çalıştırılıp sonuç konsola yazılıyor. Diğer bir yöntem ise 29. satırda olduğu gibi fonksiyona parametreler ayrı ayrı parantezler içerisinde geçilmesi şeklindedir.

Not: Makalenin ilerleyen bölümlerindeki örnekleri ES6 söz dizimi ile yazacağım

Parametre olarak fonksiyona alan aşağıdaki yüksek mertebe fonksiyona yakından bakalım.



// parametre olarak fonksiyon alan yÃ¼ksek mertebe fonksiyon
const enKucukDegeri10IleCarp=(f) => (...sayilar) => (10 * f(...sayilar));

// 1. yÃ¶ntem
const enKucukDegerFonk = enKucukDegeri10IleCarp(Math.min);
console.log("SonuÃ§:" + enKucukDegerFonk(5,4,1,3));

// 2. yÃ¶ntem

console.log("Sonuc2:" + enKucukDegeri10IleCarp(Math.min)(5,4,2,8));

// parametre olarak fonksiyon alan yÃ¼ksek mertebe fonksiyon

const enKucukDegeri10IleCarp=(f) => (...sayilar) => (10 * f(...sayilar));

// 1. yÃ¶ntem

const enKucukDegerFonk = enKucukDegeri10IleCarp(Math.min);

console.log("SonuÃ§:" + enKucukDegerFonk(5,4,1,3));

// 2. yÃ¶ntem

console.log("Sonuc2:" + enKucukDegeri10IleCarp(Math.min)(5,4,2,8));

4. satırda enKucukDegeri10IleCarp fonksiyonu parametre olarak bir fonksiyon alacak ve bu parametre fonksiyonu, sonuç olarak dönülen fonksiyonda kullanılacak şekilde ayarlanıyor. İlk fonksiyondan dönen diğer fonksiyon rest parameter tipinde parametre alan bir fonksiyon ve alınan bu parametreyi, bir önceki verilen fonksiyon ile işleyip sonuç dönüyor. 7. satırda enKucukDegeri10IleCarp fonksiyonuna Math.min fonksiyonu parametre olarak veriliyor. İşlemin sonunda dönen fonksiyon enKucukDegerFonk değerine atanıyor. 8. satırda bu fonksiyona minimum değeri bulunacak sayılar veriliyor(verilen sayılar liste değil rest parameter tipinde). En küçük değer bulunduktan sonra 10 ile çarpılıp ekrana yazılıyor.

Javascript’e buluanan ve en yaygın olarak kullanılan yüksek mertebe fonksiyonlara, Dizi (Array) nesnesinde bulunan; filter, map ve reduce’yi örnek verebiliriz. Yüksek mertebe fonksiyonları farkında olmadan kullanıyorsunuz.

Yüksek Mertebe Fonksiyonların avantajları:

Parametrelendirilebilir paralellik
Daha gelişmişmiş ve modüler program yazabilme
Ölçeklenebilir programlama
Özyineleme( Recursion)
Çoğu durumda sıfır çalışma zamanı maliyeti
Daha okunaklı kod yazma imkanı

Yukarıdaki saydığım özellikleri örneklerle anlatmaya çalışayım.

Örneğin elimizde var olan dizinin elemanlarını 10 ile çarpıp yeni bir dizide tutalım. Eğer Yüksek Mertebe Fonksiyon kullanmasaydık kodumuz aşağıdaki gibi olacaktı.



const dizi = [1, 2, 3, 4, 5];
const yeniDizi = dizi.map(item => item * 10);
console.log(yeniDizi);

const dizi = [1, 2, 3, 4, 5];

const yeniDizi = dizi.map(item => item * 10);

console.log(yeniDizi);

İkinci örnekte kodumuz daha sade ve okunaklı oldu. İkinci örnekte Array nesnesinde bulunan Yüksek Mertebe Fonksiyon olan map fonksiyonu item=>item*10 arrow fonksiyonunu alıp dizinin her bir elamanını 10 ile çarpıp yeni bir dizi dönüyor.

Fonksiyon Birleştirme (Function composition) İşlemi:

Yüksek Mertebe Fonksiyonlar sayesinde birden çok fonksiyonu zincirleme şeklinde birleştirip, daha kolay okunabilir, test edilebilir, ve modüler bir kod yazabiliriz.

Verilen kişiler listesinde; Ankaralı ve cinsiyeti erkek olan kişilerin yaşların toplamını bulmak istersek; Array nesnesinde bulunan filter, map ve reduce fonksiyonlarını, oluşturacağımız yeni fonksiyonlarla birleştirerek işlemimizi yapabiliriz.



const kisiler = [
{name: "Ali", cinsiyet: "E",yas: 35, dogumYeri: "Ankara"},
{name: "AyÅe", cinsiyet: "K",yas: 26, dogumYeri: "Manisa"},
{name: "Mehmet", cinsiyet: "E",yas: 15, dogumYeri: "Ankara"},
{name: "Gonca", cinsiyet: "K",yas: 30, dogumYeri: "Adana"},
{name: "Ahmet", cinsiyet: "E",yas: 25, dogumYeri: "Ankara"}
];
const ankaraliMi = x => x === "Ankara";
const erkekMi = (x,y) =>  x === "E" ? y : 0;
const toplam = (x,y) => x+y;


const ankaraliErkelerinYaslarToplami = kisiler.filter(x => ankaraliMi(x.dogumYeri))
                                              .map(y => erkekMi(y.cinsiyet, y.yas))
                                              .reduce( (z,a) => toplam (z,a),0);



console.log(ankaraliErkelerinYaslarToplami);

const kisiler = [

{name: "Ali", cinsiyet: "E",yas: 35, dogumYeri: "Ankara"},

{name: "AyÅe", cinsiyet: "K",yas: 26, dogumYeri: "Manisa"},

{name: "Mehmet", cinsiyet: "E",yas: 15, dogumYeri: "Ankara"},

{name: "Gonca", cinsiyet: "K",yas: 30, dogumYeri: "Adana"},

{name: "Ahmet", cinsiyet: "E",yas: 25, dogumYeri: "Ankara"}

];

const ankaraliMi = x => x === "Ankara";

const erkekMi = (x,y) => x === "E" ? y : 0;

const toplam = (x,y) => x+y;

const ankaraliErkelerinYaslarToplami = kisiler.filter(x => ankaraliMi(x.dogumYeri))

.map(y => erkekMi(y.cinsiyet, y.yas))

.reduce( (z,a) => toplam (z,a),0);

console.log(ankaraliErkelerinYaslarToplami);

10. satırda kendisine verilen ifadenin Ankara olup olmadığını kontrol eden bir fonksiyon tanımladık. 11. satırda kendisine verilen parametrelerden, ilk parametre E’ye eşit ise ikinci parametreyi dönen, değilse 0 değerini dönen fonksiyon tanımladık. 12. satırda verilen iki ifadeyi toplayan fonksiyon tanımladık. 15. satırdan itibaren daha önce tanımladığımız fonksiyonları sırası ile veriyoruz. 21. satırda hesaplama sonucunu ekrana yazdırıyoruz.

Yüksek mertebe fonksiyonları; React , Vue ve kısmende olsa Angular’da Yüksek Mertebe Component yaratmak için kullanabilirsiniz.

Fonksiyonel Programlamanın temel parçalarından biridir. Uygulamalarınızda kullandıkça güzelliklerini göreceksiniz.

Bir sonraki yazımızda görüşmek üzere

JavaScript