JavaScript Number: Pengertian, Fungsi, dan Contoh Lengkap

by

Pernah bingung kenapa hasil 0.1 + 0.2 di JavaScript tidak sama dengan 0.3? Hal ini sering membuat developer pemula kebingungan. Jawabannya ada pada cara kerja tipe data Number.

Dalam JavaScript, pengolahan angka adalah hal yang sangat penting, mulai dari perhitungan sederhana hingga fitur kompleks seperti analisis data, grafik, atau sistem keuangan. Karena itu, memahami tipe data Number adalah fondasi yang wajib dikuasai.

Apa Itu JavaScript Number?

Number adalah tipe data primitif di JavaScript yang digunakan untuk menyimpan nilai numerik. Menariknya, JavaScript tidak membedakan antara bilangan bulat (integer) dan desimal (float). Semua angka disimpan dalam format 64-bit floating-point (standar IEEE 754).

  • Bilangan bulat: 10, -5, 0
  • Bilangan desimal: 3.14, -0.5

Pendekatan ini membuat JavaScript fleksibel, tetapi juga menimbulkan beberapa keterbatasan dalam presisi angka.

Fungsi dan Kegunaan Number

Tipe data Number digunakan untuk berbagai keperluan penting dalam pengembangan web, seperti:

  • Melakukan operasi matematika (tambah, kurang, kali, bagi)
  • Membandingkan nilai dalam logika program
  • Mengolah data numerik (misalnya statistik atau grafik)
  • Mengonversi string menjadi angka

Contohnya, saat membuat aplikasi e-commerce, Number digunakan untuk menghitung total harga, diskon, dan pajak.

Operasi Dasar pada Number

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0
console.log(a ** 2); // 100

Operator seperti +, -, *, /, dan % adalah dasar dari semua perhitungan di JavaScript.

Nilai Khusus pada Number

Selain angka biasa, JavaScript memiliki beberapa nilai spesial:

  • Infinity → hasil pembagian dengan 0
  • -Infinity → nilai negatif tak terbatas
  • NaN → hasil operasi yang tidak valid
console.log(10 / 0);     // Infinity
console.log("abc" / 2);  // NaN

Method Penting pada Number

  • Number() → konversi ke number
  • parseInt() → string ke integer
  • parseFloat() → string ke desimal
  • toFixed() → membatasi angka di belakang koma
  • isNaN() → mengecek apakah bukan angka
let x = 10.567;
console.log(x.toFixed(2)); // 10.57

Contoh Penggunaan Number di JavaScript

Berikut beberapa contoh penggunaan Number dalam kehidupan nyata yang sering digunakan dalam pengembangan aplikasi:

1. Menghitung Total Belanja

menghitung total harga berdasarkan harga barang dan jumlah yang dibeli.

logika dasar:

let harga = 50000;
let jumlah = 3;

let total = harga * jumlah;
console.log(total); // 150000

Penjelasan:

  • let harga = 50000 → menyimpan harga satu barang.
  • let jumlah = 3 → menyimpan jumlah barang yang dibeli.
  • let total = harga * jumlah → menghitung total harga dengan perkalian.
  • console.log(total) → menampilkan hasil perhitungan ke console.

Kesimpulan Singkat:

  • Variabel digunakan untuk menyimpan data (harga dan jumlah).
  • Operator * digunakan untuk perkalian.
  • Total belanja didapat dari harga × jumlah.

Contoh Lengkap HTML + JavaScript:

function hitungTotal() {
	// ambil nilai dari input id "harga, jumlah" lalu mengubahnya menjadi angka
	let harga = Number(document.getElementById("harga").value);
	let jumlah = Number(document.getElementById("jumlah").value);
	// hitung total dengan mengalikan harga dan jumlah
	let total = harga * jumlah;

	console.log("Total harga:", total);
	
	// menampilkan total ke elemen id "hasil"
	document.getElementById("hasil").innerText = total;	
}

2. Menghitung Diskon

