Apa itu Function?

Tujuan Pembelajaran

Setelah halaman ini, kamu dapat menjelaskan apa itu function dan mengidentifikasi komponen-komponen utamanya.

Pendahuluan

Kita sudah belajar cara menyimpan data (variabel) dan cara mengolah data (operator dan percabangan) dan cara mengulang proses (loop). Tapi masih ada satu kemampuan penting yang belum kita kuasai: cara menyimpan dan menggunakan ulang serangkaian instruksi.

Itulah fungsi dari function.

Penjelasan Materi

Function (fungsi) adalah blok kode yang:

Diberi nama
Dapat dipanggil kapan saja
Dapat menerima input (parameter)
Dapat menghasilkan output (return value)

Sekali didefinisikan, function bisa dipanggil berkali-kali dari mana saja dalam program.

Analogi Kehidupan Sehari-hari

Mesin Pembuat Jus

Bayangkan sebuah mesin pembuat jus di dapur.

INPUT                  PROSES              OUTPUT
────────────           ──────────────      ──────────────
Buah yang       ──►   [Mesin memeras]  ──► Jus yang siap
dimasukkan             dan menyaring        diminum

Kamu tidak harus mempelajari cara mesin bekerja setiap kali ingin membuat jus. Kamu cukup:

Mengisi buah (memberikan input)
Menyalakan mesin (memanggil function)
Mengambil jus (mendapatkan output)

Function dalam TypeScript bekerja persis seperti itu.

Komponen Function

function  namafungsi  (parameter)  :  tipeOutput  {
─────────  ──────────  ───────────     ──────────
kata kunci  nama yang   data input      tipe hasil
            dipilih                     yang keluar
}

Bagian	Contoh	Penjelasan
Kata kunci	`function`	Memberitahu TypeScript: “ini adalah function”
Nama	`hitungLuas`	Nama yang kita pilih untuk mengidentifikasi function
Parameter	`(panjang: number)`	Data yang diterima function
Tipe return	`: number`	Tipe data yang dikembalikan
Blok kode	`{ ... }`	Instruksi yang dijalankan saat function dipanggil

Visual Illustration

┌──────────────────────────────────────────────┐
│  function hitungLuasPersegiPanjang(          │
│      panjang: number,                        │
│      lebar: number                           │
│  ): number {                                 │
│      return panjang * lebar                  │  ← instruksi
│  }                                           │
└──────────────────────────────────────────────┘
           │
           │ dipanggil dengan
           ▼
hitungLuasPersegiPanjang(5, 3) → 15

Mari Mencoba

Buat src/bab4/apa-itu-function.ts:

function sapaPagi(nama: string): void {
  console.log(`Selamat pagi, ${nama}!`)
  console.log(`Semangat belajar TypeScript hari ini.`)
}

function sapaMalam(nama: string): void {
  console.log(`Selamat malam, ${nama}.`)
  console.log(`Istirahat yang cukup ya.`)
}

sapaPagi("Dewi")
sapaMalam("Putra")
sapaPagi("Rani")

Jalankan:

tsx src/bab4/apa-itu-function.ts

Output

Selamat pagi, Dewi!
Semangat belajar TypeScript hari ini.
Selamat malam, Putra.
Istirahat yang cukup ya.
Selamat pagi, Rani!
Semangat belajar TypeScript hari ini.

Penjelasan Baris per Baris

function sapaPagi(nama: string): void — mendefinisikan function bernama sapaPagi yang menerima parameter nama bertipe string. : void berarti tidak mengembalikan nilai.
console.log(...) — instruksi yang dijalankan setiap kali function dipanggil.
sapaPagi("Dewi") — memanggil function dengan argumen "Dewi". Nilai ini akan menjadi isi variabel nama di dalam function.

Kesalahan yang Sering Terjadi

function sapaPagi(nama: string): void {
  console.log(`Selamat pagi, ${nama}!`)
}

// Lupa memanggil function!

Function yang didefinisikan tapi tidak pernah dipanggil tidak akan menghasilkan apapun. Mendefinisikan ≠ menjalankan.