Materi JavaScript 3
Fungsi dalam JavaScript

oleh: Suryo Adhy Chandra, ST

Ilustrasi JavaScript mengubah HTML melalui id

Fungsi adalah kumpulan perintah yang diberi nama dan dapat dipanggil berkali-kali. Dengan fungsi, kode JavaScript menjadi lebih rapi, mudah dibaca, dan tidak perlu ditulis berulang.

1. Bentuk dasar fungsi

Fungsi dibuat dengan kata kunci function, kemudian diikuti nama fungsi, tanda kurung, dan blok kode di dalam tanda kurung kurawal.

function sapa() { alert("Halo, selamat belajar JavaScript!"); } sapa();

Pada contoh di atas, sapa() adalah nama fungsi. Ketika fungsi dipanggil, browser akan menjalankan perintah alert yang berada di dalamnya.

2. Fungsi dengan parameter

Parameter adalah data yang dikirim ke dalam fungsi. Dengan parameter, fungsi bisa menghasilkan pesan yang berbeda sesuai data yang diberikan.

function sapaNama(nama) { alert("Halo, " + nama + "!"); } sapaNama("Budi"); sapaNama("Sinta");
Tanda + pada contoh di atas dipakai untuk menggabungkan teks dengan isi variabel.

3. Menghubungkan fungsi JavaScript dengan HTML melalui id

JavaScript dapat mengambil elemen HTML menggunakan document.getElementById(). Cara ini membutuhkan atribut id pada elemen HTML yang ingin diubah.

<h2 id="judul">Judul sebelum diubah</h2> <button onclick="ubahJudul()">Ubah Judul</button> <script> function ubahJudul() { document.getElementById("judul").innerHTML = "Judul sudah diubah oleh JavaScript"; } </script>

Demo ubah judul:

Judul sebelum diubah

4. Mengambil input dari HTML

Selain mengubah teks, JavaScript juga dapat mengambil nilai dari input HTML. Nilai input dapat dibaca menggunakan properti value.

<input type="text" id="nama" placeholder="Masukkan nama"> <button onclick="tampilkanNama()">Tampilkan</button> <p id="hasil"></p> <script> function tampilkanNama() { let nama = document.getElementById("nama").value; document.getElementById("hasil").innerHTML = "Halo, " + nama + "!"; } </script>

Demo input nama:

5. Contoh lengkap integrasi HTML dan JavaScript

<!DOCTYPE html> <html> <head> <title>Fungsi JavaScript</title> </head> <body> <h1 id="judul">Belajar Fungsi</h1> <input type="text" id="nama" placeholder="Masukkan nama"> <button onclick="sapaPengunjung()">Sapa</button> <p id="pesan"></p> <script> function sapaPengunjung() { let nama = document.getElementById("nama").value; document.getElementById("pesan").innerHTML = "Selamat datang, " + nama + "!"; } </script> </body> </html>
Kesimpulan: fungsi membantu kita menyimpan perintah, sedangkan id membantu JavaScript menemukan elemen HTML yang ingin dibaca atau diubah.

6. Analogi: fungsi sebagai resep

Sebuah resep nasi goreng ditulis sekali, lalu bisa dipakai kapan pun. Kamu hanya menyesuaikan bahan, misalnya telur atau ayam. Fungsi bekerja sama: langkah-langkah ditulis sekali, dan setiap pemanggilan boleh membawa bahan (parameter) yang berbeda. Hasil masakan yang diserahkan kembali kepada pemesan mirip dengan nilai kembalian (return) pada fungsi.

7. Fungsi yang mengembalikan nilai

Sejauh ini fungsi kita hanya menampilkan alert. Fungsi juga bisa menghitung sesuatu dan mengembalikan hasilnya dengan kata kunci return. Nilai ini bisa disimpan ke variabel, dipakai lagi dalam perhitungan, atau ditampilkan di halaman. Begitu return dijalankan, fungsi langsung berhenti, sehingga baris sesudahnya tidak dieksekusi. 

function luasPersegiPanjang(panjang, lebar) {
    return panjang * lebar;
}

let luas = luasPersegiPanjang(8, 5);
console.log("Luasnya: " + luas);   // 40

function nilaiLulus(nilai) {
    if (nilai >= 75) {
        return "Lulus";
    }
    return "Belum lulus";
}
console.log(nilaiLulus(80));       // Lulus

Fungsi luasPersegiPanjang menerima dua parameter dan mengembalikan hasil kali. Fungsi nilaiLulus memakai if untuk memilih jawaban; bila syarat terpenuhi, return pertama langsung mengakhiri fungsi.

8. Ruang lingkup variabel (scope)

Variabel yang dibuat dengan let di dalam fungsi hanya hidup di dalam fungsi itu. Ia seperti catatan kecil yang dipakai juru masak saat memasak dan dibuang setelah selesai. Variabel yang dibuat di luar fungsi bisa dibaca dari mana saja. Kebiasaan baik adalah membatasi variabel pada ruang sekecil mungkin supaya tidak saling mengganggu. 

let sekolah = "SMP Harapan";      // global

function perkenalan() {
    let nama = "Dina";              // lokal
    console.log(nama + " dari " + sekolah);
}
perkenalan();
// console.log(nama);   // error: nama is not defined

9. Kesalahan yang sering terjadi

10. Ringkasan

Fungsi menyimpan langkah yang bisa dipanggil berulang. Parameter membuatnya fleksibel, return mengembalikan hasil, dan variabel lokal tidak bocor ke luar fungsi. Dengan getElementById, fungsi dapat membaca input dan mengubah isi halaman.

11. Latihan

  1. Buat fungsi kuadrat(x) yang mengembalikan x dikali x.
    Lihat jawabanfunction kuadrat(x) { return x * x; }
  2. Apa keluaran console.log("2" + "3"), dan bagaimana menjadikannya 5?
    Lihat jawabanKeluarannya "23" karena penggabungan teks. Gunakan Number("2") + Number("3") agar menjadi 5.
  3. Mengapa memanggil console.log(nama) di luar fungsi memunculkan error pada contoh scope di atas?
    Lihat jawabanKarena nama adalah variabel lokal yang hanya ada di dalam fungsi perkenalan.
  4. Rancang fungsi yang menerima suhu Celsius dan mengembalikan Fahrenheit.
    Lihat jawabanfunction keFahrenheit(c) { return c * 9 / 5 + 32; }
← Kembali Ke Daftar Pelajaran JavaScript