null vs undefined JavaScript: Perbedaan, Pengecekan, dan Kapan Memakainya

Dua Cara Mengatakan "Tidak Ada"

Kebanyakan bahasa punya satu nilai untuk menyatakan ketiadaan. JavaScript punya dua: null dan undefined. Keduanya cukup mirip untuk membingungkan pemula, dan cukup berbeda untuk menjebak developer berpengalaman. Memahami pembagian ini layak kamu luangkan sepuluh menit.

Versi singkatnya:

• undefined adalah yang diberikan JavaScript saat sesuatu tidak ada.
• null adalah yang kamu tulis saat ingin mengatakan "sengaja dikosongkan."

let x;
console.log(x);           // undefined - declared, never assigned

const user = { name: "Rosa" };
console.log(user.age);    // undefined - property doesn't exist

function greet(name) {
  console.log(name);
}
greet();                  // undefined - argument not passed

const chosen = null;
console.log(chosen);      // null - you put it there

Perhatikan polanya: setiap undefined di atas terjadi karena JavaScript tidak bisa menemukan nilainya. null terjadi karena seseorang mengetiknya.

Dari Mana undefined Berasal

undefined muncul di beberapa situasi tertentu, semuanya variasi dari "tidak ada nilai yang tersedia":

// 1. A declared variable with no initializer
let a;
console.log(a);                    // undefined

// 2. A missing object property
const obj = { x: 1 };
console.log(obj.y);                // undefined

// 3. A missing function argument
function f(x, y) { return y; }
console.log(f(1));                 // undefined

// 4. A function with no return statement
function g() {}
console.log(g());                  // undefined

// 5. A missing array element
const arr = [1, 2];
console.log(arr[5]);               // undefined

Dalam setiap kasus, JavaScript mencari sebuah nilai dan tidak menemukan apa-apa. undefined adalah cara engine mengatakan "aku sudah mencari, tidak ada nilainya."

Kamu bisa mengisi undefined sendiri (let x = undefined;), tetapi sebaiknya jangan. Biarkan ia tetap menjadi tanda bahwa "JavaScript tidak menemukan apa pun." Pakai null saat kamulah yang membuat keputusan.

Dari Mana null Berasal

null hanya muncul saat seseorang menuliskannya. Itulah intinya: ia adalah penanda yang disengaja.

// "No user is logged in yet."
let currentUser = null;

// Later, a user logs in.
currentUser = { name: "Boris" };

// And logs out.
currentUser = null;

API DOM sering memakai null: document.getElementById("missing") mengembalikan null, bukan undefined, karena browser secara eksplisit memberitahumu "aku sudah mencari, dan jawabannya tidak ada elemen." JSON.parse("null") juga memberimu null, karena JSON tidak punya undefined.

Model mentalnya: undefined adalah ketiadaan default, null adalah ketiadaan yang dipilih.

Keanehan typeof

Inilah yang terkenal itu:

console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"   ← ???

typeof null yang mengembalikan "object" adalah bug dari tahun 1995 yang tidak bisa diperbaiki tanpa merusak website yang sudah ada, jadi dipertahankan selamanya. null bukan objek, melainkan tipe primitif, sama seperti undefined, angka, string, dan boolean. Hasil typeof hanya berbohong soal itu.

Akibat praktisnya: typeof tidak berguna untuk mendeteksi null. Pakai perbandingan langsung:

const value = null;

if (value === null) {
  console.log("it's null");
}

if (typeof value === "undefined") {
  console.log("it's undefined");
}

Atau, yang lebih sering, cek keduanya sekaligus, seperti di bagian berikutnya.

Mengecek Keduanya: Idiom == null

Sebagian besar waktu kamu tidak peduli nilai ketiadaan yang mana yang kamu punya; kamu hanya ingin tahu apakah ada yang hilang sebelum memakainya. Pengecekan yang lazim adalah kesamaan longgar dengan null:

function describe(value) {
  if (value == null) {
    return "nothing here";
  }
  return `got ${value}`;
}

console.log(describe(null));         // nothing here
console.log(describe(undefined));    // nothing here
console.log(describe(0));            // got 0
console.log(describe(""));           // got
console.log(describe("hello"));      // got hello

value == null bernilai true hanya untuk null dan undefined, dan false untuk semua yang lain, termasuk 0, "", dan false, yang biasanya memang yang kamu inginkan. Inilah satu-satunya situasi di mana == lebih disukai daripada ===. Linter mengetahuinya dan mengizinkannya.

