Widget HTML #1

Beranda / JavaScript / Learn Javascript

Fungsi-fungsi Keren yang Bikin Hidup Lebih Mudah

Posting Komentar

Halo, teman-teman! 😄

Apa kabar? Hari ini kita akan ngobrol-ngobrol soal salah satu konsep yang super penting dan sering banget dipakai di JavaScript, yaitu fungsi (alias function). Fungsi ini nggak cuma keren, tapi juga bikin hidup kita sebagai programmer jauh lebih mudah. Bayangin aja kalau hidup kita nggak ada fungsi, mungkin setiap kali kita mau ngelakuin hal yang sama, kita bakal ngetik kode berulang-ulang. 😵

Apa Itu Fungsi? 🧑‍💻

Bayangkan teman-teman punya robot asisten. Setiap kali kalian mau robot ini bikin kopi, teman-teman tinggal bilang, "Bikin kopi ya." Nah, dalam dunia JavaScript, fungsi itu seperti perintah yang bisa kita panggil kapan pun kita mau. Jadi kita nggak perlu repot-repot nyuruh si robot setiap kali mau bikin kopi. Tinggal buat satu kali, panggil berkali-kali. Praktis, kan?

Fungsi di JavaScript adalah sekumpulan kode yang bisa kita simpan dalam satu wadah, dan kita bisa panggil kapan pun kita butuh. Mirip-mirip kayak bikin checklist tugas, habis bikin checklist, kita tinggal jalani aja langkah-langkahnya setiap kali dibutuhkan.

Membuat Fungsi di JavaScript

Ini dasar banget, teman-teman. Lihat contoh kode berikut:


function sayHello() {
  alert("Halo, teman-teman!");
}

Kode di atas bikin fungsi sederhana yang namanya sayHello. Ketika kita manggil fungsi ini, dia bakal munculin kotak alert dengan pesan "Halo, teman-teman!". Gampang, kan? Nah, supaya bisa coba langsung, teman-teman bisa bikin file index.html dan copy-paste kode ini ke dalamnya. Kita coba jalankan di browser.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Fungsi di JavaScript</title>
</head>
<body>
    <h1>Mengenal Fungsi di JavaScript</h1>
    <button onclick="sayHello()">Klik Aku</button>

    <script>
        function sayHello() {
            alert("Halo, teman-teman!");
        }
    </script>
</body>
</html>

Kalau teman-teman buka file ini di browser, bakal ada tombol "Klik Aku". Begitu diklik, muncullah alert "Halo, teman-teman!". Ini contoh simpel gimana cara bikin dan manggil fungsi.

Parameter dan Argumen: Siap Terima Input?

Kadang kita pengen fungsi kita lebih fleksibel, misalnya bisa menerima masukan (input). Ini yang namanya parameter dalam fungsi. Anggap aja parameter ini seperti bahan-bahan yang kita kasih ke robot asisten kita.


function sayHelloTo(name) {
  alert("Halo, " + name + "!");
}

Di sini, kita bikin fungsi sayHelloTo yang menerima satu parameter name. Setiap kali kita manggil fungsi ini, kita kasih tahu siapa yang mau kita sapa. Mari kita coba lagi di file index.html kita.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Fungsi di JavaScript</title>
</head>
<body>
    <h1>Mengenal Fungsi di JavaScript</h1>
    <button onclick="sayHelloTo('Budi')">Sapa Budi</button>
    <button onclick="sayHelloTo('Ani')">Sapa Ani</button>

    <script>
        function sayHelloTo(name) {
            alert("Halo, " + name + "!");
        }
    </script>
</body>
</html>

Return Value: Fungsi yang Mengembalikan Sesuatu

Kadang kita mau fungsi kita melakukan sesuatu dan mengembalikan hasilnya. Misalnya, kita bikin fungsi untuk menghitung dua angka:


function tambah(a, b) {
  return a + b;
}

Fungsi tambah ini menerima dua angka a dan b, lalu mengembalikan hasil penjumlahannya. Mari kita implementasikan ini di file index.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Fungsi di JavaScript</title>
</head>
<body>
    <h1>Mengenal Fungsi di JavaScript</h1>
    <p>Hasil penjumlahan 5 + 3 adalah: <span id="hasil"></span></p>

    <script>
        function tambah(a, b) {
            return a + b;
        }

        let hasil = tambah(5, 3);
        document.getElementById("hasil").innerText = hasil;
    </script>
</body>
</html>

Arrow Function: Si Gaul yang Ringkas

Nah, teman-teman, ada cara baru yang lebih gaul dan ringkas untuk bikin fungsi, namanya Arrow Function. Contoh cara nulis fungsi dengan arrow function:


const sayHello = () => {
  alert("Halo, teman-teman dari arrow function!");
}

Lebih ringkas kan? Kita nggak perlu nulis function, tinggal pakai => aja. Mari kita coba ubah fungsi sayHello kita jadi arrow function:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Fungsi di JavaScript</title>
</head>
<body>
    <h1>Mengenal Fungsi di JavaScript</h1>
    <button onclick="sayHello()">Klik Aku</button>

    <script>
        const sayHello = () => {
            alert("Halo, teman-teman dari arrow function!");
        }
    </script>
</body>
</html>

Kesimpulan

Nah, teman-teman, sekarang kita udah kenal lebih dalam dengan yang namanya fungsi di JavaScript. Kita udah belajar cara bikin fungsi, ngasih parameter, dan ngembaliin hasil (return value). Plus, kita udah kenalan sama si gaul arrow function.

Jangan lupa untuk terus bereksperimen dan coba-coba bikin fungsi sendiri. Happy coding, teman-teman! 👨‍💻👩‍💻

List Part Artikel

Posting Komentar untuk "Fungsi-fungsi Keren yang Bikin Hidup Lebih Mudah"

Posting Komentar