Fungsi di JavaScript: Pengertian, Jenis, dan Contohnya
Irhan Hisyam Dwi Nugroho
•
27 August 2025
•
727
Fungsi di JavaScript adalah salah satu dasar yang wajib dipahami, Warga Bimbingan, untuk menulis kode yang efisien. Dengan fungsi, kamu bisa mengelola program dengan lebih terstruktur dan menghindari kode yang berulang.
Fungsi memungkinkan kita untuk menyelesaikan berbagai tugas seperti perhitungan, pengolahan data, atau mengatur alur program. Ini membuat kode lebih rapi dan mudah di-debug.
Di artikel ini, MinDi akan jelaskan apa itu fungsi, jenis-jenisnya, serta contoh penggunaannya. Yuk, simak dan kuasai fungsi JavaScript dengan mudah, Warga Bimbingan!
Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat
Apa Itu Fungsi di JavaScript?
Fungsi di JavaScript adalah sekumpulan perintah atau kode yang dibungkus dalam satu nama dan bisa dipanggil berulang kali di berbagai bagian program.
Fungsi ini memudahkan kita untuk mengelompokkan kode yang memiliki tugas atau tujuan tertentu, sehingga tidak perlu menulis kode yang sama berulang kali.
Di dalam fungsi, kita bisa memanfaatkan parameter sebagai input dan mengembalikan nilai sebagai output, membuat fungsi sangat fleksibel.
Dengan memahami cara kerja fungsi, kamu bisa membuat program yang lebih efisien dan mudah dipelihara.
Baca juga: Ingin Belajar Front End Development? Cek Roadmapnya di sini!
Manfaat Menggunakan Fungsi
Fungsi di JavaScript bukan hanya memudahkan penulisan kode, tetapi juga membantu meningkatkan efisiensi dalam pengembangan program.
Berikut ini adalah beberapa manfaat besar yang bisa kamu dapatkan dengan menggunakan fungsi dalam proyekmu:
1. Menghindari Kode yang Redundan
Dengan fungsi, kamu bisa menulis kode hanya sekali dan memanggilnya kapan pun dibutuhkan.
Hal ini menghindari duplikasi kode yang bisa membuat program menjadi lebih panjang dan sulit dipelihara.
Selain itu, fungsi juga mengurangi kemungkinan kesalahan yang terjadi jika kode yang sama diulang berkali-kali.
2. Meningkatkan Keterbacaan Kode
Fungsi membuat kode lebih terorganisir dan mudah dipahami. Dengan nama yang deskriptif, kamu bisa langsung tahu apa yang dilakukan fungsi tanpa melihat seluruh kode.
Ini juga memudahkan tim untuk memahami dan mengedit kode dengan cepat, mengurangi kesalahan, dan mempercepat proses pengembangan.
3. Mempermudah Pemeliharaan Kode
Fungsi memungkinkan kamu untuk memperbarui atau memodifikasi bagian tertentu dari kode tanpa harus mengubah seluruh program.
Jika ada kesalahan atau perubahan dalam satu bagian, kamu hanya perlu memperbarui fungsi tersebut. Ini menjadikan kode lebih mudah dikelola dan dipelihara dalam jangka panjang.
4. Meningkatkan Reusabilitas Kode
Fungsi yang baik dapat digunakan kembali di berbagai bagian program, bahkan di proyek lain. Dengan membuat fungsi modular dan independen, kamu bisa menghemat waktu dan usaha dalam penulisan kode di masa depan.
Reusabilitas ini juga sangat membantu saat mengembangkan aplikasi besar atau aplikasi dengan banyak fitur.
Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024
Jenis Fungsi di JavaScript
Sumber: Canva
Di JavaScript, ada berbagai jenis fungsi yang bisa digunakan sesuai kebutuhan dalam program.
Setiap jenis fungsi memiliki cara penulisan dan penerapan yang berbeda. Berikut ini adalah beberapa jenis fungsi yang sering digunakan dalam JavaScript:
1. Fungsi Deklaratif (Function Declaration)
Fungsi deklaratif adalah cara mendeklarasikan fungsi dengan menggunakan kata kunci function.
Fungsi ini dapat dipanggil sebelum deklarasi karena JavaScript akan mengangkatnya (hoisting).
function greet() { console.log("Hello, Warga Bimbingan!"); } greet(); // Output: Hello, Warga Bimbingan! |
Penjelasan:
Di sini, fungsi greet() dideklarasikan dengan kata kunci function, dan bisa dipanggil kapan saja dalam kode.
Fungsi ini mencetak pesan ke console, dan karena menggunakan function declaration, kita bisa memanggilnya sebelum dideklarasikan.
2. Fungsi Ekspresi (Function Expression)
Fungsi ekspresi adalah fungsi yang disimpan dalam variabel. Fungsi ini hanya bisa dipanggil setelah kamu menuliskannya, karena tidak bisa langsung digunakan sebelum didefinisikan. Ini berarti kamu harus menulis fungsi terlebih dahulu sebelum memanggilnya dalam kode.
const greet = function() { console.log("Hello from Function Expression!"); }; greet(); // Output: Hello from Function Expression! |
Penjelasan:
Fungsi ini disimpan dalam variabel greet dan hanya bisa dipanggil setelah fungsi didefinisikan.
Fungsi ekspresi lebih fleksibel dan sering digunakan dalam callback atau sebagai argumen dalam fungsi lain.
3. Arrow Function (Fungsi Panah)
Arrow function adalah cara penulisan fungsi yang lebih singkat dan modern. Fungsi ini menggunakan sintaks panah (=>) dan sering digunakan untuk membuat kode lebih ringkas.
const greet = () => { console.log("Hello from Arrow Function!"); }; greet(); // Output: Hello from Arrow Function! |
Penjelasan:
Arrow function lebih ringkas dan tidak memerlukan kata kunci function. Fungsi ini juga memiliki keunikan, seperti tidak memiliki this sendiri, yang sering digunakan untuk fungsi yang lebih sederhana.
4. Fungsi dengan Parameter dan Return Value
Fungsi di JavaScript dapat menerima parameter dan mengembalikan nilai. Fungsi seperti ini lebih fleksibel karena dapat menangani input dan memberikan output yang berbeda.
function add(a, b) { return a + b; } const result = add(5, 3); console.log(result); // Output: 8 |
Penjelasan:
Fungsi add() menerima dua parameter, a dan b, dan mengembalikan hasil penjumlahannya. Fungsi dengan parameter dan return value digunakan untuk perhitungan atau operasi yang membutuhkan input dan menghasilkan output.
5. Fungsi Anonim (Anonymous Function)
Fungsi anonim adalah fungsi yang tidak memiliki nama. Fungsi ini sering digunakan dalam callback atau langsung dijalankan tanpa perlu dideklarasikan terlebih dahulu.
setTimeout(function() { console.log("This is an anonymous function!"); }, 1000); |
Penjelasan:
Fungsi anonim didefinisikan tanpa nama, dan sering digunakan dalam fungsi seperti setTimeout(), yang memerlukan fungsi untuk dieksekusi setelah waktu tertentu. Ini adalah cara praktis untuk menjalankan fungsi sekali saja.
Baca juga: Cara Menjadi Web Developer Freelance: Panduan Pemula
Contoh Fungsi Sederhana Dalam Website
Sumber: Canva
Berikut adalah contoh fungsi sederhana yang menggunakan dua file: index.html dan fungsi.js. Fungsi ini akan menampilkan pesan selamat datang di halaman web setelah pengguna menekan tombol.
Struktur File:
- index.html: Halaman web utama yang menampilkan tombol.
- fungsi.js: Berisi fungsi yang mengatur interaksi ketika tombol diklik.
1. index.html
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contoh Fungsi Sederhana</title> <script src="fungsi.js" defer></script> <!-- Menghubungkan dengan file fungsi.js --> </head> <body> <h1>Selamat Datang di Website Saya</h1> <p>Tekan tombol di bawah untuk melihat pesan selamat datang.</p> <button id="greetButton">Klik Saya</button> <!-- Tombol untuk menjalankan fungsi --> </body> </html> |
Penjelasan:
- Di dalam index.html, ada elemen tombol <button id="greetButton">Klik Saya</button> yang nantinya akan memicu fungsi ketika diklik.
- File fungsi.js dihubungkan di bagian <head> menggunakan tag <script> dan atribut defer agar file JavaScript dijalankan setelah halaman selesai dimuat.
2. fungsi.js
// Mengambil elemen tombol berdasarkan ID const greetButton = document.getElementById("greetButton"); // Menambahkan event listener ke tombol, agar fungsi dijalankan saat diklik greetButton.addEventListener("click", function() { alert("Selamat datang di website saya, Warga Bimbingan!"); // Menampilkan pesan alert }); |
Penjelasan:
- Fungsi di dalam fungsi.js menambahkan event listener pada tombol yang mendeteksi ketika tombol diklik.
- Ketika tombol ditekan, fungsi akan dijalankan dan menampilkan pesan alert yang berisi “Selamat datang di website saya, Warga Bimbingan!”.
Hasil:
Ketika pengguna membuka index.html di browser dan menekan tombol “Klik Saya”, sebuah pop-up alert akan muncul dengan pesan yang telah ditentukan dalam fungsi.
Ini adalah contoh dasar dari penggunaan fungsi di JavaScript untuk berinteraksi dengan elemen HTML. Fungsi ini dapat dikembangkan lebih lanjut dengan berbagai fitur seperti validasi form, animasi, atau pengambilan data dari server.
Baca juga: 10 Text Editor Terbaik untuk Web Developer (2025)
Ingin Jadi Full Stack Web Developer Profesional?
Setelah memahami fungsi di JavaScript dan bagaimana mereka bekerja, kini saatnya melangkah lebih jauh dalam dunia pengembangan web!
Yuk, ikuti Bootcamp Full Stack Web Development di dibimbing.id! Di sini, kamu akan belajar dari dasar hingga mahir, mulai dari HTML, CSS, JavaScript, hingga framework populer seperti React dan Node.js.
Belajar langsung dari mentor berpengalaman dengan kurikulum praktis yang siap membantumu membangun aplikasi web profesional dari awal.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni mencapai 96%, peluang kariermu di dunia web development semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang disini dan mulai perjalananmu menjadi Full Stack Web Developer profesional! #BimbingSampeJadi
Referensi
- JavaScript Functions [Buka]
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
