null dan undefined di TypeScript: Pengecekan, ?. dan ??

Saat strictNullChecks aktif (opsi ini bagian dari strict), null dan undefined punya tipe sendiri. Sebuah string tidak akan pernah bisa bernilai null; nilai yang mungkin kosong harus menyatakannya di tipenya, misalnya string | null, dan TypeScript memaksamu menangani kasus itu sebelum memakai nilainya.

function initials(name: string | null | undefined): string {
  if (name == null) return "?"; // handles both null and undefined
  return name
    .split(" ")
    .map((part) => part[0])
    .join("");
}

console.log(initials("Ada Lovelace")); // AL
console.log(initials(null));           // ?
console.log(initials(undefined));      // ?

Setelah pengecekan itu, compiler tahu bahwa name adalah string, jadi .split boleh dipanggil. Bagian selanjutnya membahas berbagai cara melakukan pengecekan itu dan operator yang membuatnya singkat.

strictNullChecks dan Error "Possibly Null"

Kalau sebuah tipe memuat null atau undefined, TypeScript menolak memakai nilainya seolah nilai itu selalu ada:

// This does not compile: name may be null
function greet(name: string | null) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("ada"));

index.ts(3,22): error TS18047: 'name' is possibly 'null'.

Versi untuk undefined adalah TS18048, 'x' is possibly 'undefined'. Tanpa strictNullChecks, null dan undefined diterima di semua tipe, sehingga kode ini lolos kompilasi, lalu crash saat runtime dengan TypeError begitu name bernilai null. Jenis bug inilah alasan utama untuk tetap mengaktifkan strict.

Dari mana tipe-tipe ini muncul dalam kode sehari-hari:

Mengecek null dan undefined

Setiap pengecekan di bawah ini mempersempit tipe di dalam bloknya. Pilih yang sesuai dengan apa yang ingin kamu singkirkan.

function label(value: string | null | undefined): string {
  if (value === undefined) return "undefined";
  if (value === null) return "null";
  return value.toUpperCase(); // value is string here
}

function orNone(value: string | null | undefined): string {
  if (value == null) return "(none)"; // == null matches null AND undefined
  return `"${value}"`;
}

console.log(label(undefined), label(null), label("ok")); // undefined null OK
console.log(orNone(null), orNone(undefined), orNone("")); // (none) (none) ""

== null adalah satu-satunya tempat kesamaan longgar dianggap wajar: hasilnya true tepat untuk null dan undefined, tidak ada yang lain. Pengecekan truthy akan menganggap string kosong sebagai nilai yang hilang, dan itu sering menjadi bug.

Optional Chaining: ?.

a?.b membaca b kalau a bukan null atau undefined, dan kalau tidak, berhenti lalu mengembalikan undefined. Operator yang sama bisa dipakai untuk index, a?.[i], dan untuk pemanggilan fungsi, fn?.().

interface User {
  name: string;
  address?: { city: string; zip?: string };
  tags?: string[];
  onLogin?: () => string;
}

const ada: User = { name: "Ada", address: { city: "London" }, onLogin: () => "welcome" };
const bob: User = { name: "Bob" };

console.log(ada.address?.city);        // London
console.log(bob.address?.city);        // undefined
console.log(ada.address?.zip?.length); // undefined
console.log(bob.tags?.[0]);            // undefined
console.log(ada.onLogin?.());          // welcome
console.log(bob.onLogin?.());          // undefined

Tipe bob.address?.city adalah string | undefined: optional chaining menambahkan undefined ke hasilnya, jadi biasanya kamu memasangkannya dengan ??. Perilakunya saat runtime adalah JavaScript biasa; lihat optional chaining untuk detail short-circuiting.

Tanda Tanya Ganda: ??

a ?? b mengembalikan a, kecuali kalau nilainya null atau undefined, dan dalam hal itu mengembalikan b. Operator ini menggantikan pola lama a || b, yang juga membuang 0, "", false dan NaN:

