Javascript Dasar #3: Fungsi dan Penggunaan dalam Program

Author Erick Irwansyah
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 #5: Perulangan (Loops)
Javascript Dasar #5: Perulangan (Loops)

Hai, kembali lagi! Di tutorial kali ini, kita akan belajar tentang perulangan atau loops. Perulangan...

Baca Tutorial
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 #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 #1: Pengenalan Javascript
Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #11: DOM Manipulation
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php