Kalau kamu ingin eksplisit, value === null || value === undefined artinya sama dan terbaca dengan jelas.

Operator Nullish: ?? dan ?.

Dua operator ditambahkan khusus untuk memudahkan bekerja dengan null dan undefined. Keduanya memperlakukan kedua nilai itu sama persis dan membiarkan semua nilai lain.

Nullish coalescing (??) memberikan nilai cadangan hanya saat sisi kirinya null atau undefined:

const config = { retries: 0, timeout: null };

const retries = config.retries ?? 3;     // 0 (not nullish - keep it)
const timeout = config.timeout ?? 5000;  // 5000 (was null)
const name = config.name ?? "guest";     // "guest" (was undefined)

console.log(retries, timeout, name);

Bandingkan dengan ||, yang akan mengganti 0 dengan 3 karena 0 bernilai falsy. ?? lebih ketat: ia hanya aktif untuk kedua nilai nullish.

Optional chaining (?.) menghentikan evaluasi rangkaian dan mengembalikan undefined saat bertemu null atau undefined:

const user = { profile: null };

console.log(user.profile?.name);        // undefined (no crash)
console.log(user.settings?.theme);      // undefined (no crash)
console.log(user?.profile?.name);       // undefined

Kedua operator ini ada karena "apakah nilai ini nullish?" adalah pertanyaan yang sangat umum. Keduanya dibahas lebih dalam di bagian kurikulum berikutnya.

Parameter Default Hanya Aktif untuk undefined

Satu aturan yang halus tetapi penting: nilai parameter default hanya berlaku untuk undefined, bukan untuk null.

function greet(name = "friend") {
  console.log(`Hello, ${name}`);
}

greet();             // Hello, friend
greet(undefined);    // Hello, friend
greet(null);         // Hello, null   ← default did not apply

Memberikan null dianggap sebagai "aku sengaja memilih tidak ada nilai" dan dihormati apa adanya. Kalau kamu ingin null juga memicu nilai cadangan, pakai ?? di dalam fungsinya:

function greet(name) {
  const display = name ?? "friend";
  console.log(`Hello, ${display}`);
}

greet(null);         // Hello, friend

Perbedaan ini sering menjebak orang. Default menangani argumen yang tidak ada; ?? menangani argumen yang nullish.

JSON dan undefined yang Hilang

JSON punya null tetapi tidak punya undefined. Ini menimbulkan kejutan diam-diam saat kamu melakukan serialisasi:

const data = {
  name: "Rosa",
  age: undefined,
  nickname: null,
};

console.log(JSON.stringify(data));
// {"name":"Rosa","nickname":null}

Field age hilang sepenuhnya: JSON.stringify membuang property yang nilainya undefined. null selamat karena JSON mendukungnya. Membawa sebuah objek bolak-balik lewat JSON adalah cara umum property undefined lenyap diam-diam.

Di dalam array, undefined menjadi null:

console.log(JSON.stringify([1, undefined, 3]));
// [1,null,3]

Kalau kamu merancang payload API, utamakan null daripada undefined untuk field "tidak ada nilai". Nilai itu selamat dalam perjalanan.

Kapan Memakai yang Mana

Konvensi yang masuk akal untuk kodemu sendiri:

• Biarkan undefined berarti "tidak diberikan": argumen yang tidak ada, variabel yang belum diisi, property yang tidak ada. Jangan mengisi undefined secara manual.
• Pakai null saat kamu ingin menyampaikan secara eksplisit bahwa "ini sengaja dikosongkan", misalnya pengguna yang sudah keluar, pilihan yang belum dipilih, atau field formulir yang dikosongkan.
• Terima keduanya di batas API (pakai == null atau ??), tetapi konsistenlah soal mana yang kamu hasilkan.

Beberapa panduan gaya (termasuk milik TypeScript) sama sekali melewatkan null dan hanya memakai undefined. Itu bisa dipertanggungjawabkan, karena satu nilai lebih sederhana daripada dua. Pilih satu aturan per proyek dan terapkan di mana-mana.

Berikutnya: Type Coercion

null dan undefined berperilaku dengan cara tertentu saat JavaScript mengubahnya menjadi angka, string, atau boolean: Number(null) bernilai 0, tetapi Number(undefined) bernilai NaN, dan ketidaksimetrisan seperti itu menyebabkan bug sungguhan. Type coercion adalah topik berikutnya, dan begitu kamu melihat aturan lengkapnya, banyak keanehan JavaScript tidak lagi terasa misterius.