Home » Javascript » Tipe Data di JavaScript: Konsep dan Contohnya

Tipe Data di JavaScript: Konsep dan Contohnya

by Catur Kurnia Sari
by Catur Kurnia Sari

Variabel JavaScript dapat menampung banyak tipe data seperti angka, string, object, dan lainnya.

Contoh :

var length = 16;                               // Angka
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

Konsep Tipe Data

Dalam pemrograman, tipe data merupakan konsep penting.

Untuk dapat mengoperasikan variabel, penting untuk mengetahui tipe datanya.

Tanpa tipe data, komputer tidak dapat menyelesaikan pemrograman dengan baik.

var x = 16 + "Volvo";

Apakah masuk akal untuk menjumlahkan antara “Volvo” dan 16? Akankah itu menghasilkan kesalahan atau akankah itu membuahkan hasil?

JavaScript akan menangani contoh di atas sebagai berikut:

var x = "16" + "Volvo";

Saat menambahkan angka dan string, JavaScript akan memperlakukan angka tersebut sebagai string.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Saat menambahkan angka dan string, JavaScript akan memperlakukan angka tersebut sebagai string.</p>

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

<script>
var x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Saat menambahkan angka dan string, JavaScript akan memperlakukan angka tersebut sebagai string.</p>

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

<script>
var x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


JavaScript akan mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapat menghasilkan hasil yang berbeda.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapat menghasilkan hasil yang berbeda:</p>

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

<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapat menghasilkan hasil yang berbeda:</p>

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

<script>
var x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Pada contoh pertama, JavaScript memperlakukan 16 dan 4 sebagai angka, hingga mencapai “Volvo”.

Dalam contoh kedua, karena operan pertama adalah string, semua operan diperlakukan sebagai string.

Tipe data Dinamis

JavaScript memiliki tipe data dinamis. Artinya variabel yang sama dapat digunakan untuk menampung tipe data yang berbeda.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Tipe data dinamis</h2>

<p>JavaScript memiliki tipe data dinamis. Artinya variabel yang sama dapat digunakan untuk menampung tipe data yang berbeda.</p>

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

<script>
var x;         // x undefined
x = 5;         // sekarang x adalah angka
x = "John";      // x adalah String

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Tipe data String

Tipe data string adalah tipe data yang berbentuk serangkaian karakter seperti “John Doe”.

String ditulis dengan tanda kutip, kita dapat menggunakan tanda kutip tunggal atau ganda.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String</h2>

<p>String ditulis dengan tanda kutip, kita dapat menggunakan tanda kutip tunggal atau ganda.</p>

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

<script>
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';

document.getElementById("demo").innerHTML =
carName1 + "<br>" + 
carName2; 
</script>

</body>
</html>


Anda dapat menggunakan tanda kutip di dalam string, selama tanda kutip yang digunakan tidak sama dengan tanda kutip yang mengelilingi string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String</h2>

<p>Anda dapat menggunakan tanda kutip di dalam string, selama tanda kutip yang digunakan tidak sama dengan tanda kutip yang mengelilingi string.</p>

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

<script>
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =
answer1 + "<br>" + 
answer2 + "<br>" + 
answer3;
</script>

</body>
</html>


Tipe data Angka

JavaScript hanya memiliki satu jenis tipe data angka.

Angka dapat ditulis dengan atau tanpa desimal.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Tipe data angka</h2>

<p>Angka dapat ditulis dengan atau tanpa desimal.</p>

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

<script>
var x1 = 34.00;
var x2 = 34;
var x3 = 3.14;

document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>

</body>
</html>


Angka yang sangat besar atau sangat kecil dapat ditulis dengan notasi ilmiah (eksponensial):

<!DOCTYPE html>
<html>
<body>

<h2>Tipe data angka</h2>

<p>Angka ekstra besar atau ekstra kecil dapat ditulis dengan notasi ilmiah (eksponensial):</p>

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

<script>
var y = 123e5;
var z = 123e-5;

document.getElementById("demo").innerHTML =
y + "<br>" + z;
</script>

</body>
</html>


Tipe data Boolean

Boolean hanya dapat memiliki dua nilai yaitu true atau false.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Boolean</h2>

<p>Boolean hanya dapat memiliki dua nilai yaitu true atau false.</p>

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

<script>
var x = 5;
var y = 5;
var z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

