The My Project

Beranda
JavaScript

JavaScript | BAB 5 Function JS

Function

Pengenalan Function

function adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi membantu kita mengorganisir kode, membuatnya lebih modular, dapat digunakan kembali (reusable), dan lebih mudah dipelihara. Fungsi dijalankan ketika "dipanggil" (called) dan dapat menerima input dalam bentuk parameter serta mengembalikan output.

Keuntungan Menggunakan Function

Menggunakan fungsi dalam pemrograman memiliki beberapa keuntungan:

  • Keterbacaan: Fungsi membuat kode lebih terstruktur dan mudah dibaca, terutama dalam program besar.
  • Pemeliharaan: Dengan kode yang terorganisir dalam fungsi, jika terjadi perubahan, kita hanya perlu memperbarui bagian tertentu tanpa harus mengubah seluruh program.
  • Penggunaan Kembali: Fungsi dapat digunakan kembali di bagian lain dari kode, sehingga mengurangi pengulangan (redundancy).
  • Modularisasi: Memisahkan logika program ke dalam beberapa fungsi memungkinkan pengembangan yang lebih modular.

Mendefinisikan Function

Deklarasi function adalah cara standar untuk mendefinisikan fungsi di JavaScript. Fungsi dideklarasikan dengan kata kunci function, diikuti dengan nama fungsi, parameter (jika ada), dan blok kode yang akan dijalankan saat fungsi dipanggil. 

function namaFungsi(parameter1, parameter2) {
    // kode yang akan dijalankan
    return hasil; // opsional
}
function sapa(nama) {
    console.log("Halo, " + nama + "!");
}

sapa("Alice"); // Output: Halo, Alice!

Ekspresi function adalah cara lain untuk mendefinisikan fungsi di JavaScript. Fungsi dapat disimpan dalam variabel, sehingga dapat dipanggil menggunakan variabel tersebut. Ini disebut juga sebagai function expression. 

let namaFungsi = function(parameter1, parameter2) {
    // kode yang akan dijalankan
    return hasil; // opsional
};
let sapa = function(nama) {
    console.log("Halo, " + nama + "!");
};

sapa("Bob"); // Output: Halo, Bob!

Arrow function adalah cara penulisan fungsi yang lebih singkat, diperkenalkan di ECMAScript 6 (ES6). Arrow function memiliki sintaks yang lebih sederhana dan tidak memiliki this sendiri, sehingga sering digunakan dalam konteks callback. 

let namaFungsi = (parameter1, parameter2) => {
    // kode yang akan dijalankan
    return hasil; // opsional
};
let sapa = (nama) => {
    console.log("Halo, " + nama + "!");
};

sapa("Charlie"); // Output: Halo, Charlie!

Jika hanya ada satu parameter dan kode dalam fungsi hanya mengembalikan nilai, 
      kita dapat menyingkatnya lebih jauh:
let sapa = nama => console.log(`Halo, ${nama}!`);
sapa("Dandi"); // Output: Halo, Dandi!

4. Parameter dan Argumen

Parameter

Parameter adalah variabel yang didefinisikan di dalam tanda kurung saat kita mendeklarasikan fungsi. Parameter berfungsi sebagai input bagi fungsi untuk menjalankan tugasnya.

Argumen

Argumen adalah nilai aktual yang dikirimkan ke fungsi saat dipanggil. Argumen akan mengisi parameter yang telah didefinisikan dalam fungsi.

Contoh:

// 
function sapa(nama) { // 'nama' adalah parameter
    console.log(`Halo, ${nama}!`);
}

