JavaScript Academy · Pelajaran

Komposisi Fungsi

Gabungkan fungsi-fungsi kecil menjadi pipeline.

Komposisi Fungsi adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Apa Itu Komposisi Fungsi

Komposisi fungsi menggabungkan fungsi-fungsi kecil menjadi satu fungsi. Menyusun f dan g menghasilkan fungsi yang menjadikan keluaran g sebagai masukan bagi f.

Secara matematis: compose(f, g)(x) = f(g(x)). Data mengalir dari kanan ke kiri.

Dua Fungsi Kecil

Komposisi dimulai dari fungsi-fungsi sederhana dengan satu tujuan. Berikut dua transformasi yang akan kita gabungkan.

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

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

Menyusun Komposisi Secara Manual

Komposisi yang paling eksplisit hanyalah memanggil satu fungsi pada hasil fungsi lain. Bacalah dari dalam ke luar: increment dijalankan terlebih dahulu, lalu double.

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

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

Fungsi compose untuk Dua Fungsi

Bungkus pola tersebut dalam compose yang dapat digunakan kembali. Fungsi ini menerima f dan g, lalu mengembalikan fungsi baru yang menerapkan g terlebih dahulu, kemudian f.

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));

Urutan Penting

Komposisi tidak komutatif. compose(f, g) berbeda dari compose(g, f) karena fungsi di sebelah kanan dijalankan terlebih dahulu.

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));

Membaca dari Kanan ke Kiri

Dalam compose(a, b, c)(x), pemanggilan dievaluasi sebagai a(b(c(x))). Fungsi yang paling kanan menyentuh masukan terlebih dahulu. Ingat arah ini agar terhindar dari kesalahan.

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'));

Menyusun Komposisi Transformasi Teks

Komposisi sangat cocok untuk alur teks: trim, ubah menjadi huruf kecil, lalu replace spasi; setiap langkah merupakan fungsi kecil.

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  '));

Komposisi dengan Bilangan

Merangkai operasi matematika adalah contoh klasik. Setiap fungsi tetap mudah diuji secara terpisah.

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));

Mengapa Menggunakan compose

Komposisi menjaga agar setiap fungsi tetap terfokus dan dapat digunakan kembali, sekaligus menghilangkan kerumitan pemanggilan bersarang. Daripada menyebarkan f(g(h(x))) di seluruh kode, Anda membangun satu alur bernama lalu menggunakannya kembali.

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));

Komposisi dan Penerapan Bertahap Bersama

Fungsi curried dapat dikomposisikan dengan sangat baik karena masing-masing menghasilkan fungsi satu argumen, persis seperti yang diharapkan oleh komposisi.

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));

Menuju Banyak Fungsi

Sejauh ini compose menangani dua fungsi. Komposisi nyata mendukung jumlah fungsi berapa pun. Dalam pelajaran berikutnya, Anda akan membangun compose umum dan padanan kiri-ke-kanannya, pipe, menggunakan reduce.

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));

Pemeriksaan Singkat

Jika compose = (f, g) => x => f(g(x)), apa yang dikembalikan oleh compose(double, increment)(5) jika double mengalikan dengan 2 dan increment menambahkan 1?

Ringkasan: Komposisi Fungsi

Anda telah mempelajari cara menggabungkan fungsi:

compose(f, g)(x) sama dengan f(g(x)), yang dievaluasi dari kanan ke kiri.
Urutan penting: komposisi tidak komutatif.
Komposisi menjaga fungsi tetap kecil, memiliki nama, dan dapat digunakan kembali.
Fungsi curried dapat dikomposisikan dengan rapi. Berikutnya, Anda akan menggeneralisasikannya untuk jumlah fungsi berapa pun.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komposisi Fungsi” gratis?

Ya — teks lengkap “Komposisi Fungsi” 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 “Komposisi Fungsi”?

Gabungkan fungsi-fungsi kecil menjadi pipeline. 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 3 dari 4.

Berapa lama pelajaran “Komposisi Fungsi” 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