Math: Fungsi Matematika
Objek Math sebagai toolbox matematika JavaScript: pembulatan (round, floor, ceil, trunc), min/max, pangkat dan akar, serta angka acak untuk game dan undian.
Kenapa Ada Objek Math?
JavaScript tidak punya operator pembulatan atau fungsi acak di sintaks intinya. Solusinya adalah objek Math: sebuah wadah berisi fungsi dan konstanta matematika seperti Math.PI. Math bukan class, jadi kamu tidak bisa menulis new Math(); cukup panggil langsung, misalnya Math.round(4.6).
Tanpa Math, hal sepele seperti membulatkan harga diskon, mencari nilai tertinggi, atau mengacak urutan kartu harus ditulis manual dengan rumus panjang. Modul ini membuat semua itu bisa dilakukan dalam satu baris.
Pembulatan: Empat Cara Berbeda
Contoh sederhana, perhatikan perbedaannya baik-baik:
Math.round(4.6); // 5, ke bilangan bulat terdekat
Math.round(4.4); // 4
Math.floor(4.9); // 4, selalu dibulatkan ke bawah
Math.ceil(4.1); // 5, selalu dibulatkan ke atas
Math.trunc(4.9); // 4, potong bagian desimalnya
Math.trunc(-4.9); // -4 (hati-hati: Math.floor(-4.9) = -5!)Contoh realistis: hitung ongkos kirim yang dibulatkan per 5 kg.
function hitungOngkir(beratKg) {
const kelipatan = Math.ceil(beratKg / 5); // 5.2 kg -> 2 kelipatan
return kelipatan * 10000;
}
console.log(hitungOngkir(5.2)); // 20000
console.log(hitungOngkir(10)); // 20000Math.ceil adalah pilihan tepat untuk kasus "kurang sedikit tetap dihitung penuh", seperti ongkir, parkir per jam, atau pagination (Math.ceil(totalData / perHalaman)).
Min, Max, Pangkat, Akar
Math.max(3, 7, 2); // 7
Math.min(3, 7, 2); // 2
Math.pow(2, 3); // 8 (atau ditulis 2 ** 3)
Math.sqrt(16); // 4
Math.abs(-5); // 5, nilai mutlakContoh realistis: nilai tertinggi dari array, plus fungsi clamp yang menjaga angka tetap dalam batas.
const nilai = [78, 92, 65, 88];
const tertinggi = Math.max(...nilai); // spread: array jadi argumen
console.log(tertinggi); // 92
function clamp(angka, min, max) {
return Math.min(Math.max(angka, min), max);
}
console.log(clamp(150, 0, 100)); // 100
console.log(clamp(-20, 0, 100)); // 0Pola clamp dipakai di mana-mana: membatasi volume 0-100, opacity 0-1, atau level karakter game.
Angka Acak
Math.random() menghasilkan desimal dari 0 (inklusif) sampai di bawah 1. Tidak pernah tepat 1.
Math.random(); // mis. 0.7231...
Math.floor(Math.random() * 6) + 1; // dadu 1-6Pola umumnya: Math.floor(Math.random() * jumlahKemungkinan) + nilaiMin. Contoh realistis, undian pemenang:
function acak(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const peserta = ["Ani", "Budi", "Citra", "Dedi"];
const pemenang = peserta[acak(0, peserta.length - 1)];
console.log("Pemenang:", pemenang);Pola yang sama dipakai untuk kode OTP 6 digit, shuffle playlist, atau sampling data.
Jebakan Umum
Math.random()TIDAK aman untuk kriptografi. Untuk token sesi atau password sementara, pakaicrypto.getRandomValues().Math.max()tanpa argumen me-return-Infinity, danMath.min()tanpa argumen me-returnInfinity. Jangan spread array kosong tanpa pengecekan dulu.Math.floorpada bilangan negatif bergerak menjauhi nol:Math.floor(-4.1)adalah-5, bukan-4. Kalau mau sekadar buang koma, pakaiMath.trunc.
Ringkasan
Math adalah toolbox matematika JavaScript: pembulatan (round/floor/ceil/trunc), nilai ekstrem (min/max), pangkat dan akar (pow/sqrt/abs), serta angka acak (random). Hafalkan pola dadu Math.floor(Math.random() * n) + min karena ia muncul di game, undian, OTP, dan sampling data.
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Tebak Angka
Buat angka rahasia 1-100 dengan Math.random. Diberi tebakan 42, tampilkan "Tebakan 42: terlalu kecil/besar/tepat" memakai perbandingan (Math.round tidak perlu karena sudah bulat). Game tebak angka adalah latihan klasik di bootcamp untuk melatih logika perbandingan dan angka acak, pola yang sama dipakai di sistem undian berhadiah dan generator kode OTP di aplikasi nyata.
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <h1>Halo JS</h1> <p>Buka console preview untuk melihat output.</p> <script src="index.js"></script> </body> </html>