Cara menggunakan NUMBERR pada JavaScript

Number merupakan salah satu tipe data JavaScript yang perlu kita pahami secara mendalam, tipe data ini akan sering kita gunakan saat membuat aplikasi.

Misalnya, jika membuat aplikasi toko online, harga produk tentu perlu kita simpan atau perlakukan sebagai angka.

Tapi, tipe data angka di JavaScript memiliki perilaku dan beberapa keterbatas, ini semua perlu diketahui agar kita bisa menghindari perilaku tak terduga.

Jangan khawatir, Anda tidak perlu menjadi ahli matematika.

Berikut topik yang akan kita bahas seputar tipe data angka:

  1. Apa Itu Number?
  2. Cara Membuat Data Number
    1. Number Literal
    2. Number()
    3. new Number()
  3. Nilai Khusus: Infinity, -Infinity, dan NaN
  4. Batas Aman Bilangan Bulat
  5. Nilai Numerik yang Dapat Direpresentasikan
  6. Operasi Matematika Bilangan Pecahan Tidak Selalu Akurat
  7. Perilaku Penjumlahan Angka dengan String
  8. Perilaku Operasi Matematika Angka dengan Angka di Dalam String

Apa Itu Number?

Number adalah tipe data primitif yang merepresentasikan data numerik atau angka entah itu positif maupun negatif.

Tipe data angka di JavaScript adalah format biner 64-bit double-precision, mengikuti standar internasional IEEE 754, sama seperti double di Java atau C#.

Itu artinya angka di JavaScript dapat mewakili nilai pecahan dan selalu disimpan sebagai floating point double-precission, namun dengan beberapa batasan.

Tidak seperti bahasa pemrograman yang lain termasuk Java dan C#, tipe data number di banyak bahasa pemrograman lain biasanya memiliki beberapa jenis, diantaranya integer, short, long, floating-point dan sebagainya.

Tapi di JavaScript, tipe data angka disimpan sebagai floating point tepatnya double.

Ini akan kita bahas di bawah.

Cara Membuat Data Number

Sama seperti string, kita bisa membuat data angka menggunakan sintaks literal, fungsi constructor Number(), maupun objek Number.

Angka yang dibuat dengan objek Number (new Number()) akan mengembalikan nilai objek atau non-primitf, sementara yang lainnya menghasilkan nilai primitif.

Tapi, method dan properti yang ada di dalam objek Number bisa digunakan pada angka primitif, mirip seperti string.

Oleh karena itu, jangan heran jika kita tiba-tiba bisa mengakses method atau properti tertentu pada angka primitif.

Misalnya, toFixed() untuk membulatkan pecahan, contoh (2.6).toFixed(). Method tersebut ada di dalam objek Number.

Anda disarankan membuat angka menggunakan sintaks literal.

Number Literal

Untuk membuat angka menggunakan sintaks literal, kita bisa menulisnya secara langsung, mirip seperti string, tapi tanpa tanda kutip.

Contoh:

const a = 19;

console.log(a); // 19
console.log(typeof a); // number
console.log(a instanceof Number); // false

Number()

Angka bisa dibuat menggunakan fungsi Number(), metode ini menghasilkan nilai yang sama seperti sintaks literal, biasanya digunakan untuk mengkonversi angka di dalam string.

Caranya, cukup masukkan angka atau angka string yang ingin dikonversi ke dalam kurung lengkung.

Contoh:

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Ini sama persis seperti angka yang dibuat dengan sintaks literal:

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Kapan menggunakan fungsi Number()? ketika kita ingin mengkonversi angka di dalam string, contoh:

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

new Number()

Jangan gunakan metode ini karena dapat menghasilkan perilaku tak terduga dan memperlambat eksekusi kode.

Membuat data angka menggunakan metode ini menghasilkan nilai non-primitif atau objek.

Contoh:

const a = new Number(1);

console.log(a); // Number {1}
console.log(typeof a); // object
console.log(a instanceof Number); // true

Oleh karena itu, membandingkan angka yang dibuat menggunakan sintaks literal atau fungsi Number() dengan new Number() tidak dianggap sama meskipun nilainya sama.

const a = 19;
const b = new Number(19);

console.log(a === b); // false

