{"id":62732,"date":"2026-03-23T12:52:56","date_gmt":"2026-03-23T05:52:56","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=62732"},"modified":"2026-03-24T13:06:58","modified_gmt":"2026-03-24T06:06:58","slug":"belajar-javascript-dasar-part-3","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-3\/","title":{"rendered":"Belajar Javascript Dasar Part 3 \u2013 Mengenal Variabel"},"content":{"rendered":"\n<p>Di seri belajar JavaScript <strong><a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-2\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Part 2<\/a><\/strong>, kita sudah membahas konsep dasar seperti <em>statement<\/em> dan <em>expression<\/em> yang menjadi fondasi penting dalam penulisan kode. Nah, di modul Belajar JavaScript Dasar Part 3 ini, kita akan lanjut ke topik yang nggak kalah penting, yaitu variabel di JavaScript.<\/p>\n\n\n\n<p>Di <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar\/\" title=\"\">Part 1<\/a> sebenarnya kita sudah sempat menyinggung sedikit tentang variabel. Tapi di modul ini, kita bakal bahas lebih dalam, mulai dari pengertian variabel, cara penggunaannya, hingga <em>best practice<\/em> yang perlu kamu tahu supaya kode yang kamu buat lebih rapi dan mudah dipahami.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sebenarnya, apa itu Variabel?<\/h2>\n\n\n\n<p>Variabel adalah wadah yang digunakan untuk menampung suatu nilai. Nilai dapat berupa angka, teks, atau apapun yang menghasilkan nilai yang disebut sebagai (<em>expression<\/em>) yang telah kita pelajari sebelumnya.&nbsp;<\/p>\n\n\n\n<p>Di pemrograman berbasis JavaScript, variabel digunakan untuk menampung nilai atau menampung sesuatu yang menghasilkan nilai. Untuk menampung nilai ini, kita dibekali 2 sintak yang digunakan untuk membuat variabel. 2 Sintaks itu adalah <strong>let<\/strong> dan <strong>const<\/strong>. Apa bedanya?&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Const<\/h3>\n\n\n\n<p>Const adalah variabel yang nilainya tetap. Itu artinya, variabel yang dideklarasikan menggunakan const nilainya akan selalu tetap, tidak bisa diubah. Saat Anda memilih membuat variable menggunakan const, maka nilai variabelnya akan tetap seterusnya.&nbsp;<\/p>\n\n\n\n<p>Supaya lebih jelas, mari kita lakukan testing.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Silakan buka Google Chrome atau browser favorit Anda.&nbsp;<\/li>\n\n\n\n<li>Klik kanan &gt;&gt; Inspeksi.&nbsp;<\/li>\n\n\n\n<li>Selanjutnya akan tampil seperti gambar dibawah. Silakan pilih tab console.&nbsp;<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-1024x507.png\" alt=\"Belajar Javascript Dasar - variabel Const\" class=\"wp-image-62736\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-1024x507.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-300x149.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-768x381.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-370x183.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-270x134.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-570x282.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1-740x367.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-1.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Selanjutnya silahkan tulis atau copy paste <em>code <\/em>berikut.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>const negara = 'Indonesia';\n\nconsole.log('Negara awal:', negara);\n\/\/ output: Negara awal: Indonesia\n\nnegara = 'Malaysia'; \/\/ TypeError: Assignment to constant variable.\n\nconsole.log('Negara setelah diubah:', negara);\n\/\/ baris ini tidak akan pernah dijalankan<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"209\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-1024x209.png\" alt=\"Variabel Let\" class=\"wp-image-62737\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-1024x209.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-300x61.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-768x157.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-370x75.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-270x55.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-570x116.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2-740x151.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-2.png 1172w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Terlihat pesan error yang error yang memperlihatkan instruksi tidak bisa dijalankan karena menggunakan constant variable.<\/p>\n\n\n\n<p>Kapan perlu menggunakan variabel const? Anda perlu menggunakan variable const saat;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nilai variabel tidak akan berubah<\/li>\n\n\n\n<li>Ingin kode lebih aman dari perubahan tidak sengaja<\/li>\n\n\n\n<li>Untuk konfigurasi data yang nilainya dipastikan tetap<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Let<\/h3>\n\n\n\n<p>let adalah variabel di Javascript yang nilainya bisa berubah.&nbsp;<\/p>\n\n\n\n<p>Berikut ini contohnya. Silakan Anda copaskan ini dibagian Console untuk melihat hasilnya.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let kota = 'Yogyakarta';\n\nconsole.log('Kota awal:', kota);\n\/\/ output: Kota awal: Yogyakarta\n\nkota = 'Surakarta';\n\nconsole.log('Kota setelah diubah:', kota);\n\/\/ output: Kota setelah diubah: Surakarta<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"242\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3.png\" alt=\"Let variabel\" class=\"wp-image-62738\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3.png 808w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3-300x90.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3-768x230.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3-370x111.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3-270x81.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3-570x171.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-3-gambar-3-740x222.png 740w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><\/a><\/figure>\n\n\n\n<p>Terlihat kota awal adalah <strong>Yogyakarta<\/strong>, kemudian setelah diubah maka kota menjadi <strong>Surakarta<\/strong>.<\/p>\n\n\n\n<p>Sekarang sudah jelaskan, terkait perbedaan antara const dengan let ?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aturan Penamaan Variable di Javascript<\/h2>\n\n\n\n<p>Di Javascript untuk membuat variabel ada aturannya. Sehingga kita tidak boleh membuatnya secara asal<\/p>\n\n\n\n<p>Berikut ini aturan penamaan variabel di Javascript.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tidak diperbolehkan menggunakan nama variabel yang sama di dalam cakupan yang sama.&nbsp;<\/li>\n\n\n\n<li>Nama variabel tidak boleh menggunakan karakter selain huruf, angka, garis bawah, dan tanda dolar.&nbsp;<\/li>\n\n\n\n<li>Nama variable tidak boleh diawali menggunakan angka. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Di JavaScript, kamu biasanya akan menggunakan <code>const<\/code> dan <code>let<\/code> untuk membuat variabel. Gunakan <code>const<\/code> jika nilai variabel tidak akan berubah setelah dideklarasikan, sehingga kode menjadi lebih aman dan mudah dipahami. Sedangkan <code>let<\/code> digunakan jika nilai variabel tersebut kemungkinan akan diubah di kemudian hari, misalnya untuk perhitungan atau proses yang bersifat dinamis.<\/p>\n\n\n\n<p>Dengan memahami penggunaan <code>const<\/code> dan <code>let<\/code> secara tepat, kamu bisa menulis kode yang lebih rapi, konsisten, dan minim error. Jadi, biasakan memilih tipe variabel yang sesuai sejak awal agar proses coding jadi lebih nyaman dan hasilnya juga lebih optimal.<\/p>\n\n\n\n<p>Di seri Belajar JavaScript selanjutnya, kita akan lanjut membahas tentang tipe data yang juga jadi bagian penting dalam pemrograman. Jadi, jangan sampai ketinggalan dan terus ikuti tutorial belajar JavaScript dari Rumahweb untuk meningkatkan skill kamu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quiz<\/h2>\n\n\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 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\n#retry-btn {\n  margin-top: 10px;\n  padding: 8px 12px;\n  border: none;\n  border-radius: 8px;\n  background: #4f46e5;\n  color: white;\n  cursor: pointer;\n}\n<\/style>\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> Variabel mana yang tidak bisa diubah?<\/p>\n    <button onclick=\"answer(this, true)\">const<\/button>\n    <button onclick=\"answer(this, false)\">let<\/button>\n    <button onclick=\"answer(this, false)\">var<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <!-- Quiz 2 -->\n  <div class=\"quiz-box\">\n    <p><strong>Quiz 2:<\/strong> Output dari <code>let a = 5; a + 2<\/code>?<\/p>\n    <button onclick=\"answer(this, true)\">7<\/button>\n    <button onclick=\"answer(this, false)\">5<\/button>\n    <button onclick=\"answer(this, false)\">52<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <!-- Quiz 3 -->\n  <div class=\"quiz-box\">\n    <p><strong>Quiz 3:<\/strong> Keyword lama yang tidak direkomendasikan?<\/p>\n    <button onclick=\"answer(this, true)\">var<\/button>\n    <button onclick=\"answer(this, false)\">let<\/button>\n    <button onclick=\"answer(this, false)\">const<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <!-- Score -->\n  <div id=\"score-box\"><\/div>\n\n<\/div>\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      '<br \/><button id=\"retry-btn\" onclick=\"resetQuiz()\">Ulangi Quiz<\/button>';\n  }\n}\n\nfunction resetQuiz() {\n  totalAnswered = 0;\n  score = 0;\n\n  document.getElementById(\"progress\").innerHTML = \"Progress: 0 \/ 3\";\n  document.getElementById(\"score-box\").innerHTML = \"\";\n\n  document.querySelectorAll(\".quiz-box\").forEach(q => {\n    q.classList.remove(\"answered\");\n\n    const buttons = q.querySelectorAll(\"button\");\n    const result = q.querySelector(\".result\");\n\n    buttons.forEach(b => {\n      b.disabled = false;\n      b.style.opacity = \"1\";\n    });\n\n    result.innerHTML = \"\";\n    result.className = \"result\";\n  });\n}\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>Lanjutkan Belajar Java Script Dasar Part 4 <strong><a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-4\/\" title=\"\"> Mengenal Tipe Data<\/a><\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Di seri belajar JavaScript Part 2, kita sudah membahas konsep dasar seperti statement dan expression yang menjadi fondasi penting dalam penulisan kode. Nah, di modul Belajar JavaScript Dasar Part 3 ini, kita akan lanjut ke topik yang nggak kalah penting, yaitu variabel di JavaScript. Di Part 1 sebenarnya kita sudah sempat menyinggung sedikit tentang variabel. [&hellip;]<\/p>\n","protected":false},"author":319,"featured_media":62823,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[2592,2405,2593],"class_list":{"0":"post-62732","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\/62732","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=62732"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/62732\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/62823"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=62732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=62732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=62732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}