Saat membuat aplikasi biasanya kita akan menemukan beberapa statement atau ekspresi yang sama yang dibuat secara berulang, jika ini dilakukan bisa jadi merepotkan, oleh karena itu function di JavaScript hadir. Show
Tidak hanya JavaScript, sebagian besar bahasa pemrograman juga memiliki fungsi, secara umum perilakunya sama, hanya cara penulisannya yang berbeda. Mari kita gunakan studi kasus, untuk mengetahui kapan dan mengapa kita perlu menggunakan fungsi.
Perhatikan kode di atas, kita menggunakan string yang sama secara berulang-ulang yang berubah hanya nama ( Bayangkan jika string atau variabel tersebut berada dibagian lain kode kita, apalagi beda file. Jika kita ingin mengubah tulisan Mari kita gunakan fungsi untuk mengatasi masalah tersebut.
Kode di atas sama dengan yang sebelumnya. Dengan menggunakan fungsi, kode tidak hanya menjadi ringkas, namun juga lebih mudah dikelola. Jika kita ingin mengubah tulisan Nilai variabel yang diinisialisasi dengan fungsi tersebut akan secara otomatis berubah. Untuk nilai dinamis atau berubah-ubah seperti nama, bisa dijadikan sebagai parameter, ini akan berubah secara otomatis tergantung dengan nilai atau argumen yang kita masukkan saat saat fungsi dipanggil. Mari kita pelajari lebih lanjut...
Apa Itu Function?Function atau fungsi adalah "subprogram" yang dapat dipanggil di bagian lain kode kita atau di dalam fungsi itu sendiri (rekursi). Fungsi dapat memiliki serangkaian pernyataan atau statement di badan atau blok fungsi. Di JavaScript, fungsi dapat menerima dan selalu mengembalikan nilai. Jika
kita membuat fungsi yang tidak mengembalikan, fungsi akan tetap mengembalikan nilai Jangan bingung antara fungsi dan method, fungsi biasanya disebut method jika menjadi properti objek. Materi mengenai fungsi sebetulnya cukup banyak dan kompleks, namun di sini kita akan mempelajari dasar-dasarnya saja. Jenis-jenis FunctionAda banyak jenis fungsi yang bisa kita gunakan di JavaScript, kali ini kita akan mempelajari fungsi dasar dan paling sering digunakan. Kita akan mempelajari function declaration, function expression, dan arrow function atau fungsi panah, masing-masing memiliki perilaku berbeda. Function DeclarationFunction Declaration dibuat menggunakan kata kunci Sintaks:
Keterangan:
Contoh:
Function Declaration di-hoisting atau diangkat, itu berarti kita bisa memanggil fungsi sebelum deklarasi.
Perbedaan antara Function Declaration dengan fungsi yang lainnya, Function Declaration selalu diawali dengan kata kunci Function ExpressionMirip seperti Function Declaration, Function Expression dibuat menggunakan kata kunci Sintaks:
Keterangan:
Named Function ExpressionNamed Function Expression adalah Function Expression yang memiliki nama. Nama variabel akan selalu
digunakan sebagai nama fungsi, oleh karena itu nama tepat setelah kata kunci Contoh:
Anonymous Function ExpressionAnonymous Function Expression adalah Function Expression tanpa nama, biasanya digunakan sebagai callback, tidak diinisialisasi ke variabel. Contoh di bawah ini kita mengulang elemen array menggunakan method Method
Kode di atas sama seperti di bawah jika menggunakan Named Function Expression.
Immediately Invoked Function Expression (IIFE)Sesuai dengan namanya, Immediately Invoked Function Expression adalah Function Expression yang langsung dipanggil. Untuk
membuat IIFE kita bisa menggunakan dua pasang kurung buka dan tutup berdampingan Kurung pertama tempat untuk mendeklarasikan Anonymous Function Expression. Kurung kedua digunakan untuk memanggil fungsi tersebut, jika fungsi memiliki parameter kita bisa meneruskan nilai atau argumen ke dalam kurung kedua. Contoh IIFE tanpa parameter:
Contoh IIFE dengan parameter:
Arrow FunctionArrow
Function atau fungsi panah mirip seperti Function Expression, namun tidak memerlukan kata kunci Fungsi panah diawali dengan sepasang kurung lengkung parameter Sintaks:
Keterangan:
Named Arrow FunctionNamed Arrow Function adalah fungsi panah bernama, biasanya diinisialisasi ke dalam variabel, nama variabel tersebut digunakan sebagai nama fungsi. Contoh:
Karena fungsi di atas hanya menerima satu parameter, kita bisa menghilangkan tanda kurung.
Karena fungsi di atas hanya memiliki satu ekspresi dan mengembalikan niali yang dihasilkan ekspresi tersebut, kita bisa mengubahnya menjadi satu baris dengan menghapus kata kunci
Ketiga contoh Named Arrow Function di atas memiliki perilaku yang sama meskipun ditulis dengan cara yang berbeda. Anonymous Arrow FunctionAnonymous Arrow Function adalah fungsi panah tanpa nama, biasanya digunakan sebagai callback. Mari kita gunakan contoh yang sama dengan Anonymous Function Expression, tapi kita ubah callback-nya dengan Anonymous Arrow Function.
Kode di atas sama seperti di bawah ini jika menggunakan Named Arrow Function:
Immediately Invoked Arrow Function (IIAF)Immediately Invoked Arrow Function (IIAF) adalah fungsi panah yang akan langsung dipanggil seperti IIFE. Contoh tanpa parameter:
Contoh dengan parameter:
Function Mengembalikan NilaiDi JavaScript, sebuah fungsi akan selalu mengembalikan nilai, jika fungsi yang dibuat tidak mengembalikan nilai, maka nilai yang dikembalikan adalah Jika kita ingin membuat fungsi yang mengembalikan nilai tertentu, kita
harus menggunakan kata kunci Mari kita lihat perbedaannya. Contoh fungsi yang mengembalikan nilai: Karena
Contoh fungsi yang tidak mengembalikan nilai: Perhatikan bahwa tidak ada kata kunci
Function ScopeDi JavaScript setiap fungsi membuat lingkup baru, ini ada kaitannya dengan istilah closure, namun tidak akan dibahas detail di sini. Untuk memudahkan pemahaman, mari kita langsung gunakan studi kasus. Lihat kode dibawah, kita mendeklarasikan variabel bernama Coba tebak, apakah kita bisa melakukannya?
Jawabannya tidak. Kode di atas mengembalikan kesalah Uncaught ReferenceError: nama is not defined. Bagaimana jika variabel yang dideklarasikan di luar fungsi digunakan di dalam fungsi?
Nah ini bisa. Jadi kesimpulannya, variabel yang dideklarasikan di dalam fungsi atau function scope tidak dapat diakses di luar fungsi, sedangkan variabel yang dideklarasikan di luar fungsi dapat diakses di dalam fungsi. Seperti kaca mobil, dia bisa melihat keluar tapi yang diluar tidak bisa melihat ke dalam. Apa pun kata kunci variabel dan jenis fungsi yang digunakan, soal function scope mereka memiliki perilaku yang sama. Memanggil FunctionSebuah fungsi tidak akan dijalankan selama kita tidak memanggilnya. Saat membuat fungsi itu artinya kita baru mendeklarasikan fungsi tersebut belum digunakan atau dipanggil, apa pun jenis fungsi yang dideklarasikan, kecuali Anonymous Function, IIFE, dan IIFA. Untuk memanggil fungsi kita bisa menulis nama fungsi yang ingin dipanggil diikuti dengan kurung lengkung. Jika fungsi memiliki parameter kita bisa meneruskan nilai atau argumen, Contoh kode di bawah tidak akan menjalankan fungsi karena kita baru mendeklarasikan atau membuat. Statement di dalam fungsi tidak akan dieksekusi, sehingga tidak akan mempengaruhi atau menghasilkan nilai apa pun, namun ini akan disimpan di memori.
Contoh memanggil fungsi.
Jika fungsi dipanggilan tanpa kurung lengkup
Function Parameter dan ArgumenParameter adalah nama variabel atau nama alias argumen atau nilai yang diteruskan ke badan fungsi. Parameter ditulis di dalam kurung lengkung fungsi. Sedangkan argumen adalah nilai yang diteruskan saat fungsi dipanggil. Parameter akan diinisialisasi dengan nilai argumen yang diteruskan. Kita bisa meneruskan nilai tipe data apa pun, entah itu primitif, non-primitif, hingga fungsi. Perhatikan kode di bawah, karena kita meneruskan nilai
Urutan Parameter dan ArgumenUrutan argumen harus sesuai dengan parameter fungsi. Jika kita ingin menginisialisasi parameter pertama, kita harus memasukkan nilai tersebut sebagai argumen pertama, begitu pula dengan parameter berikutnya. Contoh ini sesuai dengan yang kita harapkan, karena kita memasukkan nilai nama Argumen sesuai dengan urutan parameter, sehingga menampilkan pesan sesuai harapan.
Lihat
kode di bawah, ini menghasilkan pesan yang salah karena argumen pertama
Nilai Default ParameterDi JavaScript, nilai default parameter fungsi adalah Jika kita tidak meneruskan argumen atau nilai saat pemanggilan fungsi, maka parameter fungsi akan diinisialisasi dengan nilai Contoh, fungsi
Bagaimana jika kita ingin menentukan nilai default parameter sendiri? Jadi, jika fungsi dipanggil tanpa argumen atau nilai maka nilai yang kita tentukan yang digunakan, bukan Parameter dapat diinisialisasi secara langsung di dalam kurung lengkung menggunakan nilai yang kita tentukan. Mari kita gunakan contoh kode yang sama seperti di atas, sekarang nama akan selalu memiliki nilai yang ditentukan (
Apa gunanya return di JavaScript?Hi, return itu adalah nilai kembalian. artinya dimanapun fungsi itu dipanggil, dia akan berubah menjadi nilai kembalian.
Bagaimana cara membuat fungsi di JavaScript?Ada 4 cara yang bisa kita lakukan untuk membuat fungsi di Javascript:. Menggunakan cara biasa;. Menggunakan ekspresi;. Menggunakan tanda panah ( => );. dan menggunakan Constructor.. Jelaskan apa yang dimaksud dengan function atau method pada JavaScript?Fungsi pada JavaScript adalah sekumpulan kode yang dirancang untuk melakukan tugas tertentu. Sebuah fungsi JavaScript dijalankan ketika ada yang memanggilnya.
|