Nilai Khusus: Infinity, -Infinity, dan NaN

Selain angka (0123456789), di JavaScript, angka memiliki tiga nilai khusus.

Saat membuat aplikasi, ketiga nilai ini sangat jarang atau bahkan tidak pernah diinisialisasi ke variabel secara eksplisit

Tapi ketahuilah, nilai-nilai itu ada di JavaScript.

Infinity adalah nilai numerik yang mewakili nilai positif tak terhingga, nilai ini biasanya muncul ketika bilangan positif selain 0 dibagi 0.

Contoh:

1 / 0; // Infinity

typeof Infinity; // number

Sedangkan -Infinity mewakili nilai negatif tak terhingga, nilai ini biasanya muncul ketika bilangan negatif selain 0 dibagi 0.

Contoh:

-1 / 0; // -Infinity

typeof -Infinity; // number

Bagaimana dengan NaN (Not-A-Number)?

NaN mewakili nilai yang tidak dapat direpresentasikan, misalnya mengalikan angka dengan string atau melakukan operasi matematika dengan nilai NaN itu sendiri.

Contoh:

'hello' * 1; // NaN
NaN / 2; // NaN

typeof NaN; // number

Kalau dipikir-pikir tidak masuk akal melakukan operasi matematika ke data teks, oleh karena itu JavaScript mengembalikan nilai yang tidak dapat direpresentasikan (NaN).

Batas Aman Bilangan Bulat

Seperti yang sudah kita bahas sebelumnya, tipe data angka di JavaScript sebetulnya disimpan sebagai floating point double-precission.

Oleh karena itu memiliki beberapa keterbatasan seperti halnya bahasa pemrograman lain yang memiliki tipe data angka floating point double.

JavaScript hanya mampu mewakiliki bilangan bulat dengan aman antara -(2^53 - 1) hingga 2^53 - 1.

  • Minimum: -(2^53 - 1) adalah -9007199254740991.
  • Maksimum: 2^53 - 1 adalah 9007199254740991.

Aman di sini mengacu pada kemampuan JavaScript mewakiliki bilangan bulat dengan tepat dan akurat.

Di luar rentang tersebut, JavaScript dapat menafsirkan bilangan bulat secara salah.

Untuk mengetahui batas aman minimum dan maksimum, kita bisa menggunakan properti statis MIN_SAFE_INTEGER dan MAX_SAFE_INTEGER dari objek Number:

Number.MIN_SAFE_INTEGER; // -9007199254740991 === -(2 ** 53 - 1)
Number.MAX_SAFE_INTEGER; // 9007199254740991 === 2 ** 53 - 1

Setelah mengetahui batasnya, mari kita buktikan:

9007199254740991 + 1; // 9007199254740992 :: BENAR
9007199254740991 + 2; // 9007199254740992 :: SALAH :: harusnya: 9007199254740993
9007199254740991 + 3; // 9007199254740994 :: BENAR
9007199254740991 + 4; // 9007199254740996 :: SALAH :: harusnya: 9007199254740995
9007199254740991 + 5; // 9007199254740996 :: BENAR
9007199254740991 + 6; // 9007199254740996 :: SALAH :: harusnya: 9007199254740997

Perhatikan kode di atas, kita melakukan operasi matematika yang menghasilkan nilai melebihi batas aman nilai maksimum.

Oleh karena itu, terkadang menghasilkan nilai benar terkadang salah.

Perilaku ini juga berlaku jika kita melakukan operasi matematika yang menghasilkan nilai lebih kecil dari batas aman nilai minimum.

Jangankan nilai hasil operasi matematika, ditulis langsung saja mengembalikan nilai yang salah:

console.log(9007199254740993); // 9007199254740992

Jika Anda memerlukan angka diluar rentang Number.MIN_SAFE_INTEGER dan Number.MAX_SAFE_INTEGER, gunakan BigInt sebagai alternatinya.

Nilai Numerik yang Dapat Direpresentasikan

JavaScript juga memiliki batas nilai maksimum yang dapat direpresentasikan, kita bisa memeriksanya menggunkaan properti statis MAX_VALUE pada objek Number.

Nilai yang lebih besar dari MAX_VALUE direpresentasikan sebagai Infinity.

