Javascript Dasar #3: Fungsi dan Penggunaan dalam Program

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #3: Fungsi dan Penggunaan dalam Program

Hai lagi! Di tutorial ketiga ini, kita akan belajar tentang fungsi di JavaScript. Fungsi adalah bagian penting dalam pemrograman, karena memungkinkan kita untuk mengelompokkan kode agar lebih rapi dan mudah dipanggil berulang kali. Jadi, kalau kamu mau menulis kode yang bersih dan terstruktur, kamu perlu paham banget sama fungsi.

Apa Itu Fungsi?

Fungsi adalah sekumpulan perintah yang dijalankan ketika kita memanggilnya. Fungsi memungkinkan kita untuk menghindari pengulangan kode yang sama, karena kita bisa menulis kode sekali dan memanggilnya kapan saja. Berikut adalah cara mendeklarasikan fungsi di JavaScript:

function namaFungsi() {
  // Kode yang akan dijalankan
  console.log("Ini adalah fungsi!");
}

Setelah kita mendeklarasikan fungsi, kita bisa memanggilnya kapan saja seperti ini:

namaFungsi(); // Output: Ini adalah fungsi!

Fungsi dengan Parameter

Selain kode yang dijalankan dalam fungsi, kita juga bisa memberikan parameter ke dalam fungsi. Parameter adalah nilai yang akan diterima oleh fungsi dan digunakan dalam kode di dalamnya. Ini sangat berguna jika kita ingin membuat fungsi yang fleksibel.

function sapa(nama) {
  console.log("Halo, " + nama + "!");
}

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

Di sini, nama adalah parameter dari fungsi sapa(). Setiap kali kita memanggil fungsi dengan memberikan argumen (seperti "John" atau "Alice"), nilai tersebut akan diproses di dalam fungsi.

Fungsi dengan Nilai Kembali (Return)

Selain hanya menjalankan kode, fungsi juga bisa mengembalikan nilai menggunakan kata kunci return. Fungsi ini akan mengembalikan hasil yang bisa digunakan di tempat lain.

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

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

Di sini, fungsi tambah() mengembalikan hasil penjumlahan dua angka yang diberikan sebagai parameter.

Studi Kasus: Menghitung Luas Persegi Panjang

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Sekarang, kita akan buat fungsi untuk menghitung luas persegi panjang. Kita akan membuat fungsi yang menerima panjang dan lebar, lalu mengembalikan hasil luasnya.

HTML-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hitung Luas Persegi Panjang</title>
</head>
<body>
  <h1>Hitung Luas Persegi Panjang</h1>
  <input type="number" id="panjang" placeholder="Panjang">
  <input type="number" id="lebar" placeholder="Lebar">
  <button onclick="hitungLuas()">Hitung</button>
  <p id="hasil"></p>

  <script src="script.js"></script>
</body>
</html>

JavaScript-nya (di file script.js):

function hitungLuas() {
  let panjang = document.getElementById("panjang").value;
  let lebar = document.getElementById("lebar").value;
  let luas = panjang * lebar;
  document.getElementById("hasil").innerText = "Luas: " + luas + " m²";
}

Penjelasan:

  • Fungsi hitungLuas() mengambil nilai panjang dan lebar dari input, lalu menghitung luasnya dengan rumus panjang * lebar.
  • Hasilnya kemudian ditampilkan di halaman.

Sekian dulu tentang fungsi di JavaScript. Dengan fungsi, kamu bisa membuat program yang lebih terstruktur dan efisien. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga kamu lebih mudah membuat program yang bisa digunakan berulang kali dengan fungsi-fungsi yang kamu buat! ?

Tutorial Terkait Lainnya

Javascript Dasar #10: Error Handling
Javascript Dasar #10: Error Handling

Halo, teman-teman! Di tutorial kali ini, kita akan membahas tentang Error Handling dan Debugging di ...

Baca Tutorial
Javascript Dasar #8: Event Handling di JavaScript
Javascript Dasar #8: Event Handling di JavaScript

Halo, teman-teman! Kali ini kita akan belajar tentang Event Handling di JavaScript. Event adalah tin...

Baca Tutorial
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #11: DOM Manipulation

Halo, teman-teman! Kali ini kita akan membahas tentang DOM Manipulation atau cara kita berinteraksi ...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)
Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #6: Array & Manipulasi Data
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python