Home » Javascript » Konversi di JavaScript: Cara – Tipe Data dan Jenisnya

Konversi di JavaScript: Cara – Tipe Data dan Jenisnya

by Catur Kurnia Sari
by Catur Kurnia Sari

Number() diubah menjadi Number, String() diubah menjadi String, Boolean() diubah menjadi Boolean.

Tipe Data JavaScript

Di JavaScript ada 5 tipe data berbeda yang dapat berisi nilai, yaitu:

  • string
  • number
  • boolean
  • object
  • function

Ada 6 jenis objek:

  • Object
  • Date
  • Array
  • String
  • Number
  • Boolean

Dan 2 tipe data yang tidak bisa berisi nilai, yaitu:

  • null
  • undefined

Operator typeof

Kita dapat menggunakan operator typeof untuk menemukan tipe data pada variabel JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Operator typeof</h2>

<p> Operator typeof mengembalikan tipe variabel, objek, fungsi atau ekspresi. </p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  typeof "john" + "<br>" +
  typeof 3.14 + "<br>" +
  typeof NaN + "<br>" +
  typeof false + "<br>" +
  typeof [1,2,3,4] + "<br>" +
  typeof {name:'john', age:34} + "<br>" +
  typeof new Date() + "<br>" +
  typeof function () {} + "<br>" +
  typeof myCar + "<br>" +
  typeof null;
</script>

</body>
</html>


Harap diperhatikan bahwa:

  • Tipe data NaN adalah angka
  • Tipe data dari sebuah array adalah objek
  • Tipe data sebuah tanggal adalah objek
  • Tipe data null adalah objek
  • Tipe data dari variabel tidak terdefinisi undefined*
  • Tipe data variabel yang belum diberi nilai juga undefined *

Kita tidak dapat menggunakan operator typeof untuk menentukan apakah objek JavaScript adalah array atau tanggal.

Tipe Data dari typeof

Typeofoperator bukanlah variabel. Typeof operator adalah sebuah operator. Operator (+ – * /) tidak memiliki tipe data apa pun.

Tapi, operator typeof selalu mengembalikan string (berisi tipe operand).

Properti konstruktor

Properti konstruktor mengembalikan fungsi konstruktor untuk semua variabel JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Properti konstruktor</h2>

<p> Properti konstruktor mengembalikan fungsi konstruktor untuk variabel atau
objek. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  "john".constructor + "<br>" +
  (3.14).constructor + "<br>" +
  false.constructor + "<br>" +
  [1,2,3,4].constructor + "<br>" +
  {name:'john', age:34}.constructor + "<br>" +
  new Date().constructor + "<br>" +
  function () {}.constructor;
</script>

</body>
</html>


Anda dapat memeriksa properti konstruktor untuk mengetahui apakah suatu objek adalah Array (berisi kata “Array”).

Comtoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p> Fungsi isArray () "homemade" ini mengembalikan nilai true saat digunakan pada array: </p>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

Atau bahkan penggunaan konstruktor yang lebih sederhana, yaitu dapat digunakan untuk memeriksa apakah objek tersebut adalah fungsi Array:

<!DOCTYPE html>
<html>
<body>

<h2>Object Array JavaScript</h2>
<p> Fungsi isArray () "homemade" ini mengembalikan nilai true saat digunakan pada array: </p>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor === Array;
}
</script>

</body>
</html>

Anda dapat memeriksa properti konstruktor untuk mengetahui apakah suatu objek adalah Tanggal atau berisi kata “Tanggal”:

<!DOCTYPE html>
<html>
<body>

<h2>Object Date JavaScript</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>

</body>
</html>

Atau bahkan lebih sederhana, properti konsturktor dapat memeriksa apakah objek tersebut adalah fungsi Tanggal:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor === Date;
}
</script>

</body>
</html>

Tipe Konversi JavaScript

Variabel JavaScript dapat diubah menjadi variabel baru dan tipe data lain, caranya:

  • Dengan menggunakan fungsi JavaScript
  • Secara otomatis diubah oleh JavaScript itu sendiri

Mengonversi Angka menjadi String

Metode global String() dapat digunakan untuk mengonversi angka menjadi string.

Method ini dapat digunakan pada semua jenis angka, literal, variabel, atau ekspresi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method String() JavaScript </h2>

<p>Metode global String() dapat digunakan untuk mengonversi angka menjadi string.</p>

<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

Metode Angka toString() melakukan hal yang sama.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method Number JavaScript</h2>

<p>Metode toString () mengonversi angka menjadi string. </p>

<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>
MethodDeskiripsi
toExponential()Mengembalikan string, dengan angka dibulatkan dan ditulis menggunakan notasi eksponensial.
toFixed()Mengembalikan string, dengan angka dibulatkan dan ditulis dengan jumlah desimal tertentu.
toPrecision()Mengembalikan string, dengan angka yang ditulis dengan panjang tertentu