menghitung harga setelah mendapatkan diskon.

logika dasar:

let harga = 100000;
let diskon = 20;

let potongan = harga * (diskon / 100);
let total = harga - potongan;

console.log(total); // 80000

Penjelasan:

  • let harga = 100000 → harga awal barang.
  • let diskon = 20 → besar diskon dalam persen (%).
  • diskon / 100 → mengubah persen menjadi desimal (20% = 0.2).
  • let potongan = harga * (diskon / 100) → menghitung jumlah potongan harga.
  • let total = harga - potongan → menghitung harga setelah diskon.
  • console.log(total) → menampilkan hasil akhir.

Kesimpulan Singkat:

  • Diskon dihitung dalam bentuk persen.
  • Persen harus diubah ke desimal sebelum dihitung.
  • Total akhir = harga awal - potongan.

Contoh Lengkap HTML + JavaScript:

function hitungDiskon() {
	// mengambil nilai "harga, diskon" dari input lalu mengubahnya menjadi angka
	let harga = Number(document.getElementById("harga").value); 
	let diskon = Number(document.getElementById("diskon").value);
	// hitung jumlah "potongan, total" berdasarkan persentase diskon
	let potongan = harga * (diskon / 100); 
	let total = harga - potongan; 

	console.log("Total bayar:", total);
	// menampilkan nilai ke elemen id "potongan, total"
	document.getElementById("potongan").innerText = potongan; 
	document.getElementById("total").innerText = total;
}

3. Konversi String ke Number

mengubah data bertipe string menjadi number agar bisa digunakan dalam operasi matematika.

logika dasar:

let input = "123";

let angka = Number(input);
console.log(angka + 10); // 133

Penjelasan:

  • let input = "123" → data awal berupa string (teks).
  • Number(input) → mengubah string menjadi number.
  • let angka = Number(input) → menyimpan hasil konversi ke variabel angka.
  • angka + 10 → melakukan operasi penjumlahan.
  • console.log(angka + 10) → menampilkan hasil yaitu 133.

Kesimpulan Singkat:

  • String tidak bisa langsung digunakan untuk operasi matematika.
  • Gunakan Number() untuk konversi ke number.
  • Setelah dikonversi, data bisa dihitung seperti angka biasa.

Contoh Lengkap HTML JavaScript:

function konversi() {
	let input = document.getElementById("input").value; // ambil nilai dari input (masih berupa string/teks)
	let angka = Number(input); // ubah nilai input dari string menjadi tipe data number (angka)

	console.log("Hasil + 10:", angka + 10);
	// menampilkan hasil penjumlahan (angka + 10) ke elemen id "hasil"
	document.getElementById("hasil").innerText = angka + 10; 
}

4. Membulatkan Angka Desimal

membulatkan angka desimal menjadi jumlah angka tertentu di belakang koma.

logika dasar:

let nilai = 3.14159;

console.log(nilai.toFixed(2)); // 3.14
console.log(typeof nilai.toFixed(2)); // string

Penjelasan:

  • let nilai = 3.14159 → angka desimal awal.
  • nilai.toFixed(2) → membulatkan angka menjadi 2 angka di belakang koma.
  • console.log(nilai.toFixed(2)) → menampilkan hasil pembulatan yaitu 3.14.
  • typeof nilai.toFixed(2) → mengecek tipe data hasilnya.
  • Hasilnya string → karena toFixed() mengembalikan teks, bukan number.

Kesimpulan Singkat:

  • toFixed() digunakan untuk membulatkan angka desimal.
  • Jumlah angka di dalam kurung menentukan jumlah angka di belakang koma.
  • Hasil dari toFixed() bertipe string.

Contoh Lengkap HTML + JavaScript:

