Tutorial Number JavaScript dan Konversi Data

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.

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:

18000

Konversi 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: 45000

Atau 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 (global isNaN melakukan 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, bukan isNaN() 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() atau toPrecision() 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 desimal
• num.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.