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!

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.

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

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


1. Fungsi sapa(nama)
 
   		function sapa(nama) {
      		 console.log(`Halo, ${nama}!`);
  	    }

   - Apa itu fungsi?
     Sebuah fungsi adalah blok kode yang dapat digunakan kembali untuk menjalankan suatu tugas tertentu. Dalam kasus ini, fungsi bernama `sapa` bertujuan untuk mencetak pesan sapaan ke konsol.

   - Parameter nama 
     - Parameter adalah semacam "variabel sementara" yang digunakan dalam definisi fungsi untuk menerima nilai saat fungsi dipanggil.
     - Dalam kode ini, `nama` adalah parameter. Saat fungsi `sapa` dipanggil, nilai akan diberikan kepada parameter `nama`.

   - console.log
     - console.log digunakan untuk mencetak sesuatu ke *console*, seperti output teks atau nilai variabel.
     - Di sini, `console.log` mencetak teks sapaan yang berisi kata "Halo" diikuti nama yang diberikan.

   - Template literal
     - Teks `Halo, ${nama}!` menggunakan template literal, yaitu cara penulisan string dengan tanda backtick (`` ` ``) yang memungkinkan interpolasi nilai variabel.
     - `${nama}` di dalam backtick akan digantikan dengan nilai dari variabel `nama`.

---


2. Pemanggilan Fungsi
 
   		sapa("Eve");
 
   - Ketika fungsi dipanggil dengan menuliskan `sapa("Eve")`, nilai `"Eve"` dikirim sebagai **argumen** ke parameter `nama`.
   - Nilai `"Eve"` akan menggantikan parameter `nama` dalam fungsi.

---

3. Proses Eksekusi
   - Fungsi `sapa` dieksekusi dengan argumen `"Eve"`.
   - Di dalam fungsi, `nama` sekarang memiliki nilai `"Eve"`.
   - Baris `console.log` menghasilkan output dengan menggantikan `${nama}` menjadi `"Eve"`.
   - Akhirnya, output yang dicetak ke konsol adalah:
     
     
       Halo, Eve!
     
     
---

4. Kesimpulan
   - Parameter adalah placeholder atau variabel yang digunakan dalam definisi fungsi untuk menerima data.
   - Argumen adalah nilai nyata yang diberikan saat fungsi dipanggil.
   - Fungsi ini dirancang untuk mencetak sapaan yang dipersonalisasi dengan nama yang diberikan sebagai argumen.

---

Nilai Return

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

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

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

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
Example
function operasiMatematika(a, b, operasi) {
    return operasi(a, b);
}

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

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.

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

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

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.

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

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

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>

Fungsi Utama Script
Script ini digunakan untuk menghitung luas dan keliling lingkaran berdasarkan nilai jari-jari yang diinput oleh pengguna. Hasil perhitungan akan langsung ditampilkan di halaman web.

---

Bagian Penting
1. Input dan Tombol
   - Pengguna memasukkan nilai jari-jari pada kotak input (`<input>`).
   - Tombol "Hitung Luas" dan "Hitung Keliling" memanggil fungsi JavaScript untuk melakukan perhitungan.

2. Fungsi Perhitungan
   - Luas Lingkaran :

				Luas = Ï€×r2  //( pi x r x r ) 

     Dihitung oleh fungsi `hitungLuasLingkaran(jariJari)`.

   - Keliling Lingkaran :

				Keliling = 2Ï€r

     Dihitung oleh fungsi `hitungKelilingLingkaran(jariJari)`.

3. Higher-Order Function
   - `hitungDanTampilkan` :
     - Fungsi ini menerima dua parameter:
       - `jariJari`: Nilai input dari pengguna.
       - `fungsiPerhitungan`: Fungsi untuk menghitung luas atau keliling.
     - Fungsi ini menghitung hasil dan menampilkan ke elemen `<div>` dengan ID `hasil`.

Fungsi Tombol
   - `hitungLuas` : Mengambil nilai jari-jari, lalu menghitung luas.
   - `hitungKeliling` : Serupa, tetapi untuk keliling.

---

Alur Kerja
1. Masukkan nilai jari-jari di kotak input.
2. Klik tombol "Hitung Luas" atau "Hitung Keliling":
   - Script mengambil nilai input.
   - Script menghitung hasil menggunakan rumus.
   - Hasil ditampilkan di layar dengan 2 angka desimal.

---

Logika Inti
- Efisiensi : Script menggunakan fungsi reusable (`hitungDanTampilkan`) untuk menghindari pengulangan kode.
- Interaktivitas : Hasil perhitungan langsung ditampilkan di halaman tanpa perlu memuat ulang.

---