Pertemuan 5-6: Fungsi & Objek

Mengorganisir Kode dan Mengelompokkan Data

Pengertian

Fungsi (Functions) adalah blok kode yang dapat digunakan kembali yang dirancang untuk melakukan tugas tertentu. Fungsi membantu mengorganisir kode menjadi bagian-bagian yang logis dan mudah dikelola. Objek (Objects) adalah tipe data kompleks yang memungkinkan kita untuk menyimpan kumpulan data dan fungsi yang terkait dalam satu wadah. Objek merepresentasikan "benda" di dunia nyata (seperti mobil atau siswa) dengan properti (ciri-ciri) dan metode (kemampuan).

Analogi

Analogi: Mesin Kopi
Sebuah Fungsi adalah seperti mesin pembuat kopi. Anda memberinya input (biji kopi dan air), dan ia melakukan serangkaian proses untuk menghasilkan output (secangkir kopi). Anda bisa menggunakan mesin ini kapan pun Anda mau. Sebuah Objek adalah seperti seluruh data tentang secangkir kopi tersebut: propertinya adalah warna: 'hitam', suhu: 'panas', dan metodenya bisa berupa minum().

Contoh Kode & Hasil

1. Mendefinisikan dan Memanggil Fungsi

Membuat blok kode yang bisa dipanggil kapan saja.

// Mendefinisikan fungsi
function tampilkanPesan() {
  document.getElementById('func-preview-1').innerHTML = 'Fungsi ini telah dipanggil!';
}

// Memanggil fungsi saat tombol diklik
document.getElementById('btn-func-1').addEventListener('click', tampilkanPesan);

Penjelasan Kode: Kita membuat sebuah fungsi bernama tampilkanPesan. Kode di dalamnya tidak akan berjalan sampai fungsi tersebut dipanggil, dalam hal ini ketika tombol diklik.

2. Fungsi dengan Parameter dan Return

Fungsi dapat menerima input (parameter) dan menghasilkan output (return value).

function hitungLuas(panjang, lebar) {
  let luas = panjang * lebar;
  return luas;
}

let hasil = hitungLuas(10, 5); // hasil akan bernilai 50
document.getElementById('func-preview-2').innerHTML = 'Luas persegi panjang adalah: ' + hasil;

Penjelasan Kode: Fungsi hitungLuas menerima dua parameter, panjang dan lebar. Ia melakukan perhitungan dan mengembalikan hasilnya menggunakan kata kunci return.

3. Membuat Objek Literal

Cara paling umum untuk membuat objek di JavaScript.

const siswa = {
  nama: "Andi",
  jurusan: "TJKT",
  kelas: 11,
  lulus: false
};

document.getElementById('obj-preview-1').innerHTML = siswa.nama + ' kelas ' + siswa.kelas;

Penjelasan Kode: Kita membuat objek siswa dengan empat properti: nama, jurusan, kelas, dan lulus. Kita mengakses nilai properti menggunakan notasi titik (objek.properti).

4. Objek dengan Metode (Method)

Metode adalah fungsi yang disimpan sebagai properti objek.

const siswa = {
  nama: "Citra",
  jurusan: "PPLG",
  sapa: function() {
    return 'Halo, nama saya ' + this.nama;
  }
};

document.getElementById('obj-preview-2').innerHTML = siswa.sapa();

Penjelasan Kode: Objek siswa memiliki metode bernama sapa. Kata kunci this merujuk pada objek itu sendiri, sehingga this.nama akan mengakses properti nama dari objek siswa.

Latihan Mandiri

Tugas: Objek Kalkulator

  1. Buat sebuah objek bernama kalkulator.
  2. Objek ini memiliki dua metode: tambah(a, b) dan kurang(a, b).
  3. Metode tambah harus mengembalikan hasil penjumlahan a dan b.
  4. Metode kurang harus mengembalikan hasil pengurangan a dan b.
  5. Panggil kedua metode tersebut di console.log untuk menguji. Contoh: console.log(kalkulator.tambah(10, 5)); harus menampilkan 15.

Kesimpulan

Fungsi dan Objek adalah dua konsep paling fundamental dalam JavaScript. Fungsi memungkinkan kita menulis kode yang terstruktur, efisien, dan dapat digunakan kembali. Objek memungkinkan kita untuk memodelkan "benda" dari dunia nyata dengan mengelompokkan data (properti) dan perilaku (metode) yang terkait. Menguasai keduanya adalah langkah besar untuk beralih dari sekadar menulis skrip menjadi membangun aplikasi yang sesungguhnya.