Ringkasan Tipe Data — typeof dan Tabel Referensi Cepat

Value JavaScript mencakup string, number, boolean, array, object, null, undefined, Map, dan Set. Dalam kerja nyata, kamu mengecek apakah value yang datang dari form atau server adalah type yang kamu harapkan sebelum memprosesnya.

Artikel ini menguraikan semuanya dari 1 sudut pandang — type — merangkum apa yang dikembalikan typeof dan cara yang benar mengecek tiap type.

Type Terbagi Jadi 7 Primitive dan Object

Mengetahui type sebuah value menentukan apa yang bisa kamu lakukan dengannya. String memberimu length dan slice; number membiarkanmu menghitung; array memberimu push.

Salah menebak type saat memproses value yang datang, sebaliknya, dan undefined atau NaN bisa lolos sampai akhir tanpa kamu sadari.

Value JavaScript terbagi jadi primitive (7 jenis: number, string, boolean, null, undefined, symbol, dan bigint — value yang bukan object maupun array) dan Object (value yang memegang property; array, Map, dan Set semuanya masuk kategori ini juga).

Kursus ini sudah membahas 5 primitive pertama dan Object.

Dari 2 sisanya, symbol (value untuk membuat key unik yang tidak pernah duplikat) dipakai saat kamu perlu jenis key khusus, dan bigint (value khusus untuk menangani integer yang sangat besar) dipakai untuk integer yang terlalu besar untuk direpresentasikan Number secara akurat. Tidak satu pun muncul dalam cakupan kursus ini, jadi cukup tahu namanya dan di mana posisinya.

Operator yang mengecek type adalah typeof. Tulis di depan sebuah value, dan itu mengembalikan nama type-nya sebagai string.

Apa yang dikembalikan tetap pada 8 jenis: "string" "number" "boolean" "undefined" "symbol" "bigint" "object" "function". "function" cuma kembali saat kamu berikan sebuah function — function dibahas di kategori berikutnya.

console.log(typeof "ORD-6033");             // string
console.log(typeof 9800);                   // number
console.log(typeof true);                   // boolean
console.log(typeof undefined);              // undefined

console.log(typeof { orderId: "ORD-6033" });  // object
console.log(typeof [1, 2]);                   // object

// null juga primitive, tapi typeof mengembalikan object
console.log(typeof null);                   // object

Jalankan typeof pada 4 value dengan type campuran, dan cek string apa yang kembali. values sudah dideklarasikan.

① Tampilkan type dari tiap 4 value, satu baris pada satu waktu.

② Gabungkan 4 type-nya dengan ", " dan tampilkan dalam 1 baris.

③ Hapus duplikat dari type yang terdaftar di ②, dan tampilkan berapa banyak type berbeda yang tersisa.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

3 Hal yang Dikembalikan typeof Sebagai object — null, Array, dan Object

Apakah sebuah value yang datang dari server adalah "object shipping-address," "null yang belum dipilih," atau "array produk" mengubah apa yang kamu lakukan selanjutnya. Tapi typeof mengembalikan "object" yang sama untuk ketiganya, jadi itu tidak bisa dipakai untuk pengecekan ini secara langsung.

typeof null mengembalikan "object" sudah jadi perilaku JavaScript sejak awal keberadaannya. Itu error spesifikasi yang diketahui, tapi memperbaikinya akan merusak kode yang sudah ada, jadi tetap dibiarkan seperti itu.

Cek null langsung dengan value === null.

Cek sebuah array dengan Array.isArray(value). Itu mengembalikan true hanya saat kamu berikan sebuah array, jadi itu membedakan array dari object dan null.

Singkirkan keduanya dulu, dan "object" apa pun yang tersisa adalah "object yang bukan array maupun null."

const shipping = null;
const cart = ["Mouse"];
const order = { orderId: "ORD-6033" };

// typeof mengembalikan hasil yang sama untuk ketiganya
console.log(typeof shipping);      // object
console.log(typeof cart);          // object

// Cek null langsung dengan ===
console.log(shipping === null);    // true

// Cek array dengan Array.isArray
console.log(Array.isArray(cart));  // true
console.log(Array.isArray(order)); // false

// Apakah ini object yang bukan array maupun null?
console.log(typeof order === "object" && order !== null && !Array.isArray(order));  // true

Singkirkan null Sebelum Membaca Isinya

Jadikan typeof value === "object" satu-satunya kondisimu sebelum membaca isi sebuah value, dan itu berhenti dengan TypeError begitu value adalah null. typeof membiarkan null lolos begitu saja, jadi cek value !== null dulu, atau pakai optional chaining, seperti value?.city.

Kelompokkan tiap field object response yang datang dari API berdasarkan type. response sudah dideklarasikan.

① Tampilkan type dari tiap 4 field, satu baris pada satu waktu, dalam bentuk "key: type".

② Tampilkan apakah items dan coupon adalah array, dalam bentuk "key: result".

③ Tampilkan apakah shipping adalah null.

④ Tampilkan apakah coupon adalah "object yang bukan array maupun null," sebagai 1 expression yang merangkai 3 kondisi.

Apakah Sebuah String Bisa Diperlakukan Sebagai Number — Number dan Number.isNaN

Sebuah quantity atau amount yang datang dari form terlihat seperti digit, tapi type-nya adalah string. Pakai itu dalam perhitungan tanpa mengecek dulu apakah bisa diperlakukan sebagai number, dan value seperti "12px" langsung mengalir ke perhitungannya dan menghasilkan NaN.

Yang dibahas di sini bukan type-nya sendiri, tapi apakah itu bisa dikonversi.

Mengonversi dengan Number(input) dan mengecek apakah hasilnya NaN dengan Number.isNaN(result) sudah dibahas di artikel type conversion. Yang layak dipisahkan dari pengecekan type di sini adalah ini pengecekan isi, bukan type.

Baik "9800" maupun "abc" punya typeof yang sama, "string" — apakah sesuatu berfungsi sebagai quantity tidak bisa ditebak dari type-nya.

Jebakannya adalah string kosong. Number("") mengembalikan 0, bukan NaN, jadi field form yang tidak diisi bisa lolos sebagai "input quantity yang valid, 0."

Untuk menolak string kosong, cek input !== "" sebelum mengonversi.

console.log(Number("9800"));               // 9800
console.log(Number("abc"));                // NaN
console.log(Number(""));                   // 0 (bukan NaN)

// Cek apakah hasil konversinya NaN
console.log(Number.isNaN(Number("abc")));  // true
console.log(Number.isNaN(Number("9800"))); // false

// String kosong lolos begitu saja jadi 0
console.log(Number.isNaN(Number("")));     // false

Nilai apakah 4 input yang datang dari form bisa dipakai sebagai quantity. inputs sudah dideklarasikan.

① Konversikan semua 4 jadi number, gabungkan dengan ", ", dan tampilkan hasilnya.

② Tampilkan apakah tiap hasil konversinya bukan NaN, di samping input-nya, satu baris pada satu waktu, dalam bentuk "input: result".

③ Tambahkan kondisi yang menolak field yang tidak diisi, dan tampilkan bagaimana hasil string kosong berubah dengan 1 kondisi versus 2, bersebelahan.

Memilih Pengecekan yang Tepat — Tabel Referensi Cepat

Ada lebih dari 1 cara menulis pengecekan type. Beberapa type bisa dibedakan typeof sendiri, yang lain butuh pengecekan tambahan di atas apa yang dikembalikan typeof, dan apakah isi sebuah string berfungsi sebagai number adalah pengecekan yang sama sekali terpisah dari type. Pilih cara menulisnya berdasarkan apa yang mau kamu pastikan.