Type Coercion JavaScript: Konversi Implisit vs Eksplisit

Dua jenis coercion

JavaScript longgar soal tipe. Saat sebuah operator menerima nilai dengan tipe yang "salah", bahasanya tidak melempar error, melainkan mengonversinya. Konversi itu disebut coercion, dan ada dua jenisnya:

• Eksplisit: kamu yang memintanya: Number("42"), String(99), Boolean(value).
• Implisit: sebuah operator memicunya tanpa kamu menulis konversi: "5" - 2, "" == 0, if (value).

Keduanya akhirnya memakai aturan konversi dasar yang sama. Bedanya ada pada siapa yang memutuskan untuk mengonversi, kamu atau bahasanya. Hampir setiap hasil JavaScript yang membingungkan, seperti "5" + 1 === "51", [] == false, null == undefined, berasal dari coercion implisit yang tidak kamu sadari.

console.log(Number("42"));    // 42     (explicit)
console.log("5" - 2);         // 3      (implicit)
console.log("5" + 2);         // "52"   (implicit, and different!)
console.log(Boolean(""));     // false  (explicit)
console.log(!!"");            // false  (implicit, same result)

Cara memikirkannya: kalau kamu mengetik Number(...) atau String(...), kamu tahu apa yang kamu minta. Kalau tidak, setiap operator punya pendapatnya sendiri soal apa yang harus dilakukan, dan di pendapat-pendapat itulah bug bersarang.

Tiga tipe tujuan

Coercion selalu mengonversi ke salah satu dari tiga tipe primitif: string, number, atau boolean. (Ada yang keempat, bigint, tapi tipe lain tidak pernah otomatis dikonversi menjadi bigint.) Semua aturan lainnya mengikuti dari tipe tujuan yang dituju sebuah operator.

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String([1, 2, 3])); // "1,2,3"
console.log(String({a: 1}));    // "[object Object]"

Konversi ke string adalah yang paling pemaaf: setiap nilai punya bentuk string. Perhatikan bahwa object diubah menjadi "[object Object]" yang tidak berguna, dan itulah kenapa mencatat object yang disambung dengan string ("user: " + user) hampir tidak pernah menampilkan yang kamu mau. Pakai JSON.stringify atau template literal dengan field tertentu.

Konversi ke number

Konversi ke number lebih ketat. String harus benar-benar terlihat seperti angka, kalau tidak kamu mendapat NaN:

console.log(Number("42"));       // 42
console.log(Number("42.5"));     // 42.5
console.log(Number(""));         // 0    (!)
console.log(Number("   "));      // 0    (!)
console.log(Number("42px"));     // NaN
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number(null));       // 0    (!)
console.log(Number(undefined));  // NaN
console.log(Number([]));         // 0    (!)
console.log(Number([42]));       // 42   (!)
console.log(Number([1, 2]));     // NaN

Kejutan yang diberi tanda di dalam kurung adalah yang perlu dihafal:

• String kosong dan string yang hanya berisi whitespace menjadi 0, bukan NaN.
• null menjadi 0, tapi undefined menjadi NaN.
• Array kosong menjadi 0; array satu elemen dikonversi menjadi elemen itu; array dengan banyak elemen menjadi NaN.

Kalau kamu ingin mengambil angka dari string yang punya karakter tambahan, pakai parseInt atau parseFloat, bukan Number:

console.log(parseInt("42px", 10));   // 42
console.log(parseFloat("3.14em"));   // 3.14
console.log(parseInt("", 10));       // NaN  (stricter than Number(""))

Selalu kirim radix (10) ke parseInt. Tanpanya, string yang diawali "0x" di-parse sebagai heksadesimal, yang jarang kamu maksudkan.

Konversi ke boolean

Konversi ke boolean adalah yang paling sederhana di antara ketiganya. Ada daftar pendek nilai yang dikonversi menjadi false; selebihnya true.

Nilai falsy adalah:

• false
• 0, -0, 0n
• "" (string kosong)
• null
• undefined
• NaN

Itu saja. Setiap nilai lain, termasuk "false", "0", [], dan {}, bersifat truthy.

console.log(Boolean(""));      // false
console.log(Boolean("false")); // true   (non-empty string)
console.log(Boolean(0));       // false
console.log(Boolean("0"));     // true   (non-empty string)
console.log(Boolean([]));      // true   (empty array is truthy!)
console.log(Boolean({}));      // true   (empty object is truthy!)

if ([]) console.log("empty array runs the if block");
if ({}) console.log("empty object runs the if block too");

Hasil untuk array kosong dan object kosong menjebak orang yang datang dari Python, tempat koleksi kosong bersifat falsy. Di JavaScript, keduanya truthy. Kalau kamu ingin tahu "apakah array ini kosong?", cek arr.length === 0 secara eksplisit.

Konversi ke boolean terjadi setiap kali sebuah nilai muncul di tempat yang mengharapkan boolean: if (...), while (...), ternary ? :, dan operator logika &&, ||, !.

Operator + adalah kasus khusus

Sebagian besar operator aritmetika memaksa operand-nya menjadi number. + berbeda: kalau salah satu sisinya string, + melakukan penyambungan string. Kalau tidak, ia melakukan penjumlahan angka.

console.log(1 + 2);       // 3
console.log("1" + 2);     // "12"
console.log(1 + "2");     // "12"
console.log(1 + 2 + "3"); // "33"    (left-to-right: 3, then "33")
console.log("1" + 2 + 3); // "123"   (once it's a string, it stays one)

