{"id":63721,"date":"2026-05-06T16:11:21","date_gmt":"2026-05-06T09:11:21","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=63721"},"modified":"2026-05-06T16:11:21","modified_gmt":"2026-05-06T09:11:21","slug":"belajar-javascript-dasar-part-6","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-6\/","title":{"rendered":"Belajar Javascript Dasar Part 6 &#8211; Mengenal Apa Itu Function"},"content":{"rendered":"\n<p>Kalau di Belajar Javascript <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-5\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Part 5<\/a> kita sudah membahas tentang konversi tipe data, sekarang saatnya melangkah ke konsep yang tidak kalah penting dalam belajar JavaScript, yaitu function.<\/p>\n\n\n\n<p>Saat mulai menulis kode yang lebih kompleks, kamu akan menyadari bahwa banyak bagian kode yang sebenarnya berulang. Menulis ulang logika yang sama tentu tidak efisien dan berisiko menimbulkan error. Di sinilah <em>function <\/em>berperan untuk membantu menyederhanakan kode.<\/p>\n\n\n\n<p>Dengan function, kamu bisa mengelompokkan kode ke dalam satu blok yang dapat digunakan kembali kapan saja. Hasilnya, kode menjadi lebih rapi, mudah dipahami, dan lebih mudah dikelola.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu <em>function <\/em>dalam pemrograman?&nbsp;<\/h2>\n\n\n\n<p><em>Function <\/em>adalah blok kode yang dirancang untuk menjalankan tugas tertentu dan dapat digunakan kembali kapan saja. Function membantu kamu menghindari penulisan kode yang berulang dengan cara mengelompokkan logika ke dalam satu bagian yang lebih terstruktur.<\/p>\n\n\n\n<p>Secara sederhana, function bekerja seperti \u201cmesin\u201d kecil: kamu memberikan input (parameter), lalu function akan memprosesnya dan menghasilkan output (<em>return value<\/em>). Namun, tidak semua function harus memiliki input atau menghasilkan <em>output<\/em>, tergantung kebutuhan.<\/p>\n\n\n\n<p>Konsep function tidak hanya ada di JavaScript, tetapi juga digunakan di hampir semua bahasa pemrograman. Karena itu, memahami function menjadi salah satu dasar penting sebelum melanjutkan ke topik yang lebih kompleks seperti modularisasi kode atau pembuatan aplikasi yang lebih besar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Struktur Function<\/h2>\n\n\n\n<p>Untuk memudahkan kamu dalam memahami struktur deklarasi function pada pemrograman, silakan lihat pada gambar berikut:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1452\" height=\"736\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript.png\" alt=\"deklarasi function - Belajar Javascript\" class=\"wp-image-63729\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript.png 1452w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript-300x152.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript-1024x519.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript-768x389.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript-370x188.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript-270x137.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript-570x289.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/function-javascript-740x375.png 740w\" sizes=\"auto, (max-width: 1452px) 100vw, 1452px\" \/><\/a><\/figure>\n\n\n\n<p>Pada gambar diatas menunjukkan sebuah <em>function <\/em>sederhana yang dibuat untuk menjalankan tugas tertentu, di mana function didefinisikan sekali lalu bisa dipanggil kembali untuk menghasilkan output sesuai input yang diberikan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementasi Function Sederhana<\/h2>\n\n\n\n<p>Untuk mempermudah memahami konsep function, kita akan mulai dari contoh sederhana terlebih dahulu. Misalnya, menghitung berat badan ideal seseorang menggunakan rumus yang umum digunakan seperti berikut.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pria: (tinggi badan &#8211; 100) &#8211; (10% \u00d7 (tinggi badan &#8211; 100))<\/li>\n\n\n\n<li>Wanita: (tinggi badan &#8211; 100) &#8211; (15% \u00d7 (tinggi badan &#8211; 100))<\/li>\n<\/ul>\n\n\n\n<p>Misalnya kamu seorang pria yang memiliki tinggi badan 170 cm, maka cara menghitung berat idealnya adalah :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(170 - 100) - (0.1 * (170 - 100))<\/code><\/pre>\n\n\n\n<p>Hasilnya = 63 kg<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Contoh Tanpa Function untuk menghitung berat ideal<\/h3>\n\n\n\n<p>Bila kita menghitungnya tanpa menggunakan function, code ditulis seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const height = 170;\nconst idealWeight = (height - 100) - (0.1 * (height - 100));\n\nconsole.log('Berat ideal:', idealWeight);<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"136\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-2.png\" alt=\"Contoh Tanpa Function untuk menghitung berat ideal\" class=\"wp-image-63730\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-2.png 722w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-2-300x57.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-2-370x70.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-2-270x51.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-2-570x107.png 570w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/a><\/figure>\n\n\n\n<p>Cara menghitung berat badan ideal terlihat mudah ya. Tapi, bagaimana bila kita ingin menghitung banyak orang?<\/p>\n\n\n\n<p>Misalnya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>160 cm<\/li>\n\n\n\n<li>170 cm<\/li>\n\n\n\n<li>180 cm<\/li>\n<\/ul>\n\n\n\n<p>Bila kamu buat seperti screenshot dibawah ini, maka itu <strong>TIDAK EFEKTIF <\/strong>dan <strong>TIDAK DISARANKAN<\/strong>.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"270\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-1.png\" alt=\"tutorial membuat function javascript \" class=\"wp-image-63732\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-1.png 549w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-1-300x148.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-1-370x182.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-1-270x133.png 270w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/a><\/figure>\n\n\n\n<p>Untuk mengatasi contoh case seperti diatas, maka disarankan menggunakan Function. Dengan menggunakan function, maka kita bisa membungkus rumus tadi ke dalam function, supaya bisa dipakai berulang kali.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Menggunakan function untuk menghitung berat ideal<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>function <strong>namaFunction<\/strong>(parameter) {\n&nbsp; \/\/ isi function\n}<\/code><\/pre>\n\n\n\n<p>Sekarang kita buat function untuk menghitung berat ideal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function <strong>hitungBeratIdeal<\/strong>(tinggiBadan) {\n&nbsp; const beratIdeal = (tinggiBadan - 100) - (0.1 * (tinggiBadan - 100));\n\n&nbsp; console.log('Berat ideal:', beratIdeal);\n}<\/code><\/pre>\n\n\n\n<p><strong>Penjelasan:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>hitungBeratIdeal <\/strong>= ini adalah nama function<\/li>\n\n\n\n<li><strong>tinggiBadan <\/strong>= parameter (input)<\/li>\n\n\n\n<li>isi <strong>()<\/strong> = proses perhitungan<\/li>\n<\/ul>\n\n\n\n<p>Setelah itu, cukup kita panggil functionnya dengan menyertakan parameter.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>hitungBeratIdeal(160);<br \/>hitungBeratIdeal(170);<br \/>hitungBeratIdeal(180);&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"237\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-3.png\" alt=\"membuat function js untuk menghitung berat ideal\" class=\"wp-image-63731\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-3.png 653w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-3-300x109.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-3-370x134.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-3-270x98.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/04\/tutorial-function-javascript-rumahweb-gambar-3-570x207.png 570w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Hoisting\u00a0<\/strong><\/h2>\n\n\n\n<p>Di JavaScript ada juga yang disebut dengan hoisting, yaitu function bisa dipanggil lebih dulu sebelum dibuat:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sapa();\n\nfunction sapa() {\n  console.log('Halo!');\n}<\/code><\/pre>\n\n\n\n<p>Tetap bisa jalan ya. Tapi sebaiknya tetap tulis function dulu agar kode lebih rapi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kesimpulan<\/strong><\/h2>\n\n\n\n<p>Function adalah cara untuk membungkus kode program agar bisa digunakan secara berulang. Dengan menggunakan function, maka membantu kode menjadi lebih rapi, lebih singkat, dan lebih mudah dipahami.\u00a0Dengan function, kita cukup buat sekali code programnya, dan code bisa dipakai berkali-kali. <\/p>\n\n\n\n<p>Di seri belajar JavaScript selanjutnya, kita akan membahas topik yang nggak kalah penting, yaitu operator di JavaScript. Jadi, jangan sampai ketinggalan dan terus ikuti seri belajar JavaScript dari Rumahweb untuk meningkatkan skill kamu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quiz<\/h2>\n\n\n\n<p>Yuk, coba kuis belajar JavaScript Part 6 tentang function berikut untuk menguji pemahaman kamu!<\/p>\n\n\n\n<div id=\"quiz-wrapper\">\n\n  <div id=\"progress\">Progress: 0 \/ 3<\/div>\n\n  <!-- Quiz 1 -->\n  <div class=\"quiz-box\">\n    <p><strong>Quiz 1:<\/strong> Apa fungsi dari function di JavaScript?<\/p>\n    <pre><code>function sapa() {\n  console.log(\"Halo!\");\n}<\/code><\/pre>\n    <button onclick=\"answer(this, false)\">Menyimpan data<\/button>\n    <button onclick=\"answer(this, true)\">Membungkus kode agar bisa digunakan berulang kali<\/button>\n    <button onclick=\"answer(this, false)\">Menghapus variabel<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <!-- Quiz 2 -->\n  <div class=\"quiz-box\">\n    <p><strong>Quiz 2:<\/strong> Apa output dari kode berikut?<\/p>\n    <pre><code>function hitung(a) {\n  return a * 2;\n}\n\nconsole.log(hitung(5));<\/code><\/pre>\n    <button onclick=\"answer(this, false)\">5<\/button>\n    <button onclick=\"answer(this, true)\">10<\/button>\n    <button onclick=\"answer(this, false)\">Error<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <!-- Quiz 3 -->\n  <div class=\"quiz-box\">\n    <p><strong>Quiz 3:<\/strong> Mana cara yang benar untuk memanggil function?<\/p>\n    <pre><code>function salam() {\n  console.log(\"Hai!\");\n}<\/code><\/pre>\n    <button onclick=\"answer(this, false)\">salam<\/button>\n    <button onclick=\"answer(this, true)\">salam()<\/button>\n    <button onclick=\"answer(this, false)\">function salam()<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <div id=\"score-box\"><\/div>\n\n<\/div>\n\n<style>\n.quiz-box {\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  padding: 16px;\n  margin-bottom: 20px;\n  background: #f9fafb;\n}\n\n.quiz-box pre {\n  background: #111827;\n  color: #f9fafb;\n  padding: 10px;\n  border-radius: 8px;\n  overflow-x: auto;\n  margin-bottom: 10px;\n}\n\n.quiz-box button {\n  display: block;\n  margin: 6px 0;\n  padding: 8px 12px;\n  border-radius: 8px;\n  border: none;\n  background: #e5e7eb;\n  cursor: pointer;\n}\n\n.quiz-box button:hover {\n  background: #d1d5db;\n}\n\n.result {\n  margin-top: 10px;\n  font-weight: bold;\n}\n\n.correct {\n  color: green;\n}\n\n.wrong {\n  color: red;\n}\n\n#score-box {\n  margin-top: 20px;\n  padding: 12px;\n  border-radius: 10px;\n  background: #eef2ff;\n}\n<\/style>\n\n<script>\nlet totalAnswered = 0;\nlet score = 0;\n\nfunction answer(btn, isCorrect) {\n  const quiz = btn.parentElement;\n\n  if (quiz.classList.contains(\"answered\")) return;\n\n  quiz.classList.add(\"answered\");\n\n  const buttons = quiz.querySelectorAll(\"button\");\n  const result = quiz.querySelector(\".result\");\n\n  buttons.forEach(b => {\n    b.disabled = true;\n    b.style.opacity = \"0.6\";\n  });\n\n  btn.style.opacity = \"1\";\n\n  if (isCorrect) {\n    result.innerHTML = \"Jawaban benar\";\n    result.className = \"result correct\";\n    score++;\n  } else {\n    result.innerHTML = \"Jawaban salah\";\n    result.className = \"result wrong\";\n  }\n\n  totalAnswered++;\n\n  document.getElementById(\"progress\").innerHTML =\n    \"Progress: \" + totalAnswered + \" \/ 3\";\n\n  if (totalAnswered === 3) {\n    let message = \"\";\n\n    if (score === 3) message = \"Hasil sangat baik, kamu sudah paham\";\n    else if (score === 2) message = \"Cukup baik, sedikit lagi\";\n    else message = \"Perlu belajar lagi\";\n\n    document.getElementById(\"score-box\").innerHTML =\n      \"Skor kamu: \" + score + \" dari 3<br \/>\" + message;\n  }\n}\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kalau di Belajar Javascript Part 5 kita sudah membahas tentang konversi tipe data, sekarang saatnya melangkah ke konsep yang tidak kalah penting dalam belajar JavaScript, yaitu function. Saat mulai menulis kode yang lebih kompleks, kamu akan menyadari bahwa banyak bagian kode yang sebenarnya berulang. Menulis ulang logika yang sama tentu tidak efisien dan berisiko menimbulkan [&hellip;]<\/p>\n","protected":false},"author":319,"featured_media":64012,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[2592,2405,2593],"class_list":{"0":"post-63721","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-javascript","9":"tag-javascript","10":"tag-javascript-dasar"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/319"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=63721"}],"version-history":[{"count":5,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63721\/revisions"}],"predecessor-version":[{"id":64080,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63721\/revisions\/64080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/64012"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=63721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=63721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=63721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}