Cara menggunakan PARAMATER pada JavaScript

Jika fungsi ini disebut dengan argumen yang hilang (kurang dari dinyatakan), nilai-nilai yang hilang ditetapkan untuk: terdefinisi

Kadang-kadang ini dapat diterima, tapi kadang-kadang lebih baik untuk menetapkan nilai default untuk parameter:

Contoh

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    }
}

Jika fungsi ini disebut dengan terlalu banyak argumen (lebih dari dinyatakan), argumen ini dapat dicapai dengan menggunakan argumen objek.

Argumen Object

fungsi JavaScript memiliki built-in objek disebut argumen objek.

Objek Argumen berisi array argumen yang digunakan saat fungsi dipanggil (dipanggil).

Dengan cara ini Anda dapat menggunakan fungsi untuk menemukan (misalnya) nilai tertinggi dalam daftar nomor:

Contoh

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i;
    var max = -Infinity;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

Atau membuat fungsi untuk jumlah semua nilai input:

Contoh

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

Argumen yang Dilalui Nilai

Parameter, dalam panggilan fungsi, argumen fungsi ini.

Argumen JavaScript tersebut diteruskan oleh nilai: Fungsi hanya mendapat tahu nilai-nilai, bukan lokasi argumen ini.

Dalam artikel sebelumnya kita sudah membahas apa itu fungsi, kegunaannya dan bagaimana cara membuatnya. Sekarang kita akan membahas parameter, secara umum sebenarnya parameter dapat diartikan luas yaitu sebuah acuan nilai yang digunakan untuk menarik sebuah kesimpulan. Sedangkan dalam artikel ini parameter adalah sebuah nilai yang akan diolah oleh sebuah fungsi dan bersifat dinamis (bergantung dengan apa yang akan kita olah dalam sebuah fungsi). Untuk dapat menggunakan parameter dalam sebuah fungsi kita butuh mengoper sebuah parameter atau sebuah nilai kedalam fungsi tersebut (parsing) dan juga jumlah parameternya pun dapat lebih dari satu. Parameter yang dapat diparsing dalam sebuah fungsi dapat berupa interger atau number, string, object ataupun array, sekali lagi bergantung pada apa yang akan diolah pada fungsi tersebut.

function namaFungsi(parameter){

// action

}

Secara konsep dasar hal diatas adalah cara kita mendefinisikan fungsi dengan parameter. Berikut adalah contohnya:

Dalam blog diatas kita sudah mendeklarasikan sebuah fungsi yaitu add dengan parameter a didalamnya yang akan kita gunakan sebagai nilai return (kembali) dari fungsi tersebut, setelah itu kita mendefinisikan variabel nilaiAdd dengen fungsi add dengan memparsing nilai 9 dalam fungsi add, secara otomatis nilai 9 nantinya akan menjadi variabel a di dalam fungsi add yang dijadikan sebagai return. Apa buktinya? ketika kita console.log nilai add akan bernilai 9. Contoh diatas adalah kita parsing satu nilai kedalam atau parameter bagaimana kalau lebih dari satu parameter?

Cara parsing 2 atau lebih parameter dalam sebuah fungsi menggunakan tanda koma "," seabagai pemisah antara parameter pertama dan kedua. Contohnya adalah blok pemrograman diatas antara parameter a dan b.

Default Parameter

Dalam menggunakan parameter kita juga dapat menggunakan default parameter. Defautl parameter adalah sebuah nilai default yang akan digunakan ketika kita tidak memparsing sebuah nilai kedalam sebuah fungsi. Jika kita melihat contoh diatas dan kita tidak memparsing parameter yang dibutuhkan pada fungsi tersebut hal ini akan meyebabkan error. Sebagai contoh:

Dalam contoh diatas kita sudah menggunakan default parameter yang dicontohkan pada paramter b, dengan cara mendefinisikan parameter b dengan nilai 2. Lalau kita hanya memparsing satu nilai yaitu nilai 9 yang akan menjadi parameter a.

Dengan ini akan mendapatkan hasil yang berbeda ketika kita memparsing kedua nilai. Dalam hal ini kita akan menggambil kesimpulan bahwa dalam fungsi add nilai parameter b akan bernilai 2 jika tidak ada nilai parameter b yang dioper.

Fungsi atau yang bisa kita sebut prosedur adalah suatu blog program yang mempunyai tugas tertentu berdasarkan tujuan dari fungsi/prosedur itu sendiri. Dalam bahas pemrograman lain seperti pascal fungsi dan prosedur dibedakan dalam cara pendeklarasian, contohnya di dalam pascal ada pernyataan procedure dan function untuk pendeklarasiannya, Namun di javascript tidak ada perbedaan secara khusus dalam cara pendeklarasian untuk fungsi maupun prosedur. Cara untuk mengetahui apakah suatu blok program merupakan fungsi adalah jika memiliki nilai balik (return value) sedangkan prosedur tidak memiliki.

Artikel terkait : Perbedaan fungsi dan prosedur di C++

Penggunaan fungsi dan prosedur akan sering digunakan saat teman-teman menerapkan konsep object oriented programming (OOP). Konsep ini akan kita bahas di artikel lain.

Daftar Isi

2 Jenis Fungsi di Javascript

Fungsi atau prosedur di dalam javascript dibedakan menjadi dua yaitu:

1. Fungsi yang telah dibuat oleh javascript (built-in function)
2. Fungsi yang dibuat oleh pengembang (user defined function)

Pada artikel kali ini saya akan membahas fungsi yang di definsikan oleh pengembang (user).