function bulatkan() {
	// ambil nilai dari input lalu mengubahnya menjadi angka
	let nilai = Number(document.getElementById("nilai").value); 
	// membulatkan angka menjadi 2 angka di belakang koma (hasil berupa string)
	let hasil = nilai.toFixed(2); 

	console.log("Nilai awal:", nilai); // nilai asli sebelum dibulatkan
	console.log("Setelah dibulatkan:", hasil); // nilai setelah dibulatkan
	// menampilkan hasil pembulatan ke elemen id "hasil"
	document.getElementById("hasil").innerText = hasil; 
}

5. Mengecek NaN

mengecek apakah suatu nilai adalah NaN (Not a Number).

logika dasar:

let hasil = "abc" / 2;

console.log(hasil); // NaN
console.log(isNaN(hasil)); // true

Penjelasan:

  • "abc" / 2 → operasi matematika pada string yang tidak bisa dikonversi menjadi angka.
  • hasil = NaN → hasilnya adalah NaN (Not a Number).
  • console.log(hasil) → menampilkan NaN.
  • isNaN(hasil) → mengecek apakah nilai tersebut NaN.
  • Hasilnya true → karena memang bukan angka.

Kesimpulan Singkat:

  • NaN berarti “bukan angka”.
  • Terjadi saat operasi matematika tidak valid.
  • isNaN() digunakan untuk mengecek apakah suatu nilai adalah NaN.

Contoh Lengkap HTML JavaScript:

function cek() {
	// ambil nilai dari input (berupa string/teks), lalu ubah nilai input menjadi tipe number
	let input = document.getElementById("input").value; 
	let angka = Number(input);
	// cek apakah hasil konversi bukan angka (NaN)
	console.log("isNaN:", isNaN(angka)); 

	if (isNaN(angka)) { // jika NaN (bukan angka)
	document.getElementById("hasil").innerText = "Bukan angka ✖"; // input tidak valid
	} else { // jika hasilnya angka valid
	document.getElementById("hasil").innerText = "Angka valid ✔"; // input adalah angka
	}
}

6. Menghindari Masalah Presisi

untuk menghindari kesalahan perhitungan desimal (floating point) pada JavaScript.

logika dasar:

let hasil = (0.1 * 10 + 0.2 * 10) / 10;

console.log(hasil); // 0.3

Penjelasan:

  • 0.1 dan 0.2 → angka desimal yang sering menimbulkan masalah presisi di JavaScript.
  • 0.1 * 10 dan 0.2 * 10 → mengubah ke bilangan bulat sementara (1 dan 2).
  • (... + ...) → menjumlahkan hasilnya (1 + 2 = 3).
  • / 10 → mengembalikan ke bentuk desimal (3 / 10 = 0.3).
  • console.log(hasil) → menampilkan hasil yang akurat yaitu 0.3.

Kesimpulan Singkat:

  • JavaScript memiliki keterbatasan dalam presisi angka desimal.
  • Perkalian sementara dapat membantu menghindari error.
  • Gunakan teknik ini untuk hasil perhitungan yang lebih akurat.

Contoh Lengkap HTML + JavaScript:

function hitung() {
	let biasa = 0.1 + 0.2; // penjumlahan desimal langsung (hasilnya bisa tidak tepat, misalnya 0.30000000000000004)
	let benar = (0.1 * 10 + 0.2 * 10) / 10; // cara mengatasi dengan mengubah ke bilangan bulat dulu lalu dikembalikan ke desimal

	console.log("Biasa:", biasa); // hasil penjumlahan biasa
	console.log("Diperbaiki:", benar); // hasil yang sudah diperbaiki
	// menampilkan hasil "biasa, benar" ke elemen id
	document.getElementById("biasa").innerText = biasa; 
	document.getElementById("benar").innerText = benar;
}

7. Menghitung Rata-rata

Contoh ini digunakan untuk menghitung nilai rata-rata dari beberapa data.

logika dasar:

let nilai1 = 80;
let nilai2 = 90;
let nilai3 = 70;

let rataRata = (nilai1 + nilai2 + nilai3) / 3;

console.log(rataRata); // 80

