Dalam JavaScript, tipe data Number adalah salah satu konsep paling fundamental yang harus dipahami sejak awal, karena hampir semua program — mulai dari kalkulasi harga, perhitungan diskon, logika kondisi, hingga manipulasi data backend — pasti berhubungan dengan angka. Pada bagian pertama ini, kita akan membahas seluruh dasar Number JavaScript secara jelas, santai, dan mudah dipahami untuk pemula.
Daftar isi
Baca juga: Tutorial String JavaScript Lengkap
Pengertian Number JavaScript
Number JavaScript adalah tipe data yang digunakan untuk merepresentasikan angka, baik itu bilangan bulat (integer) maupun bilangan desimal (float). Tidak seperti bahasa pemrograman lain yang membedakan tipe integer dan float, JavaScript hanya memiliki satu tipe angka: number.
Contohnya:
let umur = 25; // integer
let harga = 19.99; // floatCode language: JavaScript (javascript)Keduanya tetap dianggap sebagai Number.
Kenapa Number Penting dalam Pemrograman?
Mengapa harus belajar Number dari awal?
Karena hampir semua logika program terkait:
- Menghitung jumlah barang
- Mengatur skor permainan
- Menentukan diskon harga
- Perhitungan timer / waktu
- Validasi usia
- Pengolahan statistik
Jika salah memahami cara kerja Number, hasil perhitungan bisa jadi kacau.
Contohnya:
console.log(0.1 + 0.2);Code language: CSS (css)Output:
0.30000000000000004Code language: CSS (css)Jadi, penting untuk memahami bagaimana JavaScript menangani angka.
Cara Menggunakan Number JavaScript
Cara menggunakan Number sangat sederhana. Kamu bisa menyimpannya dalam variabel menggunakan let, const, atau var.
let a = 10;
let b = 2.5;
let total = a + b;
console.log(total);Code language: JavaScript (javascript)Output:
12.5Code language: CSS (css)Kita bisa melakukan operasi matematika seperti penjumlahan, pengurangan, perkalian, pembagian, dan modulus.
Tipe Number di JavaScript
JavaScript memiliki beberapa bentuk nilai Number:
Integer (bilangan bulat)
let angka = 100;Code language: JavaScript (javascript)Float (bilangan desimal)
let harga = 19.99;Code language: JavaScript (javascript)NaN (Not a Number)
Digunakan ketika JavaScript gagal mengonversi nilai menjadi angka.
let x = Number("halo");
console.log(x); // NaNCode language: JavaScript (javascript)Infinity
Nilai ketika angka melebihi batas maksimum Number JS.
console.log(5 / 0); // InfinityCode language: JavaScript (javascript)-Infinity
Kebalikannya Infinity:
console.log(-5 / 0); // -InfinityCode language: JavaScript (javascript)Sifat Unik Number di JavaScript — Floating Point
JavaScript menggunakan standar IEEE 754 untuk menyimpan angka dalam bentuk floating point.
Ini menyebabkan hasil perhitungan desimal menjadi tidak akurat:
console.log(0.1 + 0.2);Code language: CSS (css)Output:
0.30000000000000004Code language: CSS (css)Cara mengatasinya (nanti dibahas lebih detail):
let hasil = (0.1 + 0.2).toFixed(2);
console.log(hasil); // "0.30"Code language: JavaScript (javascript)Cara Cek Tipe Data Number JavaScript
Untuk memeriksa apakah sebuah variabel bertipe Number, kita menggunakan typeof.
let angka = 123;
console.log(typeof angka); // "number"Code language: JavaScript (javascript)Output:
"number"Code language: JSON / JSON with Comments (json)Namun untuk mengecek apakah suatu nilai valid (bukan NaN), kita bisa pakai:
Number.isNaN()
Number.isFinite()Code language: JavaScript (javascript)Contoh:
console.log(Number.isNaN(123)); // false
console.log(Number.isNaN(NaN)); // trueCode language: JavaScript (javascript)Contoh Penggunaan Dasar Number JavaScript
Berikut contoh kecil penggunaan Number dalam program sederhana:
let harga = 15000;
let jumlah = 3;
let total = harga * jumlah;
console.log("Total bayar:", total);Code language: JavaScript (javascript)Output:
"Total bayar: 45000"Code language: JSON / JSON with Comments (json)Contoh lain dengan kalkulasi:
let diskon = 0.1; // 10%
let hargaAwal = 20000;
let hargaAkhir = hargaAwal - (hargaAwal * diskon);
console.log(hargaAkhir);Code language: JavaScript (javascript)Output:
18000Konversi Data (Convert Number JavaScript)
Konversi data adalah bagian yang sangat penting dalam JavaScript karena hampir semua aplikasi membutuhkan proses mengubah nilai dari satu tipe ke tipe lainnya terutama string → number dan number → string. Pada bagian ini, kita akan belajar seluruh teknik konversi data yang paling sering digunakan, lengkap dengan contoh dan penjelasan mendalam.
1. Konversi String ke Number JavaScript
Kenapa perlu mengonversi string ke number?
Karena data dari:
- input form HTML
- API / database
- hasil pembacaan file
- value dari DOM
…biasanya berbentuk string, bukan angka.
Contoh masalah umum:
let a = "10";
let b = "5";
console.log(a + b);Code language: JavaScript (javascript)Output:
105 // bukan penjumlahan, tapi penggabungan string!Code language: JSON / JSON with Comments (json)Untuk mendapatkan hasil numerik, kita harus mengonversinya menjadi number.
2. parseInt() JavaScript
parseInt() digunakan untuk mengubah string menjadi bilangan bulat (integer).
Cara kerja:
- Mengambil angka dari awal string
- Mengabaikan karakter setelahnya
- Mengembalikan integer
Contoh dasar:
let angka = parseInt("42");
console.log(angka); // 42Code language: JavaScript (javascript)Contoh dengan teks:
console.log(parseInt("42px")); // 42Code language: JavaScript (javascript)Contoh gagal:
console.log(parseInt("abc42")); // NaN (karena tidak ada angka di awal)Code language: JavaScript (javascript)3. parseFloat() JavaScript
Digunakan untuk mengubah string menjadi bilangan desimal (float).
Contoh:
let x = parseFloat("3.14");
console.log(x); // 3.14Code language: JavaScript (javascript)Contoh dengan teks:
console.log(parseFloat("3.14em")); // 3.14Code language: JavaScript (javascript)Contoh gagal:
console.log(parseFloat("abc3.14")); // NaN (karena tidak ada angka di awal)Code language: JavaScript (javascript)4. Number() vs parseInt() vs parseFloat()
Ketiganya sering digunakan, tetapi memiliki perbedaan penting.
| Fungsi | Hasil | Cocok untuk |
|---|---|---|
| Number() | Konversi langsung → validasi ketat | nilai harus angka murni |
| parseInt() | Mengambil integer dari awal string | angka yang bercampur teks |
| parseFloat() | Mengambil float dari awal string | nilai desimal bercampur teks |
Contoh perbandingan:
Number("42"); // 42
Number("42px"); // NaN
parseInt("42px"); // 42
parseFloat("42.5em");// 42.5Code language: JavaScript (javascript)Kapan pakai apa?
| Situasi | Gunakan |
|---|---|
| Ingin angka pasti dan ketat | Number() |
| Mengambil angka depan saja | parseInt() |
| Angka desimal bercampur teks | parseFloat() |
5. Konversi Angka ke String — number.toString()
Kadang kita perlu mengubah angka menjadi string.
Misalnya saat:
- menampilkan ke UI
- membuat format teks
- menyimpan ke database
- menggabungkan dengan string lain
Contoh penggunaan:
let angka = 123;
let teks = angka.toString();
console.log(teks); // "123"
console.log(typeof teks);// "string"Code language: JavaScript (javascript)Bisa juga menggunakan String():
let hasil = String(99);
console.log(hasil); // "99"Code language: JavaScript (javascript)6. Number.parseInt() dan Number.parseFloat()
Ini adalah versi modern dari parseInt() dan parseFloat().
Bentuk ES6:
Number.parseInt()
Number.parseFloat()Code language: JavaScript (javascript)Contoh:
console.log(Number.parseInt("50px")); // 50
console.log(Number.parseFloat("7.25kg"));// 7.25Code language: JavaScript (javascript)Bedanya?
- Tidak ada perbedaan fungsi
- Hanya perbedaan penempatan namespace
- Disarankan pada project modern (lebih eksplisit)
7. Menangani NaN & isNaN() JavaScript
NaN (Not a Number) muncul ketika konversi gagal.
Contoh:
let x = Number("halo");
console.log(x); // NaNCode language: JavaScript (javascript)Mengecek NaN yang benar:
Gunakan:
Number.isNaN()Code language: JavaScript (javascript)Contoh:
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("abc")); // falseCode language: JavaScript (javascript)Perbedaan penting:
isNaN() biasa kurang akurat.
console.log(isNaN("abc")); // true (padahal string)Code language: JavaScript (javascript)Karena itu, yang direkomendasikan:
Number.isNaN()Number.isFinite()
8. Panduan Lengkap Konversi Data JavaScript
Berikut rangkuman lengkap:
Konversi string → number
Number("100");
parseInt("100px");
parseFloat("3.14em");Code language: JavaScript (javascript)Konversi number → string
(123).toString();
String(123);Code language: JavaScript (javascript)Validasi angka
Number.isInteger()
Number.isNaN()
Number.isFinite()Code language: JavaScript (javascript)Contoh penggunaan praktis
Misalnya kita ingin mengambil input angka dari form:
let qty = document.getElementById("qty").value; // string
qty = Number(qty); // konversi wajib
let total = qty * 5000;
console.log(total);Code language: JavaScript (javascript)Jika tidak dikonversi, hasilnya bisa salah.
Contoh Kasus Konversi Data Lengkap
Misal kita memiliki data harga dalam bentuk string:
let harga = "15000";
let jumlah = "3";
let total = Number(harga) * Number(jumlah);
console.log("Total bayar:", total);Code language: JavaScript (javascript)Output:
Total bayar: 45000Atau mengambil angka dari teks campuran:
let ukuran = "42cm";
let angka = parseInt(ukuran);
console.log(angka); // 42Code language: JavaScript (javascript)Method Number JavaScript yang Sering Dipakai
Di bagian ini kita bahas method dan utilitas Number yang paling sering dipakai sehari-hari:
Number.isInteger(), Number.isNaN(), Number.isFinite(), toFixed(), dan toPrecision().
Setiap fungsi dijelaskan beserta contoh dan langkah-langkah praktis (step-by-step) agar mudah diikuti.
Semua contoh kode pakai indentasi 4 tab sesuai permintaan.
1. Number.isInteger(value) — cek apakah bilangan bulat
Mengembalikan true jika value bertipe number dan adalah integer (tidak ada fractional part).
Mengembalikan false untuk NaN, Infinity, non-number (mis. string), atau angka desimal.
Contoh & penjelasan:
console.log(Number.isInteger(10)); // true
console.log(Number.isInteger(10.0)); // true (10.0 adalah integer secara nilai)
console.log(Number.isInteger(10.5)); // false
console.log(Number.isInteger(NaN)); // false
console.log(Number.isInteger("10")); // false (bukan number)Code language: JavaScript (javascript)Kapan dipakai (step-by-step)
- Ambil input pengguna (mis. kuantitas barang).
- Konversi ke number: const qty = Number(input);
- Cek integer: if (!Number.isInteger(qty)) { error… }
- Proses hanya jika integer valid.
2. Number.isNaN(value) — pengecekan NaN yang benar
NaN= Not a Number (hasil operasi/konversi gagal).- Gunakan
Number.isNaN()untuk memeriksa nilai NaN secara andal. - Jangan pakai
isNaN()global jika ingin akurasi tipe (globalisNaNmelakukan coercion).
Perbedaan singkat
isNaN("abc")→ true (karena “abc” dipaksa jadi number yang menghasilkan NaN)Number.isNaN("abc")→ false (karena “abc” bukan number, jadi bukan NaN)
Contoh:
console.log(isNaN("abc")); // true (global isNaN memaksa konversi)
console.log(Number.isNaN("abc")); // false (bukan number)
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(123)); // falseCode language: JavaScript (javascript)Step-by-step untuk validasi konversi:
- Konversi string ke number: const n = Number(str);
- Cek Number.isNaN(n) → jika true → tampilkan error input tidak valid.
- Jika false → lanjut proses.
3. Number.isFinite(value) — cek finite number (bukan Infinity/NaN)
- Mengembalikan true jika value adalah number dan finite (bukan NaN, Infinity, atau -Infinity).
- Perhatikan:
Number.isFinite("15")→ false karena tipe bukan number.
Contoh:
console.log(Number.isFinite(100)); // true
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isFinite(NaN)); // false
console.log(Number.isFinite("100")); // false (tipe bukan number)Code language: JavaScript (javascript)Penggunaan praktis
Gunakan saat menerima hasil operasi numerik untuk memastikan hasil bermakna (mis. tidak membagi 0 menghasilkan Infinity).
4. toFixed(digits) — format angka desimal (jumlah digit di belakang koma)
- Method milik instance Number:
num.toFixed(2)→ mengembalikan string yang berisi angka dengan 2 desimal. - Berguna untuk menampilkan harga, persen, atau pembulatan tampilan.
Hal penting:
toFixed()melakukan pembulatan sesuai aturan matematika.
Hasilnya adalah string, bukan number — jika perlu perhitungan lagi, konversi kembali.
Contoh:
const a = 2.34567;
console.log(a.toFixed(2)); // "2.35"
console.log(a.toFixed(0)); // "2"Code language: JavaScript (javascript)Step-by-step format harga:
- Hitung total:
let total = price * qty; - Format untuk tampil:
const tampil = total.toFixed(2); - Tampilkan Rp
${tampil}(ingat tampil string).
Jika perlu number lagi:
const roundedString = (0.1 + 0.2).toFixed(2); // "0.30"
const roundedNumber = Number(roundedString); // 0.3Code language: JavaScript (javascript)5. toPrecision(n) — jumlah angka signifikan (significant digits)
Mengembalikan string yang menampilkan angka dengan n significant digits.
Berguna jika butuh presentasi berdasarkan presisi ilmiah/angka signifikan.
Contoh:
const x = 123.456;
console.log(x.toPrecision(2)); // "1.2e+2" (2 significant digits)
console.log(x.toPrecision(4)); // "123.5"Code language: JavaScript (javascript)Perbedaan toFixed vs toPrecision:
toFixed(2)→ tetap dua digit di belakang koma.toPrecision(2)→ dua digit significant secara keseluruhan, bisa menghasilkan notasi ilmiah.
6. Contoh Lengkap — Beberapa skenario step-by-step
Validasi input jumlah pembelian (harus integer & finite):
function validateQty(input) {
const qty = Number(input);
if (Number.isNaN(qty) || !Number.isFinite(qty)) {
return { valid: false, reason: "Bukan angka valid" };
}
if (!Number.isInteger(qty) || qty <= 0) {
return { valid: false, reason: "Harus bilangan bulat positif" };
}
return { valid: true, qty };
}
console.log(validateQty("3")); // { valid: true, qty: 3 }
console.log(validateQty("2.5")); // { valid: false, reason: "Harus bilangan bulat positif" }
console.log(validateQty("abc")); // { valid: false, reason: "Bukan angka valid" }Code language: JavaScript (javascript)Format harga & pastikan pembulatan aman:
function formatCurrency(value) {
if (Number.isNaN(Number(value))) return "Rp 0.00";
// pastikan finite
if (!Number.isFinite(Number(value))) return "Rp 0.00";
const num = Number(value);
// tampilkan 2 desimal, hasil toFixed string
return "Rp " + num.toFixed(2);
}
console.log(formatCurrency(15000)); // "Rp 15000.00"
console.log(formatCurrency(1234.567)); // "Rp 1234.57"Code language: JavaScript (javascript)7. Menangani floating point dan pembulatan manual
Floating point kadang bikin hasil seperti 0.30000000000000004.
const sum = 0.1 + 0.2;
console.log(sum); // 0.30000000000000004
console.log(Number(sum.toFixed(2))); // 0.3 (lebih aman untuk perhitungan)Code language: JavaScript (javascript)8. Tips & Trik Praktis
- Gunakan
Number.isNaN()untuk cek kegagalan konversi, bukanisNaN()global. - Gunakan
Number.isFinite()untuk pastikan hasil bukan Infinity. - Gunakan
Number.isInteger()bila membutuhkan integer (qty, jumlah item). - Ingat
toFixed()mengembalikan string → konversi jika perlu operasi matematika lagi. - Untuk presisi tampilan gunakan
toFixed()atautoPrecision()sesuai kebutuhan, bukan untuk logika perhitungan sensitif (use decimal libraries kalau perlu akurasi finansial tinggi).
Ringkasan singkat:
Number.isInteger(x)→ apakah x integer?Number.isNaN(x)→ apakah x NaN? (tepat)Number.isFinite(x)→ apakah x finite number?num.toFixed(d)→ format desimal (string) dengan d tempat desimalnum.toPrecision(n)→ n significant digits (string)
Pembulatan dan Operasi Math di JavaScript
Pada bagian ini kita fokus pada fungsi-fungsi Math yang paling sering digunakan ketika bekerja dengan number JavaScript, terutama untuk kasus seperti pembulatan angka, pengolahan desimal, hingga pembuatan angka acak untuk aplikasi sederhana.
1. Math.round(x) — Pembulatan Standar (Normal Rounding)
Math.round(x) akan membulatkan angka ke nilai integer terdekat:
- Desimal ≥ 0.5 → dibulatkan ke atas
- Desimal < 0.5 → dibulatkan ke bawah
Contoh:
console.log(Math.round(4.2)); // 4
console.log(Math.round(4.5)); // 5
console.log(Math.round(4.7)); // 5
console.log(Math.round(-4.5)); // -4Code language: JavaScript (javascript)Kapan digunakan?
- Memperbaiki hasil floating point (0.1 + 0.2)
- Pembulatan standar untuk laporan atau tampilan
2. Math.floor(x) — Pembulatan ke Bawah (Always Down)
Math.floor(x) akan membulatkan angka ke integer terendah.
Contoh:
console.log(Math.floor(4.9)); // 4
console.log(Math.floor(4.1)); // 4
console.log(Math.floor(-4.1)); // -5Code language: JavaScript (javascript)Kapan digunakan?
- Ketika setengah angka tidak boleh dinaikkan
- Membuat index array dari angka desimal
- Membuat random number dalam rentang tertentu (dipakai bersama
Math.random())
3. Math.ceil(x) — Pembulatan ke Atas (Always Up)
Math.ceil(x) membulatkan angka ke integer tertinggi.
Contoh:
console.log(Math.ceil(4.1)); // 5
console.log(Math.ceil(4.9)); // 5
console.log(Math.ceil(-4.1)); // -4Code language: JavaScript (javascript)Kapan digunakan?
- Ketika hasil desimal harus dibulatkan ke atas
- Saat menghitung jumlah halaman (paging / pagination)
- Ketika membuat perhitungan kapasitas (totalItem / perPage)
4. Pembulatan Desimal Manual
JavaScript hanya menyediakan pembulatan untuk angka integer, jadi untuk membulatkan angka desimal, kita perlu trik sedikit.
Misalnya ingin membulatkan 2.34567 → 2.35 (dua desimal).
Pembulatan desimal menggunakan toFixed()
const num = 2.34567;
const result = Number(num.toFixed(2));
console.log(result); // 2.35Code language: JavaScript (javascript)Pembulatan desimal manual menggunakan Math.round()
function roundDecimal(value, decimals) {
const multiplier = Math.pow(10, decimals);
return Math.round(value * multiplier) / multiplier;
}
console.log(roundDecimal(2.3456, 2)); // 2.35Code language: JavaScript (javascript)Floor versi desimal
function floorDecimal(value, decimals) {
const multiplier = Math.pow(10, decimals);
return Math.floor(value * multiplier) / multiplier;
}
console.log(floorDecimal(2.789, 2)); // 2.78Code language: JavaScript (javascript)Ceil versi desimal
function ceilDecimal(value, decimals) {
const multiplier = Math.pow(10, decimals);
return Math.ceil(value * multiplier) / multiplier;
}
console.log(ceilDecimal(2.781, 2)); // 2.79Code language: JavaScript (javascript)5. Random Number Sederhana dengan Math.random()
Math.random() menghasilkan angka 0 hingga <1 (tidak termasuk 1). Biasanya dipakai untuk:
- Membuat angka acak untuk game
- ID random sederhana
- Pilihan warna acak
- Simulasi probabilitas
Random 0–1 (default)
console.log(Math.random()); // contoh: 0.47281723Code language: JavaScript (javascript)Random integer 0–9
const random = Math.floor(Math.random() * 10);
console.log(random);Code language: JavaScript (javascript)Random integer dalam rentang tertentu
function randomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(randomInRange(5, 15)); // contoh: 9Code language: JavaScript (javascript)Rangkuman Fungsi Pembulatan dan Random Number
| Fungsi | Keterangan |
|---|---|
| Math.round() | Pembulatan standar |
| Math.floor() | Pembulatan ke bawah |
| Math.ceil() | Pembulatan ke atas |
| toFixed() | Formatting desimal string |
| Trik desimal | Menggunakan faktor pengali (×10ⁿ) |
| Math.random() | Angka acak 0–1 |
| Random range | Math.floor(Math.random() * (max-min+1)) + min |
Kesimpulan
Number adalah salah satu tipe data paling penting dalam JavaScript karena hampir semua aplikasi web membutuhkan perhitungan, validasi angka, formatting, hingga konversi data. Dalam artikel panjang ini, kita telah mempelajari:
- Dasar-dasar number JavaScript (integer, float, NaN, Infinity).
- Cara menggunakan number dengan benar serta masalah floating point.
- Teknik konversi data menggunakan parseInt(), parseFloat(), Number(), hingga toString().
- Cara menangani error angka seperti NaN dan Infinity.
- Method penting seperti Number.isInteger(), Number.isNaN(), toFixed(), dan toPrecision().
- Fungsi pembulatan Math.round(), Math.floor(), Math.ceil(), serta trik pembulatan desimal.
- Studi kasus penerapan number untuk harga, diskon, dan angka acak.
Dengan memahami seluruh materi ini, kamu sudah memiliki fondasi kuat untuk bekerja dengan number dalam JavaScript, baik untuk aplikasi sederhana maupun sistem yang lebih kompleks seperti e-commerce, kalkulator, dan dashboard analitik.
