Jangan ulangi dirimu! Pelajari cara membuat dan memanggil fungsi di JavaScript untuk menjalankan blok kode tertentu, menggunakan parameter, dan mengembalikan nilai.
17m bacaanKuis WajibMicro Badge Lesson
JavaScript Jadi Koki Handal: Bikin "Resep" Kode Pake Fungsi!
Udah bisa ngulang-ngulang tugas pake loop? Keren! Tapi, gimana kalau ada serangkaian perintah yang mau kita pake di banyak tempat berbeda di kode kita? Masa iya kita copy-paste blok kode yang sama terus-terusan? Gak efisien dan bikin pusing kalau mau diubah!
Di sinilah Fungsi (Function) di JavaScript datang sebagai penyelamat! Fungsi itu kayak kamu bikin "resep" atau "paket perintah" yang bisa kamu kasih nama, terus kapan pun kamu butuh ngelakuin serangkaian perintah itu lagi, kamu tinggal "manggil" nama resepnya aja.
Apa Itu Fungsi dan Kenapa Penting Banget?
Secara sederhana, Fungsi adalah sebuah blok kode yang dirancang untuk melakukan tugas tertentu. Blok kode ini baru bakal dijalanin kalau fungsi itu dipanggil (called/invoked/executed).
Kenapa fungsi itu penting banget?
Reusable (Bisa Dipake Ulang): Ini manfaat utamanya! Kamu cukup nulis logika atau serangkaian perintah sekali aja di dalem fungsi, terus kamu bisa pake fungsi itu berkali-kali di berbagai bagian kodemu. Hemat waktu, tenaga, dan baris kode!
: Fungsi ngebantu kamu mecah program yang gede jadi bagian-bagian kecil yang lebih gampang di-manage dan dipahami. Tiap fungsi punya tugas spesifiknya sendiri.
Modularitas (Kode Jadi Terstruktur)
Abstraksi: Kamu bisa nyembunyiin detail implementasi yang rumit di dalem fungsi. Orang yang pake fungsingmu (atau kamu sendiri di masa depan) cukup tau nama fungsi, apa yang dibutuhin (parameter), dan apa hasilnya (nilai kembali), tanpa perlu pusing sama cara kerjanya di dalem.
Gampang Di-debug dan Di-maintain: Kalau ada bug, kamu bisa fokus nyari di fungsi yang relevan aja. Kalau ada perubahan, cukup ubah di satu tempat (definisi fungsinya).
Cara Bikin (Mendeklarasikan) Fungsi
Ada beberapa cara buat bikin fungsi di JavaScript, tapi yang paling umum buat pemula adalah pake Function Declaration (Deklarasi Fungsi).
Sintaks Dasar Function Declaration:
javascript
function namaFungsiSaya(parameter1, parameter2, ...) { // Blok kode yang mau dijalanin ada di sini // Ini disebut "function body" (badan fungsi) // Bisa ada return statement kalau fungsi ini ngembaliin nilai}
function: Keyword wajib buat nandain kalau kita lagi bikin fungsi.
namaFungsiSaya: Nama yang kamu kasih buat fungsingmu. Aturan penamaannya sama kayak variabel (biasanya pake camelCase, deskriptif). Nama ini yang bakal kamu pake buat manggil fungsinya.
parameter1, parameter2, ... (Opsional): Ini kayak variabel lokal di dalem fungsi yang nilainya bakal diisi pas fungsi itu dipanggil. Parameter ini dipisah koma dan ditaruh di dalem kurung (). Kalau fungsimu gak butuh input apa-apa, kurungnya tetep ditulis tapi isinya kosong (()).
Kurung Kurawal { }: Badan fungsi, tempat kamu nulis semua perintah yang mau dijalanin sama fungsi ini.
Contoh Deklarasi Fungsi Sederhana:
javascript
// Fungsi tanpa parameter, cuma nampilin pesanfunction sapaDunia() { console.log("Halo, Dunia JavaScript!");}// Fungsi dengan satu parameter (nama)function sapaPengguna(nama) { console.log("Halo, " + nama + "! Selamat datang.");}// Fungsi dengan dua parameter (angka1, angka2) dan mengembalikan nilaifunction jumlahkanDuaAngka(angka1, angka2) { let hasil = angka1 + angka2; return hasil; // 'return' ngirim nilai hasil ini keluar dari fungsi}
Pas kamu deklarasiin fungsi kayak di atas, kode di dalemnya belum dijalanin. Kamu baru nyiapin "resep"-nya aja.
Cara Manggil (Menjalankan) Fungsi
Biar kode di dalem fungsi itu jalan, kamu perlu manggil (call atau invoke) fungsi itu pake namanya diikuti tanda kurung (). Kalau fungsinya butuh parameter, kamu kasih nilai (disebut argumen) di dalem kurung itu.
Contoh Manggil Fungsi:
javascript
sapaDunia(); // Manggil fungsi sapaDunia// Output di konsol: Halo, Dunia JavaScript!sapaPengguna("Budi"); // Manggil fungsi sapaPengguna dengan argumen "Budi"// Output di konsol: Halo, Budi! Selamat datang.sapaPengguna("Ani");// Output di konsol: Halo, Ani! Selamat datang.let hasilPenjumlahan = jumlahkanDuaAngka(10, 5); // Manggil fungsi dan nyimpen hasilnyaconsole.log("Hasil 10 + 5 adalah:", hasilPenjumlahan); // Output: Hasil 10 + 5 adalah: 15console.log("Hasil 7 + 3 adalah:", jumlahkanDuaAngka(7, 3)); // Bisa juga langsung dipake// Output: Hasil 7 + 3 adalah: 10
Parameter dan Argumen: Ngasih "Bahan Baku" ke Fungsi
Parameter: Ini adalah nama variabel yang kamu tulis di dalem kurung () pas kamu mendeklarasikan fungsi. Parameter ini kayak "placeholder" buat nilai yang bakal dikasih ke fungsi pas dipanggil.
Argumen: Ini adalah nilai aktual yang kamu kasih ke fungsi pas kamu manggil fungsi itu. Nilai argumen ini bakal di-assign ke parameter yang sesuai urutannya.
javascript
function cetakInfo(nama, usia) { // 'nama' dan 'usia' di sini adalah parameter console.log("Nama:", nama + ", Usia:", usia + " tahun");}cetakInfo("Siti", 22); // "Siti" dan 22 di sini adalah argumen// Di dalem fungsi cetakInfo: parameter 'nama' jadi "Siti", parameter 'usia' jadi 22
Nilai Default Parameter (ES6 ke Atas): Kamu bisa ngasih nilai default ke parameter kalau pas fungsi dipanggil, argumen buat parameter itu gak dikasih.
javascript
function sapa(nama = "Pengunjung") { // Kalau 'nama' gak dikasih, defaultnya "Pengunjung" console.log("Halo, " + nama + "!");}sapa("Andi"); // Output: Halo, Andi!sapa(); // Output: Halo, Pengunjung! (karena pake nilai default)
return Statement: Ngembaliin "Hasil Masakan" dari Fungsi
Gak semua fungsi cuma nampilin sesuatu ke konsol atau ngubah halaman. Banyak fungsi yang tugasnya ngitung sesuatu atau ngolah data, terus ngasih hasilnya balik ke bagian kode yang manggilnya. Nah, buat ngembaliin nilai dari fungsi, kita pake keyword return.
Pas JavaScript nemu return di dalem fungsi, fungsi itu bakal langsung berhenti dijalanin, dan nilai yang ada setelah return bakal dikirim balik.
Satu fungsi cuma bisa ngembaliin satu nilai (tapi nilai itu bisa aja array atau objek yang isinya banyak data).
Kalau fungsi gak punya return statement, atau return-nya gak ngembaliin nilai apa-apa (return;), fungsi itu secara default bakal ngembaliin undefined.
Scope Variabel Dasar: Global vs. Lokal (Pengenalan Singkat)
Scope (jangkauan) nentuin di mana aja sebuah variabel bisa diakses di kodemu.
Global Scope: Variabel yang dideklarasiin di luar semua fungsi itu jadi variabel global. Dia bisa diakses dari mana aja di kodemu, baik di luar maupun di dalem fungsi.
Local Scope (Function Scope): Variabel yang dideklarasiin di dalem sebuah fungsi (termasuk parameternya) itu jadi variabel lokal. Dia cuma bisa diakses di dalem fungsi tempat dia dideklarasiin itu aja, gak bisa diakses dari luar fungsi atau dari fungsi lain.
Variabel yang dideklarasiin pake let dan const juga punya block scope (cuma bisa diakses di dalem blok { } tempat dia dideklarasiin, kayak di dalem if atau for), tapi buat sekarang kita fokus ke function scope dulu.
javascript
let variabelGlobal = "Saya global!";function tesScope() { let variabelLokal = "Saya lokal di tesScope!"; console.log(variabelGlobal); // Bisa akses variabel global console.log(variabelLokal); // Bisa akses variabel lokal sendiri}tesScope();// Output dari tesScope():// Saya global!// Saya lokal di tesScope!console.log(variabelGlobal); // Output: Saya global! (Masih bisa diakses)// console.log(variabelLokal); // Ini bakal ERROR! variabelLokal gak dikenal di luar fungsi tesScope.
Pahami scope ini penting biar gak ada konflik nama variabel atau error "variabel tidak terdefinisi".
Bentuk Fungsi Lain (Sekadar Tahu Dulu)
Selain function declaration, ada cara lain bikin fungsi yang mungkin bakal kamu temui:
Function Expression (Ekspresi Fungsi): Fungsi dibikin dan di-assign ke variabel.
javascript
const tambah = function(a, b) { return a + b;};console.log(tambah(3, 4)); // Output: 7
Fungsi kayak gini sering disebut "fungsi anonim" (tanpa nama) yang langsung disimpen di variabel.
Arrow Function (Fungsi Panah - ES6 ke Atas): Sintaks yang lebih ringkes buat bikin fungsi, terutama fungsi anonim.
javascript
const kali = (a, b) => { return a * b;};console.log(kali(3, 4)); // Output: 12// Kalau cuma satu baris return, bisa lebih ringkes lagi:const bagi = (a, b) => a / b;console.log(
Arrow function punya beberapa perilaku this yang beda, tapi buat fungsi simpel, sintaksnya enak banget.
Kamu gak perlu langsung nguasain semua bentuk fungsi ini sekarang. Fokus dulu ke Function Declaration (function namaFungsi() {}), itu udah cukup banget buat mulai!
Fungsi ini adalah salah satu pilar utama pemrograman. Dengan ngebiasain diri bikin fungsi buat tugas-tugas spesifik, kodemu bakal jadi lebih terstruktur, gampang dibaca, gampang di-debug, dan pastinya lebih efisien karena kamu gak perlu nulis ulang kode yang sama berkali-kali.
Mulai sekarang, kalau kamu nemu ada serangkaian perintah yang kayaknya bakal dipake lagi, coba deh bungkus jadi fungsi!
Checkpoint KuisTarget: 70%
Kuis Fungsi Dasar JavaScript
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
