Belajar Javascript #9 – Cara membuat function Javascript

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 :

Cara membuat function javascript

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 :

Cara membuat function javascript

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.

Cara membuat function javascript

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 :

Cara membuat function javascript

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

Tinggalkan Balasan

Ads Blocker Image Powered by Code Help Pro

Pemblokir Iklan Terdeteksi!!!

Kami mendeteksi bahwa Anda menggunakan ekstensi untuk memblokir iklan. Silahkan menonaktifkan pemblokir iklan ini. Lalu refresh halaman ini untuk membuka konten ini !!!

Scroll to Top