JavaScript'te İşlevler Nasıl Körlenir?

Körlenmiş işlevler, JavaScript kodunuzu daha okunabilir ve anlamlı hale getirmenize yardımcı olabilir. Körleme tekniği, karmaşık mantığı daha küçük, kendi kendine yeten, daha yönetilebilir kod parçalarına ayırmak istediğinizde idealdir.

JavaScript'teki körleştirilmiş işlevler hakkında her şeyi öğrenin; oluşturmak için işlev körleştirme tekniğinin nasıl kullanılacağını öğrenin. kısmen uygulanan işlevlerin yanı sıra hem körleştirilmiş işlevler hem de kısmen uygulanan gerçek hayattaki kullanım durumları işlevler.

Körleme Nedir?

Currying, adını matematikçi Haskell B. Curry ve kavram Lambda hesabından türetilmiştir. Currying, birden fazla parametre alan bir fonksiyonu alır ve onu bir dizi tekli (tek parametreli) fonksiyona böler. Başka bir deyişle, körleştirilmiş bir işlev aynı anda yalnızca bir parametre alır.

Temel Bir Körleme Örneği

Aşağıda körili bir fonksiyonun örneği verilmiştir:

functionbuildSandwich(ingredient1) {
return(ingredient2) => {
return(ingredient3) => {
return`${ingredient1},${ingredient2},${ingredient3}`
 }
 }
}

inşaSandviç() işlev başka bir işlevi döndürür; bu işlevi alan anonim bir işlevdir. bileşen2 argüman. Daha sonra bu anonim işlev, alan başka bir anonim işlevi döndürür. bileşen3. Son olarak, bu son işlev şablon değişmez değerini döndürür; JavaScript'te dizeleri biçimlendirme.

Yarattığınız şey, her fonksiyonun sonuna ulaşana kadar altındaki fonksiyonu çağırdığı iç içe geçmiş bir fonksiyondur. Şimdi aradığınızda inşaSandviç() ve ona tek bir parametre iletirseniz, işlevin henüz argümanlarını sağlamadığınız kısmını döndürür:

console.log(buildSandwich("Bacon"))

Çıktıdan buildSandwich'in bir işlev döndürdüğünü görebilirsiniz:

İşlev çağrısını tamamlamak için üç bağımsız değişkenin tümünü sağlamanız gerekir:

buildSandwich("Bacon")("Lettuce")("Tomato")

Bu kod, "Pastırma"yı ilk fonksiyona, "Marul"u ikinci fonksiyona ve "Domates"i son fonksiyona geçirir. Başka bir deyişle, inşaSandviç() işlev aslında üç işleve bölünmüştür; her işlev yalnızca bir parametre alır.

Geleneksel işlevleri kullanarak köri yapmak tamamen geçerli olsa da, tüm iç içe geçme işlemleri derinleştikçe oldukça çirkinleşebilir. Bu sorunu aşmak için ok işlevlerini kullanabilir ve bunların daha temiz söz diziminden yararlanabilirsiniz:

const buildMeal = ingred1 =>ingred2 =>ingred3 =>
`${ingred1}, ${ingred2}. ${ingred3}`;

Bu yeniden düzenlenmiş sürüm daha kısadır; bu, kullanmanın bir avantajıdır. ok fonksiyonları ve normal fonksiyonlar. İşlevi öncekiyle aynı şekilde çağırabilirsiniz:

buildMeal("Bacon")("Lettuce")("Tomato")

Kısmen Uygulanan Köri Fonksiyonları

Kısmen uygulanan işlevler, körlemenin yaygın bir kullanımıdır. Bu teknik, aynı anda yalnızca gerekli argümanların sağlanmasını gerektirir (tüm argümanların sağlanması yerine). Gerekli tüm parametreleri ileterek bir işlevi çağırdığınızda, o işlevi "uyguladığınızı" söylersiniz.

Bir örneğe bakalım:

const multiply = (x, y) => x * y;

Aşağıda çarpmanın körili versiyonu verilmiştir:

const curriedMultiply = x =>y => x * y;

köriliÇarpma() işlev şunu alır: X ilk fonksiyon için argüman ve sen ikinci fonksiyon için her iki değeri de çarpar.

Kısmen uygulanan ilk işlevi oluşturmak için köriliÇoklu() ilk parametreyi kullanın ve döndürülen işlevi bir değişkene atayın:

const timesTen = curriedMultiply(10)

