Pada artikel kali ini, kita akan membahas tentang function di Javascript. Mulai dari cara membuat, memanggil, hingga membuat program CRUD sederhana.
Dalam pemrograman, function digunakan untuk membuat suatu perintah yang nantinya dapat digunakan secara berulang dengan memanggilnya, sehingga tidak perlu menulis ulang. Fungsi di dalam Javascript memiliki properti dan juga method, maka function juga bisa dibilang adalah sebuah objek.
Sintaks Fungsi JavaScript
Function pada JavaScript didefinisikan dengan keyword function, diikuti dengan nama, dan tanda kurung (). Nama function dapat berisi huruf, angka, underscore, dan tanda dolar. Tanda kurung juga memungkinkan untuk menyertakan nama parameter yang dipisahkan dengan koma: (parameter1, parameter2, …) Kode yang akan dijalankan oleh fungsi ditempatkan di dalam tanda kurung kurawal: {}
function name(parameter1, parameter2, parameter3)
{
// kode untuk dieksekusi
}
Sebelum membuat function, pertama kita pahami terlebih dahulu cara membuat function di JavaScript, yakni sebagai berikut.
Cara Membuat function di Javascript
Ada 4 cara yang bisa kita lakukan untuk membuat function yaitu :
1. Membuat function di Javascript dengan Cara Biasa
Cara pertama ini paling sering digunakan, terutama buat kita yang masih baru belajar Javascript.
function namaFungsi()
{
console.log("Hello World!");
}
2. Membuat function dengan Ekspresi
Pada cara kedua ini, kita menggunakan variabel, setelah itu diisi dengan function. function ini sebenarnya adalah fungsi anonim (anonymous function) atau fungsi tanpa nama.
var namaFungsi = function()
{
console.log("Hello World!");
}
3. Membuat function di Javascript dengan Tanda Panah
Function ini mulai muncul pada standar ES6. Cara membuat function ini hampir sama dengan yang menggunakan ekspresi. Bedanya, kita menggunakan tanda panah (=>) sebagai ganti function.
var namaFungsi = () =>
{
console.log("Hello World!");
}
4. Membuat function dengan Konstruktor
Pada cara ini kurang direkomendasikan, karena body function nya dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine javascript. Selain itu, cara ini juga tidak disarankan oleh Developer Mozilla. Jadi bagi kita yang baru belajar, sebaiknya gunakan cara yang pertama terlebih dahulu.
var namaFungsi = new Function('console.log("Hello World!");');
Cara Memanggil function
Kita bisa memanggil function di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini:
namaFungsi();
Contoh :
//Membuat Fungsi dengan Cara Biasa
function namaFungsi()
{
console.log("Hello World!");
}
// memanggil fungsi
namaFungsi() // maka akan menghasilkan -> Hello World!
Hasilnya :
Memanggil Function Dari Hyperlink
Selain dengan cara di atas, function juga dapat dipanggil dari hyperlink melalui atribut href pada HTML. Perhatikan contoh dibawah ini:
<!DOCTYPE html>
<html>
<head>
<script>
// membuat fungsi
var sayHello = () => alert("selamat datang di praktekotodidak.com");
</script>
</head>
<body>
<!-- Memanggil fungsi saat link diklik -->
<a href="#" onclick="sayHello()">Klik Disini</a>
</body>
</html>
Hasilnya :
Kita bisa memanggil function dari link lewat atribut href dengan nilai ‘Javascript:nama_fungsi()’ penggunaan ini dapat bisa di terapkan saat ingin membuat sebuah aksi saat pengguna mengklik link. Dapat dilihat pada contoh diatas function sayHello() dipanggil melalui event onclick, ketika pengguna mengklik link tersebut maka akan memicu event ini terjadi.
Function dengan Parameter
Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam function. Di javascript pelewatan parameter bisa dilakukan dengan nilai (value)
Contoh :
function kali(a, b)
{
hasilKali = a * b;
console.log("Hasil kali a*b = " + hasilKali);
}
kali(5, 2); // -> Hasil kali a*b = 10
Ketika function tersebut dipanggil maka, harus kita sematkan nilai (value) untuk masing-masing parameter dalam fungsi tersebut.
Pada contoh di atas, a dan b adalah sebuah parameter. Lalu kita memberikan 5 untuk parameter a dan 2 untuk parameter b.
Function yang Mengembalikan Nilai
Agar hasil pengolahan nilai di dalam function dapat digunakan untuk proses berikutnya, maka function harus mengembalikan nilai. Pengembalian nilai pada fungsi menggunakan kata kunci return kemudian diikuti dengan nilai atau variabel yang akan dikembalikan.
Contoh :
function bagi(a,b)
{
hasilBagi = a / b;
return hasilBagi;
}
// memanggil fungsi
var nilai1 = 10;
var nilai2 = 2;
var hasilPembagian = bagi(nilai1, nilai2);
console.log(hasilPembagian); //-> 5
Hasilnya :
Contoh Program function pada Javascript
Setelah kita memahami dasar-dasar dalam pembuatan function, sekarang kita akan mencoba membuat program sederhana yaitu CRUD (Crete, Read, Update, Delete). Program ini berisi data barang yang tersimpan dalam sebuah array. Pada contoh program ini kita akan menggunakan cara yang pertama, karena lebih mudah dibuat.
Langkah pertama buat dua file baru :
Keterangan :
- File index.html adalah file yang menampilkan halaman web.
- file fungsi.js adalah programnya.
Setelah itu isi file index.html dengan kode berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Fungsi di Javascript</title>
</head>
<body>
<fieldset>
<legend>Masukkan Nama Barang</legend>
<input type="text" name="barang" placeholder="tulis disini..." />
<input type="button" onclick="addBarang()" value="Tambah" />
</fieldset>
<div>
<ul id="list-barang">
</ul>
</div>
<script src="fungsi.js"></script>
</body>
</html>
Lalu isi file fungsi.js dengan kode berikut :
var dataBarang = [
"Komputer",
"Laptop",
"Monitor",
"AC Split",
"TV 32Inch"
];
function showBarang(){
var listBarang = document.getElementById("list-barang");
// clear list barang
listBarang.innerHTML = "";
// cetak semua barang
for(let i = 0; i < dataBarang.length; i++){
var btnEdit = "<a href='#' onclick='editBarang("+i+")'>Edit</a>";
var btnHapus = "<a href='#' onclick='deleteBarang("+i+")'>Hapus</a>";
listBarang.innerHTML += "<li>" + dataBarang[i] + " ["+btnEdit + " | "+ btnHapus +"]</li>";
}
}
function addBarang(){
var input = document.querySelector("input[name=barang]");
dataBarang.push(input.value);
showBarang();
}
function editBarang(id){
var newBarang = prompt("Nama baru", dataBarang[id]);
dataBarang[id] = newBarang;
showBarang();
}
function deleteBarang(id){
dataBarang.splice(id, 1);
showBarang();
}
showBarang();
Maka hasilnya akan terlihat seperti gambar dibawah ini :
Begitulah cara membuat, memanggil, hingga membuat program CRUD sederhana menggunakan function pada javascript. Baca juga artikel selanjutnya yaitu Belajar Javascript #10 Membuat objek di Javascript
