Deklarasi Fungsi JavaScript: Sintaks, Hoisting, dan Return

Fungsi Adalah Blok Langkah yang Diberi Nama

Setiap kali kamu ingin memberi nama pada sepotong logika lalu memakainya ulang, kamu menulis fungsi. Cara tertua dan paling lugas di JavaScript adalah deklarasi fungsi: kata kunci function diikuti sebuah nama.

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("Ada"));
console.log(greet("Boris"));

Membacanya dari kiri ke kanan:

• function adalah kata kunci yang memulai sebuah deklarasi.
• greet adalah nama fungsinya.
• (name) adalah daftar parameter, yaitu input yang diterima fungsi.
• Blok di dalam kurung kurawal adalah isi fungsinya.
• greet("Ada") adalah pemanggilan. JavaScript menjalankan isi fungsi dengan name terikat ke "Ada".

Mendefinisikan fungsi tidak menjalankannya. Memanggilnya yang menjalankan.

Parameter dan Argumen

Kata parameter adalah nama di dalam definisi fungsi. Kata argumen adalah nilai yang diberikan saat kamu memanggilnya. Dalam obrolan sehari-hari keduanya dianggap sinonim; perbedaannya jadi penting saat kamu membaca pesan error.

function power(base, exponent) {
    return base ** exponent;
}

console.log(power(2, 10));
console.log(power(5, 3));

Di sini base dan exponent adalah parameter. 2 dan 10 adalah argumen. JavaScript mengikatnya secara berurutan: argumen pertama ke parameter pertama, dan seterusnya.

Tidak seperti beberapa bahasa lain, JavaScript tidak akan protes kalau kamu memberikan jumlah argumen yang salah. Argumen yang tidak ada menjadi undefined; argumen berlebih diabaikan diam-diam. Fleksibel, tetapi sesekali menjebak. Kita akan melihat nilai default dan rest parameter di dokumentasi berikutnya.

return Mengirim Nilai Kembali

console.log menulis ke output. return menyerahkan sebuah nilai kembali ke pemanggil agar bisa dipakai:

function power(base, exponent) {
    return base ** exponent;
}

const result = power(2, 10);
console.log(result + 1);

Tanpa return, sebuah fungsi mengembalikan undefined:

function greet(name) {
    console.log("Hello, " + name);
}

const value = greet("Ada");
console.log("got back:", value);

return juga langsung keluar dari fungsi. Return lebih awal adalah cara standar untuk menangani kasus khusus sebelum logika utamanya:

function discount(price, percent) {
    if (percent < 0 || percent > 100) {
        return null;
    }
    return price * (1 - percent / 100);
}

console.log(discount(50, 20));
console.log(discount(50, 150));

Return lebih awal menjaga isi utama fungsi agar tidak berubah menjadi piramida if/else.

Hoisting: Kamu Bisa Memanggilnya Sebelum Mendefinisikannya

Ini sesuatu yang benar-benar mengejutkan orang yang datang dari bahasa lain. Deklarasi fungsi mengalami hoisting: JavaScript memindahkannya ke bagian atas scope-nya sebelum menjalankan kode apa pun. Artinya kamu bisa memanggil fungsi di baris yang lebih atas daripada tempat deklarasinya:

console.log(square(5));

function square(n) {
    return n * n;
}

Kode itu berjalan lancar. Sebelum eksekusi, engine memindai scope-nya, mendaftarkan square sebagai fungsi, dan baru kemudian mulai menjalankan pernyataan dari atas ke bawah.

Ini perbedaan perilaku yang nyata antara deklarasi fungsi dan cara lain membuat fungsi (ekspresi fungsi, arrow function). Keduanya mengalami hoisting seperti variabel: namanya sudah dikenal, tetapi nilainya baru diisi saat barisnya berjalan. Perbedaan itu dibahas lebih lanjut berikut ini.

Kebanyakan panduan gaya tetap menyarankan untuk mendefinisikan fungsi sebelum memanggilnya. Hoisting adalah jaring pengaman, bukan gaya yang patut diandalkan.

Deklarasi vs Ekspresi

Deklarasi fungsi berdiri sendiri sebagai pernyataan. Ekspresi fungsi muncul di tempat yang mengharapkan sebuah nilai, paling sering di sisi kanan sebuah penugasan:

// Declaration - hoisted.
function add(a, b) {
    return a + b;
}

// Expression - assigned to a variable.
const multiply = function (a, b) {
    return a * b;
};

console.log(add(2, 3));
console.log(multiply(2, 3));

Keduanya menghasilkan fungsi yang bisa dipanggil. Perbedaannya:

• Deklarasi mengalami hoisting secara utuh. Ekspresi mengikuti aturan hoisting variabel tempat ia disimpan (const dan let berada di temporal dead zone sampai barisnya berjalan).
• Deklarasi wajib punya nama. Ekspresi boleh anonim, walaupun memberinya nama membantu stack trace.
• Deklarasi tidak bisa muncul di sembarang tempat. Dalam strict mode, function foo() {} di dalam blok if berperilaku tidak konsisten di berbagai engine, jadi pakai ekspresi di sana.

Untuk kebanyakan helper tingkat atas dalam sebuah file, deklarasi enak dibaca. Untuk fungsi yang diberikan sebagai argumen atau disimpan ke property, ekspresi (atau arrow function) adalah pilihan yang biasa.

Penamaan dan Gaya

Nama fungsi adalah janji tentang apa yang dilakukan fungsi itu. Menghabiskan beberapa karakter tambahan untuk memilih nama yang deskriptif akan terbayar begitu ada orang yang membaca kodenya.

// Hard to follow:
function p(x, y) {
    return x * (1 + y);
}

// Easy to follow:
function priceWithTax(price, taxRate) {
    return price * (1 + taxRate);
}

console.log(priceWithTax(1200, 0.08));

Beberapa konvensi yang layak kamu pakai:

• Nama fungsi sebaiknya kata kerja: fetchProfile, computeTotal, sendEmail.
• Pakai camelCase, itulah norma di JavaScript.
• Fungsi yang mengembalikan boolean sering diawali is, has, atau can: isValid, hasAccess, canEdit.

Tujuannya agar tempat pemanggilan terbaca seperti sebuah kalimat.

Contoh Kecil yang Berfungsi

Menggabungkan semua bagiannya: parameter, return lebih awal, dan nama yang deskriptif:

function formatAddress(street, city, country, zip) {
    if (!street || !city) {
        return null;
    }
    const parts = [street, city];
    if (zip) parts.push(zip);
    parts.push(country || "US");
    return parts.join(", ");
}

console.log(formatAddress("1 Main St", "Boston"));
console.log(formatAddress("1 Main St", "Boston", "US", "02108"));
console.log(formatAddress("Place Vendôme 1", "Paris", "France"));

Satu deklarasi, satu guard clause, satu return yang jelas. Bentuk itu mencakup sebagian besar fungsi yang akan kamu tulis.

Berikutnya: Arrow Function

Deklarasi adalah andalan sehari-hari, tetapi JavaScript modern sangat bergantung pada sintaks yang lebih singkat, yaitu arrow function, terutama untuk callback dan kode satu baris. Bentuknya berbeda, perilakunya terhadap this juga berbeda, dan itulah topik halaman berikutnya.