Boolean sering digunakan dalam pengujian bersyarat.

Tipe data Array

Array JavaScript ditulis dengan tanda kurung siku [].

Lali item array dipisahkan dengan koma.

Script berikut mendeklarasikan (membuat) array yang disebut mobil, berisi tiga item (nama mobil).

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p>Indeks array berbasis nol, yang berarti item pertama adalah [0].</p>

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

<script>
var mobil = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = mobil[0];
</script>

</body>
</html>

Indeks array berbasis nol, yang berarti item pertama adalah [0], item kedua [1], dan seterusnya.

Tipe data Object

Object JavaScript ditulis dengan tanda kurung kurawal {}.

Properti object ditulis sebagai pasangan nama: nilai, dipisahkan dengan koma.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object</h2>

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

<script>
var person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Object (person) pada contoh di atas memiliki 4 properti: firstName, lastName, age, dan eyeColor.

Operator typeof

Kita dapat menggunakan operator typeof pada JavaScript untuk menemukan jenis variabel JavaScript.

Operator typeof mengembalikan tipe variabel atau ekspresi.

Contoh:

<!DOCTYPE html>
<html>
<body>

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

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

<script>
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>


<!DOCTYPE html>
<html>
<body>

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

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

<script>
document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>

</body>
</html>


Tipe data Undefined

Di JavaScript, variabel undefined memiliki nilai yang tidak ditentukan. Tipe datanya juga tidak ditentukan.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Nilai (dan tipe data) variabel tanpa nilai adalah <b>undefined</b>.</p>

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

<script>
var car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html> 

Variabel apa pun dapat dikosongkan, dengan mengatur nilainya menjadi undefined. Tipe datanya juga tidak akan ditentukan.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Variabel apa pun dapat dikosongkan, dengan mengatur nilainya menjadi <b>undefined</b>.</p>

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

<script>
var car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html> 

Nilai Kosong

Nilai kosong tidak ada hubungannya dengan undefined.

String kosong memiliki nilai data dan tipe data.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>String kosong memiliki nilai dan tipe data:</p>

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

<script>
var car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>

</body>
</html>


Null

Dalam JavaScript, null berarti “tidak ada”. Tipe data null seharusnya menjadi sesuatu tidak ada nilainya (0).

Sayangnya, dalam JavaScript, tipe data null adalah sebuah object.

Hal ini dapat dianggap sebagai bug di JavaScript bahwa tipe data null adalah object padahal seharusnya nol.

Kita dapat mengosongkan object dengan mengatur menjadi null:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Kita dapat mengosongkan object dengan mengatur menjadi <b>null</b>.</p>

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

<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>

</body>
</html> 

Kita juga dapat mengosongkan object dengan menyetelnya menjadi undefined:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Kita dapat mengosongkan object dengan mengatur menjadi <b>undefined</b>.</p>

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

<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined;
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html> 

Perbedaan antara Undefined dan Null

Undefined dan null memiliki nilai yang sama tetapi jenisnya berbeda.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Undefined dan null memiliki nilai yang sama tetapi jenisnya berbeda.</p>

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

<script>
document.getElementById("demo").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>

</body>
</html> 

Primitive Data

Nilai data primitif adalah satu nilai data sederhana tanpa properti dan metode tambahan.

Operator typeof dapat mengembalikan salah satu dari tipe primitif berikut:

  • string
  • number
  • boolean
  • undefined

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript typeof</h2>
<p>Operator typeof dapat mengembalikan nilai variabel atau ekspresi</p>

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

<script>
document.getElementById("demo").innerHTML = 
typeof "john" + "<br>" + 
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>

</body>
</html>


Complex Data

Operator typeof juga dapat mengembalikan salah satu dari dua tipe data kompleks, berikut:

  • fungsi atau function
  • object

Operator typeof mengembalikan nilai “object” pada tipe object, array, dan null

Operator typeof tidak mengembalikan nilai “object” pada fungsi.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript typeof</h2>
<p>Operator typeof mengembalikan nilai "object" pada  tipe object, array, dan null</p>
<p>Operator typeof tidak mengembalikan nilai "object" pada fungsi.</p>

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

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

</body>
</html>


Operator typeof mengembalikan object menjadi array karena dalam JavaScript array merupakan sebuah object.

You may also like