Mendeklarasikan Fungsi dan Prosedur di Javascript

Sebenarnya ada beberapa bentuk/cara mendeklarasikan fungsi di javascript misalnya dengan mendeklarasikan secara langsung (tanpa kata kunci function di depan nama fungsi) atau dengan ekspresi assignment. Tetapi bentuk umum dan yang saya rekomendasikan adalah dengan menggunakan kata kunci function sebelum nama fungsi. Seperti yang terlihat pada contoh dibawah ini:

Deklarasi Fungsi

function nama_fungsi(){
  return blok_program
}

Deklarasi Prosedur

function nama_fungsi(){
  blok_program
}

Dari bentuk di atas dapat dilihat dengan jelas perbedaan antara fungsi dan prosedur di mana fungsi memiliki nilai balik (return value) sedangkan prosedur tidak memiliki.

Artikel lainnya : Belajar array (larik) di javascript

Cara Memanggil Fungsi

Setelah kita mendeklarasikan suatu fungsi dan kemudian ingin kita gunakan maka kita perlu memanggilnya. Ada 3 cara memanggil fungsi di javascript yaitu:

1. Memanggil secara langsung dari dokumen HTML
2. Memanggil dengan hyperlink
3. Menggunakan Event

Memanggil Secara Langsung

Kita dapat langsung memanggil suatu fungsi yang telah dibuat dalam dokumen HTML

<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function Hello(){
                 return alert('Hello Guys')
            }
        
        </script>
    </head>

    <body>
        <script>
            //Memanggil fungsi Hello()
            Hello()
        </script>
    </body>
</html>

Perhatikan pada contoh diatas fungsi Hello() saya buat di dalam tag <head> lalu kemudian saya panggil fungsi tersebut dari tag <body>.

Harap diperhatikan karena program yag dibuat secara sekuensial (program di eksekusi dari atas ke bawah) maka pendeklarasian fungsi harus terlebih dahulu di deklarasikan sebelum kita memanggilnya.

Memanggil Fungsi Dari Hyperlink

Fungsi juga dapat dipanggil dari hyperlink melalui atribut href. Perhatikan contoh dibawah ini:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function Hello(){
                return alert('Hello Guys')
            }
        
        </script>
    </head>
    <body>
        <a href='Javascript:Hello()'>Klik Disini</a><br>
    </body>
</html>

Kita dapat memanggil fungsi javascript dari link lewat atribut href dengan nilai ‘Javascript:nama_fungsi()’ penggunaan ini bisa kalian terapkan saat ingin membuat sebuah aksi saat pengguna mengklik link.

Menggunakan Event (Rekasi Terhadap Suatu kejadian)

Javascript mampu memberikan reaksi pada suatu elemen HTML yaitu dengan menggunakan event.

Baca jenis-jenis event di javascript.

Ada banyak jenis event namun saya akan beri 2 contoh event berikut:

Contoh Event Onclick

<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function Hello(){
                return alert('Hello Guys')
            }
        
        </script>
    </head>

    <body>
        <a href='#' onclick="Hello()">Klik Disini</a>
    </body>
</html>

Dapat dilihat pada contoh diatas fungsi Hello() dipanggil melalui event onclick, ketika pengguna mengklik link tersebut maka akan memicu event ini terjadi.

Contoh Event Onchange

<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function tampilNama(){
                var nama = document.getElementById("nama").value
                document.getElementById("tampil").innerHTML="Nama : "+nama
            }
        
        </script>
    </head>
    <body>
        <select id="nama" OnChange="tampilNama()">
            <option value="Nia">Nia</option>
            <option value="Okta">Okta</option>
            <option value="Saras">Saras</option>
        </select>
        <br>
        <div id='tampil'></div>
    </body>
</html>

Pada contoh kedua fungsi akan di panggil dari event onchange, ketika terdapat perubahan nilai dalam combobox maka memicu event ini bekerja.

Pembahasan mengenai event ini akan saya bahas lebih detail pada artikel lain.

Fungsi Dengan Parameter

Fungsi di dalam pemrograman juga dapat disematkan daftar variabel yang berisi nilai untuk diproses pada fungsi tersebut. Di javascript pelewatan parameter bisa dilakukan dengan nilai (value)

Contoh :

//Membuat fungsi jumlah dengan parameter a dan b
function jumlah(a,b)
    {
        return document.write('Hasil = '+(a+b))
    }
 //Memanggil fungsi jumlah       
jumlah(3,6)

Hasil :

Hasil = 9 

Fungsi jumlah() memiliki 2 parameter yaitu a dan b dengan menampilkan hasil penjumlahan dari kedua variabel tersebut.

Ketika fungsi tersebut dipanggil maka, harus kita sematkan nilai (value) untuk masing-masing parameter dalam fungsi tersebut.

Nilai yang saya sematkan pada fungsi jumlah() adalah 3 dan 6 masing-masing nilai tersebut akan di masukan pada variabel yang terdapat dalam parameter fungsi jumlah().

Kesimpulan

Fungsi yang didefinisikan oleh user sangatlah penting untuk kita pelajari saat belajar dasar javascript, karena ke depan kita akan banyak bekerja dalam manipulasi elemen HTML menggunakan fungsi atau membuat objek dan masih banyak lagi.

Kalian bisa explore dengan belajar dari referensi yang lain untuk menambah pengetahuan kalian. Silahkan beri komentar kalian di bawah artikel ini jika ada yang ingin ditanyakan, Terima kasih.

Apa itu parameter dalam JavaScript?

Apa parameter fungsi?

Bagaimana cara memanggil fungsi di JavaScript?

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?