Fungsi JavaScript : Pengertian dan Contoh Penggunaan

Sebagai pembuat program ada banyak perintah yang akan kita buat. Penyederhanaan dan pemanfaatan ulang blok perintah yang telah di buat merupakan bentuk penulisan program yang efektif.

Hal ini adalah salah satu keunggulan yang ada pada fungsi. Dengan membuat fungsi maka kita akan memecah script dengan mengelompokkan sesuai dengan jenis tugas dan bagian prosedur yang akan diselesaikan.

Pengertian Fungsi

Kita contohkan misalnya salah satu bagian menu dari program yang dibuat memerlukan operasi perkalian. hal yang akan kita lakukan adalah mendefinisikan sebuah fungsi perkalian. Selanjutnya setiap operasi perkalian di menu tersebut diselesaikan dengan cara memanggil fungsi yang telah di definisikan tersebut.

Jika fungsi yang dibuat ditempatkan di file lain kita dapat memanggilnya dan tidak menutup kemungkinan fungsi perkalian yang telah dibuat juga dapat digunakan oleh menu lain.

Dengan demikian pengertian fungsi adalah blok pernyataan yang memiliki tugas tertentu dan dapat digunakan secara berulang-ulang. Tujuan dibuatnya fungsi yaitu untuk membuat script program terstruktur dan berbentuk object oriented(OOP) sehingga programmer dapat bekerja lebih efektif dalam menyelesaikan program yang dibuat.

Berkaitan dengan cara penggunaan sebuah fungsi di JavaScript …..

yuk langsung saja kita bahas….

1. Penulisan Syntax Fungsi JavaScript

Untuk membuat fungsi di JavaScript penulisannya adalah sebagai berikut:

function namaFungsi(p1, p2, p3,dst..){
//kode program yang akan dieksekusi
}

Keterangan

  • namaFungsi adalah nama dari function yang dibuat.
  • p1, p2 adalah parameter. dapat berupa number,string atau lainnya sesuai dengan tipe data yang akan dieksekusi melalui fungsi yang dibuat.

2. Contoh Penerapan Fungsi di JavaScript

Fungsi di JavaScript dapat kita buat melalui beberapa cara. Untuk dapat memahami bagaimana penulisan dan penggunaan sebuah fungsi di JavaScript dapat kita lihat dari beberapa contoh di bawah ini :

1. Fungsi Penjumlahan Sederhana JavaScript

Contoh penulisan fungsi penjumlahan dibuat secara (Internal)

<html>

<head>
    <title>Belajar JavaScript : Contoh Fungsi Internal</title>
</head>

<body>
    <h2>Menggunakan Fungsi Internal</h2>
    Hasil dari Penjumlahan Adalah :
    <p id="hasil"></p>

    <script type="text/javascript">
        let val1;
        let val2;

        //script fungsi penjumlahan di dalam file html(internal)
        function penjumlahan(val1, val2) {
            document.getElementById("hasil").innerHTML = val1 + val2;
        }
        penjumlahan(190, 30);
    </script>

</body>

</html>

Perhatikan script di atas kita menempatkan function penjumlahan di dalam script HTML. Ini adalah salah satu contoh dari fungsi yang ditulis secara internal

Output

Penulisan fungsi internal di JavaScirpt
Penulisan fungsi internal di JavaScirpt

Contoh Penerapan fungsi penjumlahan (External)

<html>
<head>
    <!-- memanggil fungsi penjumlahan di file ins_fungsi.js -->
    <script src="ins_fungsi.js"></script>
    <title>Belajar JavaScript : Contoh Fungsi external</title>

</head>

<body>
    <h2>Menggunakan Fungsi External</h2>
    Hasil dari Penjumlahan Adalah :
    <p id="hasil"></p>

    <!-- Eksekusi penggunaan fungsi -->
    <script type="text/javascript">        
        penjumlahan(120, 30);
    </script>

</body>

</html>

terlihat pada script di atas kita memanggil file ins_fungsi.js. silahkan buat file ins_fungsi.js dan masukkan script di bawah ini

// fungsi external JavaScript
function penjumlahan(val1, val2) {
    document.getElementById("hasil").innerHTML = val1 + val2;
}

Output :

contoh fungsi javascript external
Bentuk Penulisan Fungsi External di JavaScript

Dengan Menempatkan fungsi terpisah (external) maka fungsi tersebut dapat digunakan oleh file lain. Pada contoh di atas didalam file ins_fungsi.js kita dapat juga menambahkan fungsi lain seperti pengurangan, perkalian dan pembagian.

2. Membuat Fungsi dengan Return

Sebuah function juga dapat mengembalikan sebuah nilai. Untuk mengembalikan nilai di dalam sebuah fungsi kita gunakan return.

contoh :

<html>

<head>    
    <title>Belajar JavaScript : Contoh Fungsi dengan Return</title>
</head>

<body>
    <h2>Contoh Fungsi dengan Return</h2>
    Hasil dari Penjumlahan Adalah :
    <p id="hasil"></p>

    <script type="text/javascript">
        let val1 = 200;
        let val2 = 5;

        // fungsi return JavaScript
            function jumlah(val1, val2) {
                var jum = val1 * val2;
                return jum;
            }
        
        document.getElementById("hasil").innerHTML =  jumlah(val1, val2);
    </script>

</body>

</html>

3. Fungsi dengan Tanda Panah

Selain membuat function dengan cara biasa, di JavaScript kita bisa membuat fungsi menggunakan notasi tanda panah (=>). Cara memanggil fungsi yang dibuat dengan cara ini juga sama dengan memanggil fungsi biasa.

Ini adalah contoh fungsi yang dibuat menggunkan =>

    <script type="text/javascript">
        var testFungsi = () => {
            console.log("Belajar JavaScript:  fungsi 'testFungsi' ini dibuat dengan tanda panah");
        }

        testFungsi();//output : Belajar JavaScript:  fungsi 'testFungsi' ini dibuat dengan tanda panah
    </script>

Penutup. …

Dengan belajar function di tutorial JavaScript ini kita melakukan pemecahan 1 script program menjadi bagian-bagian tertentu. Bagian yang telah dipecah ini dapat ditempatkan di file yang sama dari file awal atau dapat juga dibuatkan terpisah. Mengenal function telah memabantu kita memahami cara memebuat program dengan cara baru dengan ciri lebih terstruktur dan reuseable.

Tutorial Lanjutan

Belajar Array JavaScript 

Leave a comment