JavaScript Academy · Ders

İşlev Birleştirme

Küçük işlevleri işlem hatlarında birleştirin.

İşlev Birleştirme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

İşlev Bileşimi Nedir?

İşlev bileşimi, küçük işlevleri tek bir işlevde birleştirir. f ve g işlevlerini bileştirmek, g işlevinin çıktısını f işlevinin girdisi yapan bir işlev üretir.

Matematiksel olarak: compose(f, g)(x) = f(g(x)). Veri sağdan sola akar.

İki Küçük İşlev

Bileşim, basit ve tek amaçlı işlevlerle başlar. Birleştireceğimiz iki dönüşümü burada görebilirsiniz.

const double = x => x * 2;
const increment = x => x + 1;

console.log(double(5));
console.log(increment(5));

Elle Bileştirme

En açık bileşim, bir işlevi başka bir işlevin sonucu üzerinde çağırmaktan ibarettir. İçten dışa okuyun: Önce increment, ardından double çalışır.

const double = x => x * 2;
const increment = x => x + 1;

const result = double(increment(5));
console.log(result);

İki İşlev İçin Bir compose İşlevi

Bu kalıbı yeniden kullanılabilir bir compose içine sarın. f ve g işlevlerini alır ve önce g'yi, ardından f'yi uygulayan yeni bir işlev döndürür.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));

Sıra Önemlidir

Bileşim değişmeli değildir. compose(f, g) ile compose(g, f) birbirinden farklıdır; çünkü sağdaki işlev önce çalışır.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));

Sağdan Sola Okuma

compose(a, b, c)(x) çağrısı a(b(c(x))) olarak değerlendirilir. En sağdaki işlev girdiye önce uygulanır. Hatalardan kaçınmak için bu yönü aklınızda tutun.

const compose = (f, g) => x => f(g(x));

const shout = s => s.toUpperCase();
const exclaim = s => s + '!';

const loud = compose(shout, exclaim);
console.log(loud('hello'));

Dize Dönüşümlerini Bileştirme

Bileşim, metin işlem hatları için harikadır: önce trim, ardından küçük harfe dönüştürme ve son olarak boşlukları değiştirme; her adım küçük bir işlevdir.

const compose = (f, g) => x => f(g(x));

const trim = s => s.trim();
const lower = s => s.toLowerCase();

const clean = compose(lower, trim);
console.log(clean('   HELLO World  '));

Sayılarla Bileşim

Matematiksel işlemleri zincirlemek klasik bir örnektir. Her işlev kendi başına kolayca sınanabilir kalır.

const compose = (f, g) => x => f(g(x));

const square = x => x * x;
const negate = x => -x;

const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));

Neden compose?

Bileşim, her işlevin odaklanmış ve yeniden kullanılabilir kalmasını sağlar, ayrıca iç içe çağrı karmaşasını ortadan kaldırır. Kodunuzun içine dağılmış f(g(h(x))) ifadeleri yerine, adlandırılmış bir işlem hattı oluşturur ve bunu yeniden kullanırsınız.

const compose = (f, g) => x => f(g(x));

const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';

const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));

Bileşim ve Kürleme Birlikte

Curried işlevler, her biri bileşimin beklediği gibi tek argümanlı bir işlev ürettiği için güzel bir şekilde bileşir.

const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;

const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));

Çok Sayıda İşleve Doğru

Şimdiye kadar compose iki işlevi ele aldı. Gerçek bileşim, herhangi bir sayıda işlevi destekler. Bir sonraki derste reduce kullanarak genel bir compose ve onun soldan sağa çalışan karşılığı pipe oluşturacaksınız.

const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;

const combined = compose(a, compose(b, c));
console.log(combined(10));

Hızlı Yoklama

compose = (f, g) => x => f(g(x)) ise ve double 2 ile çarpıp increment 1 ekliyorsa, compose(double, increment)(5) ne döndürür?

Özet: İşlev Bileşimi

İşlevleri birleştirmeyi öğrendiniz:

compose(f, g)(x), sağdan sola değerlendirilerek f(g(x))'e eşittir.
Sıra önemlidir: Bileşim değişmeli değildir.
Bileşim, işlevleri küçük, adlandırılmış ve yeniden kullanılabilir tutar.
Curried işlevler clean biçimde bileşir. Sırada bunu herhangi bir sayıda işleve genelleyeceksiniz.

Sıkça Sorulan Sorular

“İşlev Birleştirme” dersi ücretsiz mi?

Evet — “İşlev Birleştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“İşlev Birleştirme” dersinde ne öğreneceğim?

Küçük işlevleri işlem hatlarında birleştirin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“İşlev Birleştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön