Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Fungsi adalah potongan kode yang dapat digunakan kembali yang berjalan saat Anda memanggilnya. Fungsi memungkinkan Anda menggunakan kembali kode, menjadikannya lebih modular dan lebih mudah dipelihara.

Ada beberapa cara untuk membuat fungsi dalam JavaScript. Di sini Anda akan mempelajari berbagai cara untuk membuat fungsi dan cara menggunakannya.

Deklarasi Fungsi: Cara Langsung

Salah satu cara Anda dapat membuat fungsi dalam JavaScript adalah melalui deklarasi fungsi. Deklarasi fungsi adalah fungsi dalam JavaScript yang mengikuti sintaks di bawah ini.

fungsifunctionName(parameter) {
// kode di sini...
kembali"Ini adalah deklarasi fungsi";
}

Komponen dari blok kode di atas meliputi:

  • Itu fungsi kata kunci: Kata kunci ini mendeklarasikan suatu fungsi.
  • functionName: Ini adalah nama fungsinya. Dalam praktiknya, itu harus sedeskriptif dan bermakna mungkin, menunjukkan apa fungsinya.
    • instagram viewer
  • parameter: Ini mewakili parameter fungsi. Parameter adalah daftar variabel opsional yang dapat Anda berikan ke suatu fungsi saat Anda memanggilnya.
  • Badan fungsi: Ini berisi kode yang akan dijalankan oleh fungsi saat Anda memanggilnya. Itu dikelilingi oleh kurung kurawal {} dan dapat berisi kode JavaScript yang valid.
  • Itu kembali pernyataan: Pernyataan ini menghentikan eksekusi fungsi dan mengembalikan nilai yang ditentukan. Dalam kasus di atas, memanggil fungsi akan mengembalikan string “Ini adalah deklarasi fungsi”.

Misalnya, deklarasi fungsi di bawah mengambil tiga angka sebagai parameter dan mengembalikan jumlahnya.

fungsiaddThreeNumbers(a, b, c) {
kembali a + b + c;
}

Untuk memanggil deklarasi fungsi dalam JavaScript, tulis nama fungsi diikuti dengan tanda kurung (). Jika fungsi mengambil parameter apa pun, kirimkan sebagai argumen di dalam tanda kurung.

Misalnya:

tambahkanTigaBilangan(1, 2, 3) // 6

Blok kode di atas memanggil addThreeNumber fungsi dan meneruskan 1, 2, dan 3 sebagai argumen ke fungsi. Jika Anda menjalankan kode ini, itu akan mengembalikan nilai 6.

kerekan JavaScript deklarasi fungsi, artinya Anda dapat memanggilnya sebelum Anda mendefinisikannya.

Misalnya:

Diangkat(); // Fungsi diangkat
fungsiDiangkat() {
menghibur.catatan("Fungsi diangkat");
kembaliBENAR;
}

Seperti yang ditunjukkan pada blok kode di atas, memanggil Diangkat sebelum mendefinisikan itu tidak akan menimbulkan kesalahan.

Ekspresi Fungsi: Berfungsi sebagai Nilai

Dalam JavaScript, Anda dapat mendefinisikan fungsi sebagai ekspresi. Anda kemudian dapat menetapkan nilai fungsi ke variabel atau menggunakannya sebagai argumen ke fungsi lain.

Mereka juga dikenal sebagai fungsi anonim karena tidak memiliki nama, dan Anda hanya dapat memanggilnya dari variabel yang Anda tetapkan.

Di bawah ini adalah sintaks untuk ekspresi fungsi:

const namafungsi = fungsi () {
kembali"Fungsi ekspresi";
};

Untuk memanggil ekspresi fungsi dalam JavaScript, tulis nama variabel yang Anda tetapkan ke fungsi diikuti dengan tanda kurung (). Jika fungsi mengambil parameter apa pun, kirimkan sebagai argumen di dalam tanda kurung.

Misalnya:

namafungsi(); // ekspresi fungsi

Ekspresi fungsi berguna saat membuat fungsi yang berjalan di fungsi lain. Contoh umum termasuk event handler dan callback mereka.

Misalnya:

button.addEventListener("klik", fungsi (peristiwa) {
menghibur.catatan("Anda mengklik tombol!");
});

Contoh di atas menggunakan ekspresi fungsi yang menggunakan an peristiwa argumen sebagai panggilan balik ke addEventListener fungsi. Anda tidak perlu memanggil fungsi secara eksplisit saat menggunakan ekspresi fungsi sebagai panggilan balik. Secara otomatis dipanggil oleh fungsi induknya.

Dalam kasus di atas, saat event listener menerima a klik acara, itu memanggil fungsi callback dan melewati peristiwa objek sebagai argumen.

Tidak seperti deklarasi fungsi, ekspresi fungsi tidak diangkat, jadi Anda tidak dapat memanggilnya sebelum Anda mendefinisikannya. Mencoba mengakses ekspresi fungsi sebelum Anda menentukannya akan menghasilkan a ReferensiKesalahan.

Misalnya:

Diangkat(); // ReferenceError: Tidak dapat mengakses 'isHoisted' sebelum inisialisasi
const Diangkat = fungsi () {
menghibur.catatan("Fungsi diangkat");
};

Fungsi Panah: Kompak dan Terbatas

ES6 memperkenalkan singkatan untuk menulis fungsi anonim dalam JavaScript yang disebut fungsi panah. Mereka memiliki sintaks ringkas yang dapat membuat kode Anda lebih mudah dibaca, terutama ketika berhadapan dengan fungsi baris tunggal yang pendek.

Tidak seperti metode lain untuk membuat fungsi, fungsi panah tidak memerlukan fungsi kata kunci. Ekspresi fungsi panah terdiri dari tiga bagian:

  • Sepasang tanda kurung (()) yang berisi parameter. Anda dapat menghilangkan tanda kurung jika fungsi hanya memiliki satu parameter.
  • Sebuah panah (=>), yang terdiri dari tanda sama dengan (=) dan tanda lebih besar dari (>).
  • Sepasang kurung kurawal yang berisi badan fungsi. Anda dapat menghilangkan kurung kurawal jika fungsi terdiri dari satu ekspresi.

Misalnya:

// Parameter tunggal, pengembalian implisit
const namafungsi = parameter =>menghibur.catatan("Fungsi panah parameter tunggal")
// Beberapa parameter, pengembalian eksplisit
const namafungsi = (parameter_1, parameter_2) => {
kembali"Fungsi panah beberapa parameter"
};

Saat Anda menghilangkan kurung kurawal, fungsi panah secara implisit mengembalikan ekspresi tunggal, jadi tidak perlu untuk kembali kata kunci. Di sisi lain, jika Anda tidak menghilangkan kurung kurawal, Anda harus mengembalikan nilai secara eksplisit menggunakan the kembali kata kunci.

Fungsi panah juga memiliki perbedaan ini mengikat dibandingkan dengan fungsi biasa. Dalam fungsi reguler, nilai dari ini tergantung pada bagaimana Anda memanggil fungsi. Dalam fungsi panah, ini selalu terikat pada ini nilai lingkup sekitarnya.

Misalnya:

const foo = {
 nama: "Dave",
 menyapa: fungsi () {
 setTimeout(() => {
menghibur.catatan(`Halo, nama saya ${ini.nama}`);
 }, 1000);
 },
};
foo.menyapa(); // Mencatat "Halo, nama saya Dave" setelah 1 detik

Pada contoh di atas, fungsi panah di dalam menyapa metode memiliki akses ke nama ini, meskipun setTimeout fungsi memanggilnya. Fungsi normal akan memilikinya ini terikat pada objek global.

Seperti namanya, fungsi yang segera dipanggil (IIFE) adalah fungsi yang berjalan segera setelah didefinisikan.

Berikut struktur IIFE:

(fungsi () {
// kode di sini
})();
(() => {
// kode di sini
})();
(fungsi (param_1, param_2) {
menghibur.log (param_1 * param_2);
})(2, 3);

IIFE terdiri dari ekspresi fungsi yang dibungkus di dalam sepasang tanda kurung. Ikuti dengan sepasang tanda kurung di luar enklosur untuk menjalankan fungsi.

Anda dapat menggunakan IIFE untuk membuat cakupan, menyembunyikan detail implementasi, dan berbagi data di antara banyak skrip. Mereka pernah digunakan sebagai sistem modul dalam JavaScript.

Membuat Fungsi dengan Berbagai Cara

Memahami cara membuat fungsi dalam JavaScript sangat penting. Ini berlaku untuk fungsi dasar yang menjalankan perhitungan sederhana atau fungsi canggih yang berinteraksi dengan bagian lain dari kode Anda.

Anda dapat menggunakan teknik yang dibahas di atas untuk membuat fungsi dalam JavaScript dan menyusun serta mengatur kode Anda. Pilih pendekatan yang paling sesuai dengan kebutuhan Anda, karena masing-masing memiliki berbagai manfaat dan aplikasi.