Home » Javascript » Angka di JavaScript: Cara Mengunakan dan Codenya

Angka di JavaScript: Cara Mengunakan dan Codenya

by Catur Kurnia Sari
by Catur Kurnia Sari

JavaScript hanya memiliki satu tipe data angka yaitu angka yang dapat ditulis dengan atau tanpa desimal.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Angka</h2>

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

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

<script>
var x = 3.14;
var y = 3;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Angka yang sangat besar atau sangat kecil dapat ditulis dengan notasi ilmiah (eksponen).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Angka</h2>

<p>Angka yang sangat besar atau sangat kecil dapat ditulis dengan notasi ilmiah (eksponen).</p>

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

<script>
var x = 123e5;
var y = 123e-5;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Angka JavaScript Selalu Floating Point 64-bi

Tidak seperti banyak bahasa pemrograman lainnya, JavaScript tidak mendefinisikan berbagai jenis angka, seperti bilangan bulat, pendek, panjang, floating-point, dll.

Angka pada JavaScript selalu disimpan sebagai angka floating point presisi ganda, mengikuti standar IEEE 754 internasional.

Format ini menyimpan bilangan dalam 64 bit, dimana bilangan (pecahan) disimpan dalam bit 0 sampai 51, eksponen dalam bit 52 sampai 62, dan masuk bit 63:

Nilai (alias Fraksi / Mantissa)EksponenSign
52 bits (0 – 51) 11 bits (52 – 62)1 bit (63)

Presisi

Bilangan bulat (bilangan tanpa titik atau notasi eksponen) akurat hingga 15 digit.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka JavaScript</h2>

<p>Bilangan bulat (bilangan tanpa titik atau notasi eksponen) akurat hingga 15 digit.</p>

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

<script>
var x = 999999999999999;
var y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


Jumlah maksimum desimal adalah 17, tetapi aritmatika floating point tidak selalu akurat 100%.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka JavaScript</h2>

<p>Aritmatika floating point tidak selalu akurat 100%</p>

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

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

</body>
</html>


Untuk mengatasi masalah di atas, ada baiknya mengalikan dan membagi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Aritmatika floating point tidak selalu akurat 100%</p>
<p id="demo1"></p>

<p>Untuk mengatasinya dapat dilakukan dengan cara mengalikan dan membagi.</p>

<p id="demo2"></p>

<script>
var x = 0.2 + 0.1;
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
var y = (0.2*10 + 0.1*10) / 10;
document.getElementById("demo2").innerHTML = "0.2 + 0.1 = " + y;
</script>

</body>
</html>


Menambahkan Angka dan String

PERINGATAN !!

JavaScript menggunakan operator + untuk penambahan dan penggabungan.

Jika tipe datanya angka maka akan didijumlahkan dan apabilat tipe datanya String akan digabungkan.

Jika anda menambahkan dua angka, hasilnya adalah angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka JavaScript</h2>

<p>Jika anda menambahkan dua angka, hasilnya adalah angka.</p>

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

<script>
var x = 10;
var y = 20;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>


Jika Anda menambahkan dua string, hasilnya adalah rangkaian string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Jika Anda menambahkan dua string, hasilnya adalah rangkaian string.</p>

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

<script>
var x = "10";
var y = "20";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>


Jika Anda menambahkan angka dan string, hasilnya adalah rangkaian string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Jika Anda menambahkan angka dan string, hasilnya adalah rangkaian string.</p>

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

<script>
var x = 10;
var y = "20";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>


Kesalahan yang umum adalah mengharapkan hasil kode menjadi 30.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Kesalahan yang umum adalah mengharapkan hasil kode menjadi 30.</p>

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

<script>
var x = 10;
var y = 20;
document.getElementById("demo").innerHTML =
"The result is: " + x + y;
</script>

</body>
</html>


Kesalahan umum adalah mengharapkan hasil ini menjadi 102030.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Kesalahan umum adalah mengharapkan hasil ini menjadi 102030.</p>

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

<script>
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>


JavaScript akan membaca angka dari kiri ke kanan.

Angka pertama 10 + 20 akan ditambahkan karena x dan y keduanya adalah angka.

Kemudian 30 + “30” akan digabungkan karena z adalah string.

Angka string

String JavaScript dapat memiliki konten numerik.

Berikut ini adalah contohnya:

var x = 100;         // x adalah angka

var y = "100";       // y adalah string

JavaScript akan mencoba untuk mengubah string menjadi angka dalam semua operasi numerik.

Contoh:

Benar

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>JavaScript akan mencoba untuk mengubah string menjadi angka saat dibagi.</p>

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

<script>
var x = "100";
var y = "10";
var z = x / y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Benar

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>JavaScript akan mencoba mengonversi string menjadi angka saat dikalikan.</p>

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

<script>
var x = "100";
var y = "10";
var z = x * y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Benar

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p> JavaScript akan mencoba mengubah string menjadi angka saat dikurangkan. </p>
<p id="demo"></p>

<script>
var x = "100";
var y = "10";
var z = x - y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Salah

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p> JavaScript TIDAK akan mengubah string menjadi angka saat dijumlahkan. </p>
<p id="demo"></p>

<script>
var x = "100";
var y = "10";
var z = x + y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Dalam contoh terakhir JavaScript menggunakan operator + untuk menggabungkan string.

NaN – Not a Number

NaN adalah kata khusus JavaScript yang menunjukkan bahwa bilangan bukan bilangan resmi.

Mencoba melakukan perhitungan aritmatika dengan string non-numerik akan menghasilkan NaN (Bukan Angka).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Angka dibagi dengan string non-numerik menjadi NaN (Bukan Angka):</p>

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

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

</body>
</html>

Namun, jika string berisi nilai numerik, hasilnya berupa angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Angka yang dibagi dengan string numerik menjadi angka</p>

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

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

</body>
</html>

Anda dapat menggunakan fungsi JavaScript global isNaN () untuk mengetahui apakah suatu nilai adalah angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Anda dapat menggunakan fungsi JavaScript global isNaN () untuk mengetahui apakah suatu nilai adalah angka.</p>

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

<script>
var x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>

</body>
</html>

Hati-hati dengan penggunaan NaN. Jika Anda menggunakan NaN dalam operasi matematika, hasilnya juga akan menjadi NaN.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Jika Anda menggunakan NaN dalam operasi matematika, hasilnya juga akan menjadi NaN.</p>

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

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

</body>
</html>

Atau hasilnya mungkin berupa rangkaian.

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>
  
<p> Jika Anda menggunakan NaN dalam operasi matematika, hasilnya bisa berupa rangkaian: </p>
<p id="demo"></p>

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

</body>
</html>

NaN adalah angka: typeof NaN mengembalikan nilai angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>The typeof NaN adalah angka.</p>

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

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

</body>
</html>


Infinity

Infinity (atau -Infinity) adalah nilai yang akan dikembalikan JavaScript jika kita menghitung angka di luar kemungkinan terbesar.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p> Infinity dikembalikan jika Anda menghitung angka di luar kemungkinan terbesar: </p>
<p id="demo"></p>

<script>
var myNumber = 2; 
var txt = "";
while (myNumber != Infinity) {
   myNumber = myNumber * myNumber;
   txt = txt + myNumber + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>


Pembagian oleh 0 (nol) juga menghasilkan Infinity.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Pembagian oleh 0 (nol) juga menghasilkan Infinity.</p>

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

<script>
var x = 2/0;
var y = -2/0;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


Infinity adalah angka: typeof Infinity mengembalikan angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Infinity adalah angka</p>

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

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

</body>
</html>


Hexadecimal

JavaScript mengartikan konstanta numerik sebagai heksadesimal jika didahului oleh 0x.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p> Konstanta numerik yang diawali dengan 0x, diinterpretasikan sebagai heksadesimal: </p>
<p id="demo"></p>

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

</body>
</html>


Jangan pernah menulis angka dengan nol di depannya (seperti 07).
Beberapa versi JavaScript mengartikan angka sebagai oktal jika ditulis dengan nol di depan.

Secara default, JavaScript menampilkan angka sebagai basis 10 desimal.

Tapi Anda bisa menggunakan metode toString () untuk mengeluarkan angka dari basis 2 ke basis 36.

Heksadesimal adalah basis 16. Desimal adalah basis 10. Oktal adalah basis 8. Biner adalah basis 2.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p> Metode toString () dapat mengeluarkan angka dari basis 2 hingga 36: </p>
<p id="demo"></p>

<script>
var myNumber = 32;
document.getElementById("demo").innerHTML =
"32 = " + "<br>" + 
" Decimal " + myNumber.toString(10) + "<br>" +
" Hexadecimal " + myNumber.toString(16) + "<br>" +
" Octal " + myNumber.toString(8) + "<br>" +
" Binary " + myNumber.toString(2);
</script>

</body>
</html>

Angka Bisa Menjadi Objek

Biasanya angka pada JavaScript adalah nilai primitif yang dibuat dari nilai literal.

var x = 123;

Tetapi angka juga dapat didefinisikan sebagai objek dengan keyword new.

var y = Nomor baru (123);

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p> Angka bisa menjadi objek, tetapi membuat angka sebagai objek tidak diperlukan. </p>
<p id="demo"></p>

<script>
var x = 123;
var y = new Number(123);
document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;
</script>

</body>
</html>

Jangan membuat Angka sebagai objek. Hali ini akan memperlambat kecepatan eksekusi.
Keyword new akan memperumit kode dan dapat menghasilkan beberapa hasil yang tidak diharapkan.

Saat menggunakan operator ==, angka yang sama adalah sama:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Jangan pernah membuat angka sebagai objek.</p>
<p>Angka dan objek tidak dapat dibandingkan dengan aman.</p>

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

<script>
var x = 500;        // x is a number
var y = new Number(500);  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Saat menggunakan operator ===, angka yang sama tidak sama, karena operator === mengharapkan persamaan dalam tipe dan nilai.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Jangan pernah membuat angka sebagai objek.</p>
<p>Angka dan objek tidak dapat dibandingkan dengan aman.</p>

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

<script>
var x = 500;        // x is a number
var y = new Number(500);  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Atau bahkan lebih parah. Objek tidak dapat dibandingkan:

<!DOCTYPE html>
<html>
<body>

<h2>Angka Javascript</h2>

<p>Jangan pernah membuat angka sebagai objek.</p>
<p>Angka dan objek tidak dapat dibandingkan dengan aman.</p>
<p id="demo"></p>

<script>
var x = new Number(500);  // x is an object
var y = new Number(500);  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Perhatikan perbedaan antara (x == y) dan (x === y).
Membandingkan dua objek JavaScript akan selalu menghasilkan nilai yang salah.

You may also like