Number.MAX_VALUE; // 1.7976931348623157e+308

Sedangkan angka positif terkecil yang dapat direpresentasikan, bisa dicek menggunkaan properti statis MIN_VALUE pada objek Number.

Number.MIN_VALUE; // 5e-324

5e-324 adalah angka positif terkecil (bukan angka paling negatif) yang dapat direpresentasikan dalam float presisi, dengan kata lain angka yang paling mendekati 0.

Operasi Matematika Bilangan Pecahan Tidak Selalu Akurat

Saat melakukan operasi matematika pada bilangan pecahan, JavaScript tidak selalu mengembalikan nilai yang akurat.

0.2 + 0.1; // 0.30000000000000004 :: harusnya: 0.3

Untuk mengatasi masalah ini biasanya kedua operan dikalikan dengan 10 kemudian dijumlahkan, hasilnya dibagi 10.

(0.2 * 10 + 0.1 * 10) / 10; // 0.3

Akurasi dan jumlah maksimum pecahan (angka setelah titik) yang dikembalikan sekitar 17, lebih dari itu tidak dikembalikan.

Perilaku Penjumlahan Angka dengan String

Seperti yang telah kita pelajari, operator + dapat digunakan untuk menjumlahkan angka dan menggabungkan string.

Menjumlahkan angka dengan angka hasilnya akan menjadi angka, ini dianggap sebagai penjumlahan:

5 + 4; // 9

Menjumlahkan string dengan string hasilnya akan menjadi string, ini dianggap sebagai penggabungan string:

'5' + '4'; // '54'

Menjumlahkan angka dengan angka di dalam string hasilnya menjadi string, ini dianggap sebagai penggabungan string, begitu pula sebaliknya (angka di dalam string dengan angka):

5 + '4'; // '54'
'5' + 4; // '54'

Bagaimana dengan ini:

'result: ' + 5 + 4; // 'result: 54'

Nilai yang dikembalikan adalah string 'result: 54' bukan 'result: 9'. Ini karena interpreter JavaScript bekerja dari kiri ke kanan.

Pertama, 'result: ' + 5 (string dengan angka) hasilnya string 'result: 5' ini dianggap penggabungan string.

Kemudian 'result: 5' + 4 (string dengan angka), sama dengan sebelumnya dianggap penggabungan string.

Oleh karena itu hasilnya string 'result: 54'.

Tapi, bagaimana dengan yang ini:

5 + 4 + '9'; // '99'

Hasilnya string '99' bukan string '549'. Sekali lagi, ini karena interpreter bekerja dari kiri ke kanan.

Pertama, 5 + 4 penjumlahan angka, hasilnya angka 9. Kemudian, 9 + '9' angka ditambah string dianggap penggabungan string, maka hasilnya string '99'.

Jadi, selama angka dijumlahkan dengan string, JavaScript akan menafsirkan panggabungan string sehingga mengembalikan nilai string.

Perilaku ini hanya berlaku untuk operator +.

Perilaku Operasi Matematika, Angka dengan Angka di Dalam String

Berbeda dengan operator aritmatika penjumlahan (+).

Jika kita melakukan operasi matematika menggunakan operator perkalian, pengurangan, pembagian, modulus, atau eksponensial (pangkat), angka di dalam string akan dianggap sebagai angka.

5 * '4'; // 20
'5' - '4'; // 9
'5' / 4; // 1.25
'5' % '4'; // 1
5 ** '4'; // 625

Perilaku ini hanya terjadi jika salah satu operan adalah angka di dalam string. Jika berupa karakter, mengembalikan nilai NaN.

5 * 'a'; // NaN
'a' - '4'; // NaN
'a' / 4; // NaN
5 % 'a'; // NaN

Apa itu toFixed?

Method toFixed digunakan untuk membuat tampilan angka dengan jumlah desimal yang tetap. Method ini membutuhkan satu parameter opsional yang jika diinput akan menentukan jumlah digit setelah tanda desimal.

Apa itu tipe data JavaScript?

Tipe data adalah jenis-jenis data yang bisa kita simpan di dalam variabel. Ada beberapa tipe data dalam pemrograman Javascript: String (teks) Integer atau Number (bilangan bulat)