Penjelasan:

  • nilai1, nilai2, nilai3 → menyimpan nilai yang akan dihitung.
  • (nilai1 + nilai2 + nilai3) → menjumlahkan semua nilai.
  • / 3 → membagi dengan jumlah data.
  • rataRata → menyimpan hasil perhitungan rata-rata.
  • console.log(rataRata) → menampilkan hasil yaitu 80.

Kesimpulan Singkat:

  • Rata-rata = jumlah semua nilai ÷ banyak data.
  • Operator + untuk penjumlahan.
  • Operator / untuk pembagian.

Contoh Lengkap HTML JavaScript:

function hitung() {
	// ambil nilai pertama, kedua, ketiga dari input lalu mengubahnya menjadi angka
	let n1 = Number(document.getElementById("nilai1").value); 
	let n2 = Number(document.getElementById("nilai2").value); 
	let n3 = Number(document.getElementById("nilai3").value);

	let rataRata = (n1 + n2 + n3) / 3; // menghitung rata-rata dari tiga nilai

	console.log("Rata-rata:", rataRata); // hasil rata-rata
	// menampilkan hasil rata-rata ke elemen id "hasil"
	document.getElementById("hasil").innerText = rataRata; 
}

Masalah Presisi pada Number

Salah satu hal penting yang sering mengejutkan developer adalah masalah presisi: 

console.log(0.1 + 0.2); // 0.30000000000000004

Penjelasan:

  • 0.1 + 0.2 → secara matematis seharusnya hasilnya 0.3.
  • JavaScript menggunakan floating point (IEEE 754) → angka desimal disimpan dalam bentuk biner.
  • Tidak semua angka desimal bisa direpresentasikan dengan tepat → menyebabkan error kecil.
  • Hasilnya 0.30000000000000004 → ini adalah efek dari keterbatasan presisi.

Solusi Umum:

  • Menggunakan pembulatan: (0.1 + 0.2).toFixed(2)
  • Mengalikan lalu membagi (seperti contoh sebelumnya)

Kesimpulan Singkat:

  • Masalah presisi adalah hal normal di JavaScript.
  • Terjadi karena representasi biner pada angka desimal.
  • Gunakan teknik tertentu untuk mendapatkan hasil yang lebih akurat.

Ini terjadi karena JavaScript menggunakan sistem floating-point. Masalah ini sangat penting diperhatikan, terutama dalam aplikasi keuangan.

Cara Mengatasinya

  • Gunakan toFixed() untuk pembulatan
  • Kalikan angka terlebih dahulu (misalnya ke 100)
  • Gunakan library khusus jika butuh presisi tinggi

Kesalahan Umum yang Harus Dihindari

  • Menganggap semua perhitungan selalu presisi
  • Tidak memahami perbedaan NaN dan angka biasa
  • Lupa mengonversi input user (string ke number)

Tips Menggunakan Number

  • Gunakan Number untuk perhitungan dasar
  • Selalu validasi input user
  • Hati-hati dengan pembagian nol
  • Gunakan pembulatan jika diperlukan

Ringkasan

  • Number adalah tipe data untuk angka di JavaScript
  • Semua angka menggunakan floating-point
  • Ada nilai khusus seperti Infinity dan NaN
  • Perlu hati-hati dengan masalah presisi

Kesimpulan

Tipe data Number adalah salah satu komponen paling penting dalam JavaScript. Dengan memahami cara kerja, kelebihan, dan keterbatasannya, kamu bisa menghindari bug dan membuat aplikasi yang lebih akurat serta profesional.

Artikel Terkait: Sejarah JavaScript & Evolusinya Menuju Web Modern

Pertanyaan yang Sering Diajukan (FAQ)

Apa itu Number dalam JavaScript?

Number adalah tipe data untuk menyimpan angka, baik bulat maupun desimal.

Kenapa hasil 0.1 + 0.2 tidak 0.3?

Karena JavaScript menggunakan floating-point yang memiliki keterbatasan presisi.

Apa itu NaN?

NaN adalah nilai ketika operasi matematika tidak valid.

Leave a Comment

Responsive — 100%