JavaScript Academy · Pelajaran

Membangun pipe dan compose

Terapkan komposisi dari kiri ke kanan dan dari kanan ke kiri.

Membangun pipe dan compose adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Dari Dua Fungsi Menjadi Banyak Fungsi

compose dengan dua argumen memiliki keterbatasan. Alur nyata merangkai banyak langkah. Dalam pelajaran ini, Anda akan membangun compose dan pipe serbaguna menggunakan reduce dan reduceRight.

pipe: Dari Kiri ke Kanan

pipe dibaca sesuai urutan eksekusi: fungsi pertama dijalankan terlebih dahulu. pipe(a, b, c)(x) sama dengan c(b(a(x))). Kebanyakan orang menganggapnya lebih alami daripada compose.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(pipe(inc, double)(5));

Cara reduce Menggerakkan pipe

reduce memulai dengan nilai masukan sebagai akumulator dan menerapkan setiap fungsi secara berurutan, dengan meneruskan setiap hasil ke fungsi berikutnya. Nilai awal x menjadi awal rangkaian tersebut.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const steps = pipe(
  n => n + 1,
  n => n * 3,
  n => n - 2
);

console.log(steps(4));

compose dengan reduceRight

compose adalah pipe yang dibalik. Dengan menggunakan reduceRight, daftar fungsi ditelusuri dari akhir, sehingga fungsi paling kanan dijalankan terlebih dahulu, sesuai dengan f(g(x)).

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

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

pipe dan compose Saling Mencerminkan

Daftar fungsi yang sama menghasilkan keluaran berbeda dalam pipe dan compose karena arahnya dibalik. Pilih berdasarkan cara Anda ingin membaca langkah-langkahnya.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const square = n => n * n;

console.log(pipe(inc, square)(3));
console.log(compose(inc, square)(3));

compose sebagai pipe yang Dibalik

Anda dapat mendefinisikan compose berdasarkan pipe dengan membalik daftar fungsi. Hal ini menunjukkan betapa erat hubungan keduanya.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => pipe(...fns.reverse());

const inc = n => n + 1;
const double = n => n * 2;

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

Alur Teks Nyata

Bangun pembuat pengenal URL dari fungsi-fungsi teks kecil menggunakan pipe. Setiap langkah melakukan satu tugas dan mudah diuji secara terpisah.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const slugify = pipe(
  s => s.trim(),
  s => s.toLowerCase(),
  s => s.replace(/\s+/g, '-')
);

console.log(slugify('  Hello World Example  '));

Menyusun Komposisi Operasi Larik

Alur dapat bekerja pada jenis data apa pun, termasuk larik. Gabungkan penyaringan dan pemetaan menjadi satu transformasi bernama.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const process = pipe(
  arr => arr.filter(n => n % 2 === 0),
  arr => arr.map(n => n * 10)
);

console.log(process([1, 2, 3, 4, 5, 6]));

Kasus Batas identity

Memanggil pipe() tanpa fungsi akan mengembalikan masukan tanpa perubahan karena reduce hanya mengembalikan nilai awal. Perilaku identity ini membuat pembantu tersebut aman dipanggil dengan nol langkah.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));

Menggabungkan dengan Penerapan Bertahap

Fungsi curried dan fungsi yang telah diterapkan sebagian dapat langsung dipasang ke dalam alur. Masing-masing menjadi langkah satu argumen yang bersih.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const add = a => b => a + b;
const times = a => b => a * b;

const calc = pipe(add(3), times(2), add(-1));
console.log(calc(5));

Memilih pipe atau compose

Gunakan pipe jika Anda ingin langkah-langkah dibaca dari atas ke bawah sesuai urutan eksekusi. Gunakan compose jika ingin mengikuti notasi matematika f(g(x)). Keduanya merupakan pembungkus reduce satu baris, dan keduanya banyak digunakan dalam pustaka fungsional.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const normalize = pipe(
  s => s.trim(),
  s => s.replace(/[^a-z0-9]+/gi, ' '),
  s => s.toUpperCase()
);

console.log(normalize('  a-b_c!d  '));

Pemeriksaan Singkat

Metode larik mana yang membuat compose menjalankan fungsi dari kanan ke kiri?

Ringkasan: pipe dan compose

Anda telah membangun pembantu komposisi umum:

pipe menggunakan reduce untuk eksekusi dari kiri ke kanan.
compose menggunakan reduceRight untuk eksekusi dari kanan ke kiri.
compose dapat didefinisikan sebagai pipe dengan daftar yang dibalik.
Alur kosong berperilaku sebagai identity, dan langkah-langkah curried dapat dipasang dengan rapi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun pipe dan compose” gratis?

Ya — teks lengkap “Membangun pipe dan compose” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun pipe dan compose”?

Terapkan komposisi dari kiri ke kanan dan dari kanan ke kiri. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Membangun pipe dan compose” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy