Apa itu fungsi dalam JavaScript?
Fungsi adalah sekumpulan kode yang dirancang untuk melakukan tugas tertentu. Fungsi di dalam Javascript adalah sebuah objek karena memiliki properti dan juga method.
Sebuah fungsi dapat digunakan kembali di bagian lain kode atau di dalam fungsi itu sendiri (rekursi). Fungsi memungkinkan kumpulan coding dalam fungsi tersebut dieksekusi berulang-ulang, sehingga penulisan kode atau proses yang sama tidak ditulis secara berulang kali.
Di JavaScript, fungsi dapat menerima dan selalu mengembalikan nilai. Jika kita membuat fungsi yang tidak mengembalikan, fungsi akan tetap mengembalikan nilai undefined.
Jangan bingung antara fungsi dan method, fungsi biasanya disebut method jika menjadi properti objek.
Cara membuat fungsi di Javascript
Terdapat beberapa cara untuk membuat fungsi di Javascript berdasarkan jenisnya:
- Function declaration
- Function expression
- Arrow function
1. Function declaration
Function declaration dibuat menggunakan kata kunci function diikuti dengan nama fungsi (wajib), lalu kemudian ditutup dengan kurung buka dan kurung tutup (). Aturan penamaan fungsi sama dengan aturan penamaan variable.
Parameter fungsi terletak di antara kurung buka dan kurung tutup. Satu fungsi bisa mempunyai beberapa parameter yang dipisahkan oleh tanda koma. Kumpulan coding pada suatu fungsi diletakkan di antara { dan }.
Keterangan:
- name: nama fungsi.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
- param (opsional): nama dari nilai-nilai argumen yang dapat diberikan kepada suatu fungsi. Nama parameter mirip dengan nama variable. Sedangkan argumen adalah nilai yang diberikan kepada suatu fungsi. Argumen mirip dengan nilai suatu variable.
Bisa digambarkan seperti ini:
Berikut contoh function declaration.
Pada contoh di atas, angka1 & angka2 adalah parameter dan 2 & 6 adalah argument.
Function declaration dapat dipanggil sebelum deklarasi (Hoisting).
2. Function expression
Function expressions adalah fungsi yang dapat disimpan ke dalam suatu variabel (sebagai nilai variabel). Setelah disimpan, maka variabel tersebut dapat digunakan sebagai fungsi.
Berikut ini sintaksnya :
Keterangan:
- name: nama fungsi.
- param (opsional): nama dari nilai-nilai argumen yang dapat diberikan kepada suatu fungsi. Nama parameter mirip dengan nama variable. Sedangkan argumen adalah nilai yang diberikan kepada suatu fungsi. Argumen mirip dengan nilai suatu variable.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
Perbedaan utama antara function expression dan function declaration, yaitu pada function expression, nama fungsi bersifat opsional (tidak wajib) seperti pada function declaration.
Function expression yang diberi nama disebut named function expressions (NFEs), sedangkan function expression tanpa nama disebut anonymous function expression, biasanya digunakan sebagai callback, tidak diinisialisasi ke variabel.
Contoh function expression yang diberi nama (named function expressions):
Dari contoh di atas, variabel x bernilai fungsi dengan dua parameter (a dan b), fungsi tersebut mengembalikan nilai a dikali b dan dapat dipanggil sebagai fungsi (function expression) seperti berikut.
Contoh function expression tanpa nama (anonymous function expression):
Pada contoh di atas, kita membuat function sebagai argumen dalam method atau function lain. Dalam contoh ini, kita menggunakan function ke dalam setTimeout() function. Dimana function yang dibuat tersebut adalah sebagai argumen yang akan dijalankan setelah 1 detik.
Selain menggunakan function expression sebagai argumen, kita juga bisa membuat function expression dan langsung menjalankannya. Ini dinamakan Immediately Invoked Function Expression (IIFE).
Berikut ini sintaksnya :
Keterangan:
- param (opsional): nama dari nilai-nilai argumen yang dapat diberikan kepada suatu fungsi. Nama parameter mirip dengan nama variabel. Sedangkan argumen adalah nilai yang diberikan kepada suatu fungsi. Argumen mirip dengan nilai suatu variabel.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
Berikut contoh IIFE tanpa parameter:
Contoh IIFE dengan parameter:
3. Arrow Function
Arrow Function adalah cara penulisan singkat untuk function expression. Yang berbeda disini kita tidak perlu menggunakan keyword function.
Berikut ini sintaksnya:
Keterangan:
- name: nama fungsi.
- param (opsional): nama dari nilai-nilai argumen yang dapat diberikan kepada suatu fungsi. Nama parameter mirip dengan nama variable. Sedangkan argumen adalah nilai yang diberikan kepada suatu fungsi. Argumen mirip dengan nilai suatu variable.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
Kita tidak perlu menuliskan {} serta keyword function dan return jika fungsi hanya memiliki satu ekspresi satu baris coding. Pada contoh berikut ini, fungsi x hanya memiliki ekspresi a * b.
Keyword return dan {} tetap diperlukan apabila fungsi ini berisi lebih dari satu ekpresi baris coding. Sebaiknya dibiasakan tetap menuliskan keyword return dan {} pada arrow function.
Tanda kurung menjadi opsional jika kita hanya punya 1 parameter.
Kita juga bisa membuat function sebagai argumen dalam method atau function lain menggunakan arrow function. Berikut contohnya:
Contoh di atas adalah arrow function tanpa nama atau anonymous arrow function, biasanya digunakan sebagai callback dan tidak diinisialisasi ke variabel. Pada contoh di atas kita menggunakan function ke dalam setTimeout() function. Fungsi yang ditulis sebagai argumen akan dijalankan setelah 1 detik.
Selain menggunakan arrow function sebagai argumen, kita juga bisa membuat function dan langsung menjalankannya yang dinamakan Immediately Invoked Arrow Function (IIAE).
Berikut ini sintaksnya:
Keterangan:
- param (opsional): nama dari nilai-nilai argumen yang dapat diberikan kepada suatu fungsi. Nama parameter mirip dengan nama variable. Sedangkan argumen adalah nilai yang diberikan kepada suatu fungsi. Argumen mirip dengan nilai suatu variable.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
Contoh tanpa parameter:
Contoh dengan parameter:
Return dalam Function
Di JavaScript, sebuah fungsi akan selalu mengembalikan nilai, jika fungsi yang dibuat tidak mengembalikan nilai, maka nilai yang dikembalikan adalah undefined.
Jika kita ingin membuat fungsi yang mengembalikan nilai tertentu, kita harus menggunakan keyword return diikuti oleh nilai yang ingin dikembalikan.
Contoh fungsi yang mengembalikan nilai:
Contoh fungsi yang tidak mengembalikan nilai:
Pada contoh di atas, tidak ada keyword return di dalam function cekNilai, tetapi secara default function tetap mengembalikan nilai undefined.
Pemanggilan Fungsi
Saat membuat fungsi itu artinya kita baru mendeklarasi fungsi tersebut, kecuali jika kita membuat fungsi menggunakan anonymous function, IIFE, dan IIFA.
Untuk menjalankan fungsi (mengeksekusi statements fungsi), kita dapat memanggil fungsi tersebut dengan menyebutkan nama fungsi diikuti dengan kurung lengkung () seperti ini:
Jika fungsi memiliki parameter maka parameter fungsi diberikan oleh baris coding yang memanggil fungsi tersebut.
Cara Memanggil Fungsi di Dokumen HTML
Setelah kita mendeklarasikan suatu fungsi dan kemudian ingin kita gunakan maka kita perlu memanggilnya.
Ada 3 cara memanggil fungsi di javascript yaitu:
- Memanggil fungsi secara langsung dari dokumen HTML
- Memanggil dengan hyperlink
- Menggunakan Event
Sebelum mulai pembahasan, perlu diingat kembali, untuk bisa menyisipkan kode JavaScript di dalam file HTML, caranya dengan menuliskan kode JavaScript di dalam tag <script> html. Tag <script> bisa ditulis di dalam <head> maupun di dalam bagian akhir dari <body>.
Memanggil Fungsi Secara Langsung dari Dokumen HTML
Kita dapat langsung memanggil suatu fungsi yang telah dibuat dalam dokumen HTML.
Pada contoh di atas, kita membuat fungsi Hello() di dalam tag <head> kemudian kita panggil fungsi tersebut dari tag <body>.
Harap diperhatikan karena program yag dibuat secara sekuensial (program di eksekusi dari atas ke bawah) maka pendeklarasian fungsi harus terlebih dahulu di deklarasikan sebelum kita memanggilnya.
Memanggil Fungsi Dari Hyperlink
Fungsi juga dapat dipanggil dari hyperlink melalui atribut href. Perhatikan contoh dibawah ini:
Kita dapat memanggil fungsi javascript dari link lewat atribut href dengan nilai ‘Javascript:nama_fungsi()’ , penggunaan ini bisa kita terapkan saat ingin membuat sebuah aksi saat pengguna mengklik link.
Menggunakan Event (Reaksi Terhadap Suatu kejadian)
Javascript mampu memberikan reaksi pada suatu elemen HTML yaitu dengan menggunakan event. Ada banyak jenis event namun saya akan beri 2 contoh event berikut:
- OnClick : Kejadian yang terjadi ketika suatu elemen di klik
- OnChange : Kejadian yang terjadi ketika nilai suatu elemen berubah
Contoh Event Onclick:
Hasilnya seperti ini:
Pada contoh diatas, fungsi Hello() dipanggil melalui event onclick, ketika pengguna mengklik link tersebut maka akan memicu event ini terjadi.
Contoh Event Onchange
Hasilnya seperti ini:
Pada contoh di atas, fungsi akan di panggil dari event onchange, ketika terdapat perubahan nilai dalam combobox maka memicu event ini bekerja.
Selesai.
Referensi:
https://kodealgo.com/javascript/function/
https://nextgen.co.id/fungsi-pada-javascript/
https://kelasprogrammer.com/membuat-fungsi-javascript/
0 Komentar