function pageSize(input: number | undefined): string {
  const withOr = input || 20;      // 0 is falsy, so it is replaced
  const withNullish = input ?? 20; // only undefined is replaced
  return `${withOr} vs ${withNullish}`;
}

console.log(pageSize(undefined)); // 20 vs 20
console.log(pageSize(0));         // 20 vs 0

const scores = new Map([["Ada", 90]]);
const score: number = scores.get("Linus") ?? 0; // number | undefined becomes number
console.log(score);                             // 0

Pada level tipe, ?? menghapus null dan undefined dari sisi kiri lalu menggabungkan sisanya dengan sisi kanan dalam sebuah union, itulah sebabnya scores.get("Linus") ?? 0 bisa di-assign ke number.

Nullish Assignment: ??=

a ??= b meng-assign b ke a hanya kalau a bernilai null atau undefined. Saudaranya, ||= dan &&=, meng-assign saat sisi kiri bernilai falsy atau truthy.

interface Options {
  retries?: number;
  label?: string;
}

function withDefaults(opts: Options) {
  opts.retries ??= 3;   // assign only if null or undefined
  opts.label ||= "job"; // assign if falsy, so "" is replaced too
  return opts;
}

console.log(withDefaults({}));                       // { retries: 3, label: 'job' }
console.log(withDefaults({ retries: 0, label: "" })); // { retries: 0, label: 'job' }

retries: 0 tetap bertahan setelah ??=, sedangkan label yang kosong diganti oleh ||=. Setelah opts.retries ??= 3, TypeScript mempersempit opts.retries menjadi number untuk sisa fungsi itu.

Property Opsional vs | undefined

nickname?: string dan nickname: string | undefined terlihat mirip, tetapi berbeda dalam hal apakah key-nya wajib ada:

interface WithOptional { nickname?: string }            // key may be missing
interface WithUndefined { nickname: string | undefined } // key must be present

const a: WithOptional = {};
const b: WithUndefined = { nickname: undefined };

// @ts-expect-error: Property 'nickname' is missing in type '{}' but required in type 'WithUndefined'.
const c: WithUndefined = {};

console.log("nickname" in a, "nickname" in b); // false true
console.log(a.nickname === b.nickname);        // true: both read as undefined

Pakai ? kalau pemanggil boleh tidak menyertakan property itu, dan | undefined kalau kamu ingin setiap pemanggil mengisinya secara eksplisit, walaupun nilainya undefined. Opsi exactOptionalPropertyTypes (bukan bagian dari strict) membuat ? lebih ketat lagi: nickname?: string lalu menolak { nickname: undefined } dan hanya menerima key yang tidak ada atau sebuah string. Parameter fungsi opsional (x?: number) berperilaku seperti property opsional: di dalam fungsi, x bertipe number | undefined.

null atau undefined: Mana yang Dipakai

TypeScript tidak memaksamu memilih, tetapi mencampur keduanya dalam satu codebase berarti setiap pengecekan harus menangani dua kasus. Konvensi yang umum:

• Pakai undefined (dan property opsional) untuk "belum diisi" di tipe buatanmu sendiri. Itulah yang dihasilkan JavaScript secara default: property yang tidak ada, argumen yang dilewati, find dan Map.get yang tidak menemukan apa pun.
• Terima null di tempat sebuah API memberikannya: JSON tidak punya undefined, sedangkan String.prototype.match dan banyak method DOM mengembalikan null.
• Cek dengan == null kalau sebuah nilai bisa salah satu dari keduanya.

Pengaksesan array lewat index adalah satu-satunya celah: users[5] diberi tipe elemen walaupun index-nya di luar jangkauan. Opsi noUncheckedIndexedAccess (bukan bagian dari strict) menambahkan | undefined ke setiap akses index supaya compiler juga menangkap kasus itu.