console.log("5" - 2);     // 3       (- has no string version)
console.log("5" * "2");   // 10      (* coerces both sides)
console.log("5" / "2");   // 2.5

Evaluasinya dari kiri ke kanan. 1 + 2 + "3" pertama menghitung 1 + 2 = 3, lalu 3 + "3" = "33". Tapi "1" + 2 + 3 dimulai sebagai string dan tetap string: "12", lalu "123".

Itulah kenapa menyusun string dengan + itu rapuh. Template literal tidak punya masalah ini:

const count = 3;
console.log("count: " + count + 1);   // "count: 31"  (oops)
console.log(`count: ${count + 1}`);   // "count: 4"

Template literal mengevaluasi count + 1 sebagai ekspresi numerik tersendiri, lalu menyisipkan hasilnya. Tanpa coercion yang mengejutkan.

Utamakan konversi eksplisit

Saat kamu perlu mengonversi tipe, tulis dengan jelas. Biayanya hanya beberapa karakter, dan semua ambiguitas hilang bagi pembaca berikutnya:

const input = "42";

// Implicit - works, but easy to misread.
const n1 = +input;
const n2 = input * 1;

// Explicit - reads as "I want a number from this string".
const n3 = Number(input);

// For user input that might be messy:
const n4 = parseInt(input, 10);

console.log(n1, n2, n3, n4);

Sama halnya dengan boolean. !!value berfungsi dan umum dipakai, tapi Boolean(value) mengatakan persis apa yang dilakukannya:

const value = "hello";
console.log(!!value);          // true
console.log(Boolean(value));   // true - easier to grep for

Aturan yang masuk akal: pakai konversi eksplisit di logika aplikasi, dan simpan bentuk singkat (+x, !!x) untuk tempat yang mengutamakan keringkasan dan maksudnya jelas dari konteks.

Operator == sangat bergantung pada coercion

Operator kesetaraan adalah sumber kejutan coercion terbesar. == melakukan coercion sebelum membandingkan; === tidak.

console.log(1 == "1");         // true   (string coerced to number)
console.log(0 == "");          // true   (both coerce to 0)
console.log(0 == false);       // true   (false coerces to 0)
console.log(null == undefined); // true  (special case, only these two)
console.log(null == 0);        // false  (null does NOT coerce for ==)
console.log([] == false);      // true   ([] → "" → 0, false → 0)
console.log([1] == 1);         // true   ([1] → "1" → 1)

console.log(1 === "1");        // false  (different types, done)
console.log(null === undefined); // false

Setiap true di atas adalah hasil rantai coercion bertahap yang tidak bisa dihafal oleh sebagian besar developer. Itulah masalahnya: kode yang berjalan karena kebetulan adalah kode yang akan rusak nanti. Kita akan membahas aturan kesetaraan selengkapnya di halaman berikutnya; untuk sekarang, pelajarannya: pakai === sebagai default, dan pakai == hanya untuk idiom khusus x == null (yang menangkap null sekaligus undefined).

Menyatukan semuanya

Contoh yang menunjukkan di mana coercion membantu dan di mana ia merugikan:

function parsePrice(input) {
    // Explicit: we want a number or nothing.
    const n = Number(input);
    if (Number.isNaN(n)) return null;
    return n;
}

function formatTotal(price, quantity) {
    // Template literal handles string building without + surprises.
    const total = price * quantity;
    return `Total: $${total.toFixed(2)}`;
}

console.log(parsePrice("19.99"));  // 19.99
console.log(parsePrice(""));        // 0      (Number("") is 0 - watch out)
console.log(parsePrice("abc"));     // null
console.log(formatTotal(parsePrice("19.99"), 3)); // "Total: $59.97"

Perhatikan pemanggilan kedua. Number("") mengembalikan 0, bukan NaN, sehingga parsePrice("") mengembalikan 0, yang kemungkinan besar bukan yang diinginkan pemakai fungsi ini. Kalau input kosong harus ditolak, tambahkan pengecekan eksplisit:

function parsePrice(input) {
    if (typeof input !== "string" || input.trim() === "") return null;
    const n = Number(input);
    return Number.isNaN(n) ? null : n;
}

console.log(parsePrice(""));       // null
console.log(parsePrice("  "));     // null
console.log(parsePrice("19.99"));  // 19.99

Mengetahui nilai mana yang dikonversi menjadi 0 dan mana yang menjadi NaN adalah jenis pengetahuan yang menyelamatkanmu dari bug halus di tahap berikutnya.

Yang perlu kamu ingat

• Coercion mengonversi ke string, number, atau boolean, tergantung operatornya.
• + dengan string apa pun menjadi penyambungan; semua operator aritmetika lain mengonversi ke number.
• Nilai falsy adalah daftar pendek yang tetap, jadi hafalkan. Selebihnya truthy, termasuk [] dan {}.
• Number("") bernilai 0, Number([]) bernilai 0, Number(null) bernilai 0, tapi Number(undefined) bernilai NaN. Hal-hal ini muncul di bug sungguhan.
• Utamakan Number(x), String(x), Boolean(x) daripada trik implisit yang cerdik. Dirimu di masa depan akan berterima kasih.

Berikutnya: operator kesetaraan

Semua yang dilakukan coercion dalam perbandingan ada di dalam ==. Halaman berikutnya membahas == vs === vs Object.is, satu-satunya idiom yang membuat == masih berguna, dan kenapa linter secara default menandai bentuk yang longgar.