{"id":63012,"date":"2026-04-13T15:51:57","date_gmt":"2026-04-13T08:51:57","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=63012"},"modified":"2026-04-13T15:52:26","modified_gmt":"2026-04-13T08:52:26","slug":"belajar-javascript-dasar-part-5","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-5\/","title":{"rendered":"Belajar Javascript Dasar Part 5 \u2013\u00a0 Mengubah Tipe Data"},"content":{"rendered":"\n<p>Kalau di Belajar Javascript <strong><a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-4\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Part 4<\/a> <\/strong>kita sudah membahas berbagai jenis tipe data di JavaScript, sekarang saatnya masuk ke hal yang tidak kalah penting, yaitu bagaimana cara mengubah tipe data tersebut.<\/p>\n\n\n\n<p>Dalam praktiknya, data yang kita gunakan tidak selalu datang dalam format yang sesuai. Kadang berupa string, padahal kita butuh angka untuk perhitungan. Di sinilah konsep konversi tipe data menjadi sangat penting dalam JavaScript.<\/p>\n\n\n\n<p>Melalui artikel ini, Anda akan belajar cara mengubah tipe data di JavaScript dengan mudah, lengkap dengan contoh yang sering ditemui dalam kasus nyata.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Itu Konversi Tipe Data di JavaScript?<\/h2>\n\n\n\n<p>Konversi tipe data adalah proses mengubah suatu nilai dari satu tipe data ke tipe data lainnya. Di JavaScript, proses ini bisa terjadi secara otomatis (<em>implicit<\/em>) maupun dilakukan secara manual (<em>explicit<\/em>).<\/p>\n\n\n\n<p>Sebagai bahasa yang fleksibel, JavaScript memungkinkan perubahan tipe data dalam berbagai kondisi. Hal ini membuat <em>developer <\/em>lebih mudah dalam mengolah data, tetapi juga bisa menimbulkan kebingungan jika tidak dipahami dengan baik.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Konversi Tipe Data di JavaScript<\/h2>\n\n\n\n<p>Berikut adalah contoh sederhana konversi tipe data di JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(\"5\" + 2); \/\/ \"52\"\nconsole.log(\"5\" - 2); \/\/ 3<\/code><\/pre>\n\n\n\n<p>Lho, kenapa bisa berbeda?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>+ &gt; hasilnya jadi gabung <strong>string<\/strong><\/li>\n\n\n\n<li>&#8211; &gt; hasilnya <strong>operasi <\/strong>matematika<\/li>\n<\/ul>\n\n\n\n<p>Bagaimana caranya supaya saat menggunakan operator + maka dilakukan aksi penjumlahan. Jawabnya adalah, kita ubah terlebih dahulu tipe datanya dari <strong><em>string <\/em><\/strong>menjadi <strong><em>number<\/em><\/strong>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Konversi Eksplisit (Manual &amp; Aman)<\/strong><\/h2>\n\n\n\n<p>Konversi Eksplisit adalah cara manual untuk melakukan perubahan tipe data. Cara ini merupakan cara paling aman, karena kamu meminta langsung ke Javascript untuk merubah tipe data variabel sesuai dengan kebutuhan code program.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Mengubah tipe data ke String<\/h3>\n\n\n\n<p>Ada 2 cara yang bisa kamu lakukan untuk mengubah tipe data ke string.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cara 1. Gunakan method <strong>String()<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let nilai = 100;\nlet hasil = String(nilai);\nconsole.log(hasil); \/\/ \"100\" sebagai string.<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cara 2. Menggunakan <strong>.toString()<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let status = false;\nlet teksStatus = status.toString();\nconsole.log(teksStatus); \/\/ \"false\"<\/code><\/pre>\n\n\n\n<p>Contoh lainnya sebagai berikut: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let invoiceNumber = 123456789;\n\nlet display = \"INV-\" + invoiceNumber.toString();\n\nconsole.log(display);<\/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-5-gambar-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"142\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-1.png\" alt=\"Belajar Javascript Dasar Part 5 - gambar 1\" class=\"wp-image-63017\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-1.png 669w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-1-300x64.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-1-370x79.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-1-270x57.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-1-570x121.png 570w\" sizes=\"auto, (max-width: 669px) 100vw, 669px\" \/><\/a><\/figure>\n\n\n\n<p>Perbedaan dalam penggunaannya adalah <code>string() <\/code>dapat kamu pakai ke hampir semua tipe data, sedangkan untuk <code>.toString()<\/code> hanya bisa kamu pakai kalau datanya bukan null atau undefined.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Mengubah tipe data ke <strong>Number<\/strong><\/h3>\n\n\n\n<p>Konversi yang kedua adalah mengubah tipe data ke number menggunakan <code>Number()<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let inputUser = \"1000\";\nlet angka = Number(inputUser);\nconsole.log(angka); \/\/ 10000<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Mengubah tipe data ke <strong>Boolean<\/strong><\/h3>\n\n\n\n<p>Untuk perubahan ke tipe data boolean menghasilkan nilai <strong>true <\/strong>atau <strong>false<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(Boolean(1));        \/\/ true\nconsole.log(Boolean(\"halo\"));   \/\/ true\nconsole.log(Boolean(0));        \/\/ false\nconsole.log(Boolean(\"\"));       \/\/ false<\/code><\/pre>\n\n\n\n<p>Sebagai catatan, berikut ini daftar nilai yang akan menghasilkan <strong>false <\/strong>di Boolean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>false\n0\n\"\"        \/\/ string kosong\nnull\nundefined\nNaN<\/code><\/pre>\n\n\n\n<p>Selain daftar diatas, maka hasil Booleannya adalah <strong>true<\/strong>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Konversi Implisit (Dilakukan otomatis Oleh Javascript)<\/h2>\n\n\n\n<p>Sebagai informasi, Javascript memiliki kemampuan untuk mengubah otomatis tipe data sesuai kondisi. Namun cara ini ada resiko, yang mana hasilnya tidak sesuai yang kita inginkan bila kamu belum memahaminya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Contoh 1. Gabung String<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>let umur = 17;\nlet teks = \"Umur saya adalah \" + umur;console.log(teks);<\/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-5-gambar-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"702\" height=\"146\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-2.png\" alt=\"Belajar Javascript Dasar Part 5 - gambar 2\" class=\"wp-image-63018\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-2.png 702w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-2-300x62.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-2-370x77.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-2-270x56.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Belajar-Javascript-Dasar-Part-5-gambar-2-570x119.png 570w\" sizes=\"auto, (max-width: 702px) 100vw, 702px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Contoh 2. Operasi Matematika<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>let nilai = \"7\";\n\nlet hasil = nilai * 3;\nconsole.log(hasil);<\/code><\/pre>\n\n\n\n<p>Hasilnya adalah 21.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Contoh 3. Boolean Ikut hitungan<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>let diskon = true;\n\nlet harga = 10000 + diskon;\nconsole.log(harga);<\/code><\/pre>\n\n\n\n<p>Hasilnya adalah 10001. <\/p>\n\n\n\n<p class=\"has-gridlove-highlight-acc-background-color has-background\"><strong>Penting:<\/strong> Pada operasi penjumlahan (<code>+<\/code>), hasilnya bisa berbeda jika tipe data belum diubah menjadi <em>number<\/em>, karena JavaScript akan menganggapnya sebagai penggabungan <em>string<\/em>, bukan perhitungan angka.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(\"5\" + 2); \/\/ hasilnya \"52\"\nconsole.log(\"5\" - 2); \/\/ hasilnya 3<\/code><\/pre>\n\n\n\n<p><strong>Keterangan&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>+ : hasilnya adalah gabung <strong>string<\/strong><\/li>\n\n\n\n<li>&#8211; : hasilnya <strong>operasi <\/strong>matematika pengurangan.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Penutup<\/h2>\n\n\n\n<p>JavaScript dikenal sebagai bahasa pemrograman yang fleksibel, termasuk dalam hal pengelolaan tipe data. Anda bisa dengan mudah melakukan konversi tipe data sesuai kebutuhan. Namun, untuk hasil yang lebih jelas dan aman, disarankan menggunakan konversi eksplisit (manual) agar tidak terjadi kesalahan yang tidak diinginkan.<\/p>\n\n\n\n<p>Perlu diingat, operator <code>+<\/code> di JavaScript dapat berperilaku berbeda. Jika tipe data belum diubah menjadi <em>number<\/em>, operator ini akan menggabungkan nilai sebagai <em>string<\/em>, bukan melakukan penjumlahan.<\/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 5 tentang mengubah tipe data 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 hasil dari kode berikut?<\/p>\n    <pre>console.log(\"10\" + 5);<\/pre>\n    <button onclick=\"answer(this, false)\">15<\/button>\n    <button onclick=\"answer(this, true)\">&#8220;105&#8221;<\/button>\n    <button onclick=\"answer(this, false)\">Error<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <!-- Quiz 2 -->\n  <div class=\"quiz-box\">\n    <p><strong>Quiz 2:<\/strong> Manakah cara konversi string ke number secara eksplisit?<\/p>\n    <button onclick=\"answer(this, false)\">&#8220;10&#8221; + 5<\/button>\n    <button onclick=\"answer(this, true)\">Number(&#8220;10&#8221;)<\/button>\n    <button onclick=\"answer(this, false)\">&#8220;10&#8221;.toString()<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <!-- Quiz 3 -->\n  <div class=\"quiz-box\">\n    <p><strong>Quiz 3:<\/strong> Apa hasil dari kode berikut?<\/p>\n    <pre>console.log(\"5\" - 2);<\/pre>\n    <button onclick=\"answer(this, false)\">&#8220;52&#8221;<\/button>\n    <button onclick=\"answer(this, true)\">3<\/button>\n    <button onclick=\"answer(this, false)\">&#8220;3&#8221;<\/button>\n    <p class=\"result\"><\/p>\n  <\/div>\n\n  <div id=\"score-box\"><\/div>\n\n  <button onclick=\"resetQuiz()\" style=\"margin-top:15px;\">Ulangi Kuis<\/button>\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 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 konversi tipe data\";\n    else if (score === 2) message = \"Cukup baik, sedikit lagi\";\n    else message = \"Perlu belajar lagi tentang konversi tipe data\";\n\n    document.getElementById(\"score-box\").innerHTML =\n      \"Skor kamu: \" + score + \" dari 3<br \/>\" + message;\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  const quizzes = document.querySelectorAll(\".quiz-box\");\n\n  quizzes.forEach(quiz => {\n    quiz.classList.remove(\"answered\");\n\n    const buttons = quiz.querySelectorAll(\"button\");\n    const result = quiz.querySelector(\".result\");\n\n    buttons.forEach(btn => {\n      btn.disabled = false;\n      btn.style.opacity = \"1\";\n    });\n\n    result.innerHTML = \"\";\n    result.className = \"result\";\n  });\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Kalau di Belajar Javascript Part 4 kita sudah membahas berbagai jenis tipe data di JavaScript, sekarang saatnya masuk ke hal yang tidak kalah penting, yaitu bagaimana cara mengubah tipe data tersebut. Dalam praktiknya, data yang kita gunakan tidak selalu datang dalam format yang sesuai. Kadang berupa string, padahal kita butuh angka untuk perhitungan. Di sinilah [&hellip;]<\/p>\n","protected":false},"author":319,"featured_media":63348,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[2592,2405,2593],"class_list":{"0":"post-63012","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":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/03\/Banner-Belajar-Javascript-Dasar-Part-5.webp","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-gok","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63012","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=63012"}],"version-history":[{"count":10,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63012\/revisions"}],"predecessor-version":[{"id":63392,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63012\/revisions\/63392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/63348"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=63012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=63012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=63012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}