Dalam pemrograman, fungsi sering digunakan untuk membungkus program menjadi bagian-bagian kecil. Logika program yang ada di dalam fungsi dapat kita gunakan kembali dengan memanggilnya, sehingga tidak perlu menulis ulang.
Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu sendiri, maupun di program yang lain.
Fungsi di dalam Javascript adalah sebuah objek, karena memiliki properti dan juga method. Bagi pemula konsep ini cukup membingungkan, apalagi yang belum mengenal konsep OOP.
Ada 4 cara yang bisa kita lakukan untuk membuat fungsi di JavaScript :
- Menggunakan cara biasa
- Menggunakan ekspresi
- Menggunakan tanda panah (=>)
- dan menggunakan Constructor.
1. Membuat Fungsi dengan Cara Biasa
Cara ini paling sering digunakan, terutama buat yang baru belajar Javascript. Cara penulisannya seperti berikut :
function namaFungsi(){
console.log("Hello World!");
}
2. Membuat Fungsi dengan Ekspresi
Cara membuat fungsi dengan ekspresi :
var namaFungsi = function(){
console.log("Hello World!");
}Kita menggunakan variabel, lalu diisi dengan fungsi. Fungsi ini sebenarnya adalah fungsi anonim (anonymous function) atau fungsi tanpa nama.
3. Membuat Fungsi dengan Tanda Panah
Cara ini sering digunakan di kode Javascript masa kini, karena lebih sederhana. Akan tetapi sulit dipahami bagi pemula. Fungsi ini mulai muncul pada standar ES6.
Contoh :
var namaFungsi = () => {
console.log("Hello World!");
}Atau seperti ini jika isi fungsi hanya satu baris :
var namaFungsi = () => console.log("Hello World!");Sebenarnya hampir sama dengan yang menggunakan ekspresi, bedanya kita menggunakan tanda panah (=>) sebagai ganti function. Pembuatan fungsi dengan cara ini disebut arrow function.
4. Membuat Fungsi dengan Kostruktor
Cara ini sebenarnya tidak direkomendasikan oleh Developer Mozilla, karena terlihat kurang bagus. Karena body fungsinya dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine javascript.
Contoh :
var namaFungsi = new Function('console.log("Hello World!");');Untuk yang masih pemula, direkomendasikan gunakan cara yang pertama dulu. Jila sudah terbiasa baru coba gunakan cara ke-2 dan ke-3.
Cara Memanggil/Eksekusi Fungsi
Kita bisa memanggil fungsi di 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 dengan cara di atas, kita juga bisa memanggil fungsi melalui atribut event pada HTML.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript pada Event</title>
<script>
// membuat fungsi
var sayHello = () => alert("Hello World!");
</script>
</head>
<body>
<!-- Memanggil fungsi saat link diklik -->
<a href="#" onclick="sayHello()">Klik Aku!</a>
</body>
</html>Hasilnya :
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);
}
//memanggil fungsi
kali(3,2);Pada contoh di atas a dan b adalah sebuah parameter, lalu cara memanggil fungsinya dengan kali(3,2).
Hasilnya pada saat dicoba pada console seperti berikut :
Kita memberikan 3 untuk parameter a dan 2 untuk parameter b, maka akan menghasilkan nilai 6.
Fungsi yang Mengembalikan Nilai
Agar hasil pengolahan nilai di dalam fungsi dapat digunakan untuk proses berikutnya, maka fungsi 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 = 20;
var nilai2 = 5;
var hasilPembagian = bagi(nilai1, nilai2);
console.log(hasilPembagian);Hasilnya pada saat dicoba pada console seperti berikut :
Contoh Program Javascript dengan Fungsi
Sekarang kita akan mencoba membuat program sederhana, dengan membuat program yang berisi CRUD (Crete, Read, Update, Delete) data barang yang tersimpan dalam sebuah array.
Silahkan buat dua file baru dengan nama di dalam folder project :
- fungsicrud.js
- index.html
File index.html adalah file yang menampilkan halaman web, sedangkan file fungsi.js adalah programnya.
index.html :
<!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>Input Form</legend>
<input type="text" name="barang" placeholder="input nama barang..." />
<input type="button" onclick="addBarang()" value="Tambah" />
</fieldset>
<div>
<ul id="list-barang">
</ul>
</div>
<script src="fungsicrud.js"></script>
</body>
</html>Selanjutnya kita buat kode di file fungsi.js, pada contoh ini kita akan menggunakan cara yang pertama (cara biasa) karena lebih mudah.
fungsicrud.js :
var dataBarang = [
"Buku Tulis",
"Pensil",
"Spidol"
];
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();Hasilnya :
Demikian tutorial mengenai fungsi pada javascript, fungsi merupakan hal yang wajib dipahami di dalam Javascript, karena kedepan kita akan banyak bekerja dengan fungsi baik dalam membuat objek, manipulasi HTML, melakukan ajax dan sebagainya. Semoga bermanfaat.
Referensi :
- https://www.petanikode.com/javascript-fungsi/
Be the first to comment