sapa("Eve"); // "Eve" adalah argumen

  1. Deklarasi Fungsi:

    function sapa(nama) {

    Di sini, kita mendefinisikan fungsi bernama sapa. Fungsi ini menerima satu parameter yang disebut nama. Parameter adalah variabel yang dapat kita gunakan dalam fungsi untuk menangani data masukan (input) dari luar fungsi.

  2. Isi Fungsi:

    console.log(`Halo, ${nama}!`);

    Di dalam fungsi, kita menggunakan console.log() untuk mencetak sebuah pesan di console. Template literal (`Halo, ${nama}!`) digunakan untuk menyisipkan nilai parameter nama ke dalam teks. Jadi, jika nama bernilai "Eve", maka hasilnya adalah "Halo, Eve!".

  3. Memanggil Fungsi:

     sapa("Eve");

    Di sini, kita memanggil fungsi sapa dengan argumen "Eve". Saat dipanggil, nilai "Eve" dikirimkan ke parameter nama di dalam fungsi. Fungsi kemudian mencetak "Halo, Eve!" ke console.

5. Nilai Return

Fungsi dapat mengembalikan nilai menggunakan pernyataan return. Nilai yang dikembalikan oleh fungsi dapat disimpan dalam variabel atau digunakan langsung dalam program.

Contoh:

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

let hasil = tambah(5, 3); // hasil akan berisi 8
console.log(hasil); // Output: 8

6. Fungsi sebagai Objek First-Class

Di JavaScript, fungsi dianggap sebagai first-class object. Ini berarti fungsi dapat diperlakukan seperti objek lainnya, seperti:

  1. Disimpan dalam variabel
  2. Dilewatkan sebagai argumen ke fungsi lain
  3. Dikembalikan dari fungsi lain

Contoh:

function operasiMatematika(a, b, operasi) {
    return operasi(a, b);
}

let hasilPenjumlahan = operasiMatematika(5, 3, (x, y) => x + y);
console.log(hasilPenjumlahan); // Output: 8

7. Closure

Closure adalah fitur JavaScript yang memungkinkan fungsi untuk mengakses variabel dari lingkup (scope) luar meskipun fungsi tersebut telah selesai dieksekusi. Closure terjadi ketika fungsi "mengingat" variabel dari lingkup di mana ia dibuat, bukan di mana ia dipanggil.

Contoh:

function buatPenghitung() {
    let hitungan = 0;
    return function() {
        return ++hitungan;
    };
}

let hitung = buatPenghitung();
console.log(hitung()); // Output: 1
console.log(hitung()); // Output: 2

8. Fungsi Rekursif

Fungsi rekursif adalah fungsi yang memanggil dirinya sendiri. Rekursi sering digunakan untuk menyelesaikan masalah yang dapat dipecah menjadi submasalah yang lebih kecil, seperti faktorial atau pencarian dalam struktur data pohon.

Contoh:

function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120

9. Studi kasus

Berikut adalah contoh penggunaan fungsi yang menggabungkan beberapa konsep yang telah kita bahas:

Perhitungan Lingkaran

Hitung Luas dan Keliling Lingkaran

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perhitungan Lingkaran</title>
    <!-- Tag <style> digunakan untuk menambahkan CSS agar mempercantik tampilan -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #2c3e50;
        }

        .result {
            margin-top: 10px;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <!-- Header untuk judul halaman -->
    <h1>Hitung Luas dan Keliling Lingkaran</h1>
    
    <!-- Form untuk input jari-jari lingkaran -->
    <label for="jariJari">Masukkan jari-jari:</label>
    <input type="number" id="jariJari" value="5">
    <button onclick="hitungLuas()">Hitung Luas</button>
    <button onclick="hitungKeliling()">Hitung Keliling</button>
    
    <!-- Tempat menampilkan hasil perhitungan -->
    <div id="hasil" class="result"></div>

    <!-- Script untuk fungsi-fungsi JavaScript -->
    <script>
        // Fungsi untuk menghitung luas lingkaran
        function hitungLuasLingkaran(jariJari) {
            return Math.PI * jariJari * jariJari;
        }

        // Fungsi untuk menghitung keliling lingkaran
        function hitungKelilingLingkaran(jariJari) {
            return 2 * Math.PI * jariJari;
        }

        // Fungsi higher-order yang menggunakan fungsi lain sebagai argumen
        function hitungDanTampilkan(jariJari, fungsiPerhitungan) {
            let hasil = fungsiPerhitungan(jariJari);
            document.getElementById('hasil').innerHTML = `Hasil perhitungan: ${hasil.toFixed(2)}`;
        }

        // Fungsi yang dipanggil ketika tombol "Hitung Luas" diklik
        function hitungLuas() {
            let jariJari = document.getElementById('jariJari').value;
            hitungDanTampilkan(jariJari, hitungLuasLingkaran);
        }

        // Fungsi yang dipanggil ketika tombol "Hitung Keliling" diklik
        function hitungKeliling() {
            let jariJari = document.getElementById('jariJari').value;
            hitungDanTampilkan(jariJari, hitungKelilingLingkaran);
        }
    </script>
</body>
</html>
Kita mendefinisikan dua fungsi: hitungLuasLingkaran dan hitungKelilingLingkaran. 
Keduanya menerima satu parameter (jariJari) dan mengembalikan hasil perhitungan.

Fungsi hitungDanTampilkan adalah contoh fungsi higher-order. 
Ia menerima dua parameter: jariJari dan fungsiPerhitungan (yang merupakan fungsi).

Kita kemudian memanggil hitungDanTampilkan dengan fungsi yang berbeda-beda (baik hitungLuasLingkaran 
maupun hitungKelilingLingkaran), sehingga hasil yang ditampilkan bervariasi tergantung fungsi yang dipakai.


// Fungsi untuk menghitung luas lingkaran
function hitungLuasLingkaran(jariJari) {
    return Math.PI * jariJari * jariJari;
}

// Fungsi untuk menghitung keliling lingkaran
function hitungKelilingLingkaran(jariJari) {
    return 2 * Math.PI * jariJari;
}

// Fungsi higher-order yang menggunakan fungsi lain sebagai argumen
function hitungDanTampilkan(jariJari, fungsiPerhitungan) {
    let hasil = fungsiPerhitungan(jariJari);
    console.log(`Hasil perhitungan: ${hasil.toFixed(2)}`);
}

// Menggunakan fungsi-fungsi tersebut
let jariJari = 5;
hitungDanTampilkan(jariJari, hitungLuasLingkaran);
hitungDanTampilkan(jariJari, hitungKelilingLingkaran);