Bu noktada kod, "kısmen uygulanmıştır" köriliÇarpma() işlev. Yani ne zaman aramak istersen kereOn(), sadece bir sayı iletmeniz yeterlidir; sayı otomatik olarak 10 ile çarpılacaktır (bu, uygulanan fonksiyonun içinde saklanır):

console.log(timesTen(8)) // 80

Bu, her biri kendi işlevselliğine sahip birden fazla özel işlev oluşturarak tek bir karmaşık işlev oluşturmanıza olanak tanır.

Gerçek bir web geliştirme kullanım senaryosuna daha yakın olan bir örneğe göz atın. Aşağıda bir güncellemeElemText() bir elementin değerini alan fonksiyon İD ilk çağrıda ikinci çağrının içeriğini belirler ve ardından öğeyi buna göre günceller. İD ve sağladığınız içerik:

const updateElemText = id = content
 => document.querySelector(`#${id}`).textContent = content
// Lock the element's id into the function:
const updateHeaderText = updateElemText('header')
// Update the header text
updateHeaderText("Hello World!")

Körili Fonksiyonlarla Fonksiyon Kompozisyonu

Körlemenin bir başka yaygın kullanımı da fonksiyon bileşimidir. Bu, küçük işlevleri belirli bir sırayla çağırmanıza ve bunları daha karmaşık tek bir işlevde birleştirmenize olanak tanır.

Örneğin, varsayımsal bir e-ticaret web sitesinde, birbiri ardına (kesin sırayla) çalıştırmak isteyebileceğiniz üç işlevi burada bulabilirsiniz:

const addCustomer = fn =>(...args) => {
console.log("Saving customer info")
return fn(...args)
}
const processOrder = fn =>(...args) => {
console.log(`processing order #${args[0]}`)
return fn(...args);
}
let completeOrder = (...args) => {
console.log(`Order #${[...args].toString()} completed.`);
}

Bu kodun şunu kullandığına dikkat edin: izin vermek tanımlamak için anahtar kelime tamSipariş() işlev. Bu, değişkene bir değeri yeniden atamanıza olanak tanır ve JavaScript'te kapsam belirleme nasıl çalışır?.

Daha sonra, önce müşterileri eklemek isteyeceğiniz için işlevleri ters sırada (içeriden dışarıya) çağırmanız gerekir:

completeOrder = (processOrder(completeOrder));
completeOrder = (addCustomer(completeOrder));
completeOrder("1000")

Bu size aşağıdaki çıktıyı verecektir:

Yukarıdaki fonksiyonları normal şekilde yazacak olsaydınız, kod şöyle görünecektir:

functionaddCustomer(...args) {
returnfunctionprocessOrder(...args) {
returnfunctioncompleteOrder(...args) {
// end
 }
 }
}

aradığınızda müşteri ekle() işlevi çalıştırıp argümanları ilettiğinizde, içeriden başlıyorsunuz ve işlevin tepesine doğru ilerliyorsunuz.

Normal Bir Fonksiyonu Curry Fonksiyonlu Curried Fonksiyona Dönüştürme

Körili işlevleri çok fazla kullanmayı planlıyorsanız, bir yardımcı işlevle süreci kolaylaştırabilirsiniz.

Bu işlev herhangi bir normal işlevi körleştirilmiş bir işleve dönüştürecektir. Herhangi bir sayıda argümanı işlemek için özyinelemeyi kullanır.

const curry = (fn) => {
return curried = (...args) => {
if (fn.length !== args.length) {
return curried.bind(null, ...args)
 }
return fn(...args);
 }
}

Bu işlev, birden fazla parametre alan herhangi bir standart yazılı işlevi kabul eder ve bu işlevin körleştirilmiş bir sürümünü döndürür. Bunu çalışırken görmek için, üç parametreyi alıp bunları birbirine ekleyen bu örnek işlevi kullanın:

const total = (x, y, z) => x + y + z

Bu işlevi dönüştürmek için, köri() işlev ve geçiş Toplam bir argüman olarak:

const curriedTotal = curry(total)

Şimdi işlevi çağırmak için tüm argümanları aktarmanız yeterlidir:

console.log(curriedTotal(10)(20)(30)) // 60

JavaScript'teki İşlevler Hakkında Daha Fazla Bilgi

JavaScript'in işlevleri son derece esnektir ve körleme işlevleri bunun yalnızca küçük bir kısmıdır. Ok işlevleri, yapıcı işlevler ve anonim işlevler gibi başka birçok işlev türü de vardır. Bu işlevlere ve bileşenlerine aşina olmak, JavaScript'te uzmanlaşmanın anahtarıdır.