Mengonversi Boolean menjadi String

Metode global String() dapat mengonversi boolean menjadi string.

String(false)      // returns "false"
String(true)       // returns "true"

Dengan metode boolean toString() dapat melakukan hal yang sama.

false.toString()   // returns "false"
true.toString()    // returns "true"

Mengubah Tanggal menjadi String

Metode global String() dapat mengonversi tanggal menjadi string.

String(Date())

Metode Tanggal toString() juga melakukan hal yang sama.

Contoh:

Date().toString() 
MethodDescription
getDate()Mengambil hari sebagai angka (1-31)
getDay()Mengambil hari kerja sebagai nomor (0-6)
getFullYear()Mengambil tahun empat digit (yyyy)
getHours()Mengambil jam (0-23)
getMilliseconds()Mengambil milidetik (0-999)
getMinutes()Mengambil menit (0-59)
getMonth()Mengambil bulan (0-11)
getSeconds()Mengambil detik (0-59)
getTime()Mengambil waktu (milidetik sejak 1 Januari 1970)

Mengonversi String ke Angka

Metode global Number () dapat mengubah string menjadi angka.

String yang berisi angka (seperti “3.14”) diubah menjadi angka (seperti 3.14).

String kosong diubah menjadi 0.

Ada pula yang dikonversi ke NaN (Bukan Angka).

Number("3.14")    // returns 3.14
Number(" ")       // returns 0
Number("")        // returns 0
Number("99 88")   // returns NaN
MethodDeskripsi
parseFloat()Mengurai string dan mengembalikan angka floating point
parseInt()Mengurai string dan mengembalikan integer

Operator Unary +

Operator unary + dapat digunakan untuk mengonversi variabel menjadi angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p> Operator typeof mengembalikan tipe variabel atau ekspresi. </p>
<button onclick="myFunction()">cobalah</button>

<p id="demo"></p>

<script>
function myFunction() {
  var y = "5";
  var x = + y;
  document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
}
</script>

</body>
</html>


Jika variabel tidak dapat dikonversi, tetap akan menjadi angka, tetapi dengan nilai NaN (Bukan Angka):

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p> Operator typeof mengembalikan tipe variabel atau ekspresi. </p>

<button onclick="myFunction()">cobalah</button>

<p id="demo"></p>

<script>
function myFunction() {
  var y = "John";
  var x = + y;
  document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
}
</script>

</body>
</html>


Mengonversi Boolean menjadi Angka

Metode global Number() juga dapat mengubah boolean menjadi angka.

Number(false)     // returns 0
Number(true)      // returns 1

Mengubah Tanggal menjadi Angka

Metode global Number() dapat digunakan untuk mengubah tanggal menjadi angka.

d = new Date();
Number(d)          // returns 1404568027739

Metode tanggal getTime () melakukan hal yang sama.

d = new Date();
d.getTime()        // returns 1404568027739

Jenis Konversi Otomatis

Saat JavaScript mencoba untuk beroperasi pada tipe data yang “salah”, JavaScript akan mencoba untuk mengubah nilai menjadi tipe yang “benar”.

Hasilnya tidak selalu seperti yang diharapkan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = [];
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>


Konversi String Otomatis

JavaScript secara otomatis memanggil fungsi toString() variabel ketika kita mencoba untuk “mengeluarkan” sebuah objek atau variabel:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

Angka dan boolean juga dikonversi, tetapi ini tidak terlalu terlihat:

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

Tabel Tipe Konversi JavaScript

Tabel ini menunjukkan hasil konversi nilai JavaScript yang berbeda menjadi Angka, String, dan Boolean:

Nilai asliDikonversi ke AngkaDikonversi menjadi StringDikonversi ke Boolean
false0“false”false
true1“true”true
00“0”false
11“1”true
“0”0“0”true
“000”0“000”true
“1”1“1”true
NaNNaN“NaN”false
InfinityInfinity“Infinity”true
-Infinity-Infinity“-Infinity”true
“”0“”false
“20”20“20”true
“twenty”NaN“twenty”true
[ ]0“”true
[20]20“20”true
[10,20]NaN“10,20”true
[“twenty”]NaN“twenty”true
[“ten”,”twenty”]NaN“ten,twenty”true
function(){}NaN“function(){}”true
{ }NaN“[object Object]”true
null0“null”false
undefinedNaN“undefined”false

Nilai dalam tanda kutip menunjukkan nilai string.

Nilai yang di Bold menunjukkan nilai (beberapa) yang mungkin tidak diharapkan oleh programmer.

You may also like