Pemrograman, desain, pengujian, menanggapi umpan balik pengguna, dan menulis semua materi untuk situs web ini dilakukan oleh Toni Podmanicki, Paul Irish, dan Jeremy Hill. Kami mengucapkan terima kasih kepada semua pihak yang telah membantu dan berkontribusi dalam bentuk apapun. Semoga halaman ini bermanfaat bagi Anda
Fungsi adalah sub-program yang dapat digunakan kembali baik di dalam program itu sendiri maupun di program lain
Fungsi dalam Javascript adalah objek. Karena memiliki properti dan juga metode
Bagi pemula konsep ini cukup membingungkan. Terutama yang belum familiar dengan konsep OOP
Tapi hanya tentang…
Mari kita belajar tentang fungsi terlebih dahulu, nanti saya akan membahas tentang objek pada kesempatan yang berbeda
4 Cara Membuat Fungsi di Javascript
Ada 4 cara yang bisa kita lakukan untuk membuat sebuah function di Javascript
- Menggunakan cara biasa;
- Menggunakan ekspresi;
- Menggunakan panah (var namaFungsi = function(){ console.log("Hello World!"); }_3);
- dan menggunakan Konstruktor
Mari kita coba semuanya…
1. Membuat Fungsi dengan Cara Normal
Cara ini paling sering digunakan, terutama bagi yang baru belajar Javascript
function namaFungsi(){ console.log("Hello World!"); }_
2. Membuat Fungsi dengan Ekspresi
Cara membuat fungsi dengan ekspresi
var namaFungsi = function(){ console.log("Hello World!"); }
Kami menggunakan variabel, lalu mengisinya dengan fungsi. Fungsi ini sebenarnya adalah fungsi anonim
3. Membuat Fungsi dengan Panah
Metode ini sering digunakan dalam kode Javascript saat ini, karena lebih sederhana. Tetapi sulit untuk dipahami bagi pemula. Fungsi ini mulai muncul di standar ES6
Contoh
var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");
Ini sebenarnya hampir sama dengan menggunakan ekspresi. Bedanya, kita menggunakan panah (var namaFungsi = function(){ console.log("Hello World!"); }3) bukan var namaFungsi = function(){ console.log("Hello World!"); }5
Membuat fungsi dengan cara ini disebut fungsi panah
4. Membuat Fungsi dengan Konstruktor
Cara ini sebenarnya tidak disarankan oleh Mozilla Developers, karena tampilannya kurang bagus. Masalahnya body fungsi dibuat dalam bentuk string yang dapat mempengaruhi kinerja mesin javascript
Contoh
var namaFungsi = new Function('console.log("Hello World!");');_
Untuk pemula, saya sarankan menggunakan cara pertama terlebih dahulu. Nanti kalau sudah terbiasa, coba gunakan cara ke-2 dan ke-3
Lihat postingan ini di Instagram
Postingan yang dibagikan oleh Petani Kode. Pengodean & Pengembangan (@petanikode)
Cara Memanggil/Menjalankan Fungsi
Setelah mengetahui cara membuat fungsi, lalu bagaimana cara memanggilnya?
Kita dapat memanggil fungsi tersebut dalam kode Javascript dengan menuliskan nama fungsinya seperti ini
namaFungsi();
Contoh
// membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World! _
Selain cara di atas, kita juga bisa memanggil fungsi tersebut melalui atribut event pada HTML
Contoh
<!DOCTYPE html> <html> <head> <script> // membuat fungsi var sayHello = () => alert("Hello World!"); </script> </head> <body> <!-- Memanggil fungsi saat link diklik --> <a href="#" title="sayHello()">Klik Aku!</a> </body> </html>_
Hasil
Fungsi dengan Parameter
Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi
Contoh
function kali(a, b){ hasilKali = a * b; console.log("Hasil kali a*b = " + hasilKali); }
Pada contoh di atas, var namaFungsi = function(){ console.log("Hello World!"); }6 dan var namaFungsi = function(){ console.log("Hello World!"); }7 adalah parameter
Lalu cara memanggil fungsi yang memiliki parameter adalah seperti ini
kali(3, 2); // -> Hasil kali a*b = 6
Kami memberikan var namaFungsi = function(){ console.log("Hello World!"); }8 untuk parameter var namaFungsi = function(){ console.log("Hello World!"); }6 dan var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");0 untuk parameter var namaFungsi = function(){ console.log("Hello World!"); }7
Fungsi yang Mengembalikan Nilai
Agar hasil pengolahan nilai pada fungsi dapat digunakan untuk proses selanjutnya, fungsi tersebut harus mengembalikan nilai
Mengembalikan nilai ke fungsi menggunakan kata kunci var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");2 kemudian diikuti dengan nilai atau variabel yang akan dikembalikan. Contoh
function bagi(a,b){ hasilBagi = a / b; return hasilBagi; } // memanggil fungsi var nilai1 = 20; var nilai2 = 5; var hasilPembagian = bagi(nilai1, nilai2); console.log(hasilPembagian); //-> 4
Contoh Program Javascript dengan Fungsi
Setelah kita memahami dasar-dasar pembuatan fungsi dan tipe-tipenya, sekarang mari kita coba membuat program sederhana
Program ini berisi data item CRUD (Crete, Read, Update, Delete) yang disimpan dalam array
Silakan buat dua file baru
var namaFungsi = function(){ console.log("Hello World!"); }0
File var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");_3 adalah file yang menampilkan halaman web. Sedangkan file var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");_4 adalah programnya
Berikut isi file var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");3
var namaFungsi = function(){ console.log("Hello World!"); }_1
Selanjutnya kita akan membuat kode di file var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");4. Silakan gunakan gaya pembuatan fungsi yang Anda suka
Dalam contoh ini, kita akan menggunakan cara pertama. Karena lebih mudah
Berikut isi file var namaFungsi = () => { console.log("Hello World!"); } // atau seperti ini (jika isi fungsi hanya satu baris): var namaFungsi = () => console.log("Hello World!");_4
var namaFungsi = function(){ console.log("Hello World!"); }_2
Hasil
Demo langsung. kode petani. github. io/js-fungsi/
Kata Akhir…
Fungsi merupakan hal yang harus dipahami dalam Javascript, karena kedepannya kita akan banyak bekerja dengan fungsi baik dalam membuat objek, memanipulasi HTML, melakukan ajax dan lain sebagainya.
Artikel ini hanya mengajarkan dasar-dasarnya. Padahal, masih banyak hal yang harus dibahas tentang fungsi