TypeScript - null vs. undefined (ID)

Halo, para pemula pemrograman! Hari ini, kita akan mendalamkan sebuah topik yang sering mengelilingkan pemula: perbedaan antara null dan undefined di TypeScript. Jangan khawatir jika Anda merasa sedikit terganggu – saya ingat saat pertama kali saya menemui konsep ini, saya juga menggaruk kepalaku! Tetapi pada akhir pelajaran ini, Anda akan menjadi ahli dalam membedakan antara dua nilai spesial ini. Mari kita mulai!

Apa itu null?

Dalam TypeScript (dan JavaScript), null adalah nilai spesial yang mewakili keabsahan yang sengaja dari nilai objek apa pun. Itu seperti mengatakan, "Hey, seharusnya ada sesuatu di sini, tapi sekarang, tidak ada apa-apa."

Marilah kita lihat beberapa contoh untuk memahami ini lebih baik:

let myPet: string | null = null;
console.log(myPet); // Output: null

// Kemudian di kode...
myPet = "Fluffy";
console.log(myPet); // Output: Fluffy

Dalam contoh ini, kita mendeklarasikan variabel myPet yang bisa menjadi string atau null. Awalnya, kita set ke null, menunjukkan bahwa kita belum memiliki hewan peliharaan. Kemudian, saat kita mendapatkan hewan peliharaan, kita memberikan nama "Fluffy" ke myPet.

Ini adalah contoh lain:

function findUser(id: number): { name: string } | null {
// Bayangkan kita mencari di database
if (id === 1) {
return { name: "Alice" };
} else {
return null;
}
}

let user = findUser(1);
console.log(user); // Output: { name: "Alice" }

user = findUser(2);
console.log(user); // Output: null

Dalam kasus ini, fungsi findUser mengembalikan baik objek pengguna atau null jika pengguna tidak ditemukan. Ini adalah pola umum dalam pemrograman – menggunakan null untuk menunjukkan bahwa pencarian atau operasi tidak menghasilkan hasil.

Apa itu undefined?

Sekarang, mari kita bicarakan undefined. Nilai spesial ini mewakili variabel yang telah dideklarasikan tapi belum diberikan nilai. Itu seperti sebuah kotak kosong – itu ada, tapi belum ada apa-apa di dalamnya.

Ini adalah beberapa contoh untuk menggambarkan undefined:

let myName: string;
console.log(myName); // Output: undefined

// Kemudian di kode...
myName = "John";
console.log(myName); // Output: John

function greet(name?: string) {
console.log(name);
}

greet(); // Output: undefined
greet("Alice"); // Output: Alice

Dalam bagian pertama, kita mendeklarasikan myName tapi tidak memberikan nilai. TypeScript secara otomatis memberikannya nilai undefined. Kemudian, kita memberikan nilai, dan itu tidak lagi undefined.

Dalam greet function, kita gunakan parameter opsional. Jika kita panggil fungsi tanpa memberikan argumen, parameter name akan menjadi undefined.

Ini adalah contoh lain dimana Anda mungkin menemukan undefined:

let person = {
name: "Bob",
age: 30
};

console.log(person.name); // Output: Bob
console.log(person.job); // Output: undefined

Dalam kasus ini, person.job adalah undefined karena kita tidak pernah mendefinisikan properti job untuk objek person kita.

Null vs. Undefined: Perbedaan Utama

Sekarang kita telah mengeksplorasi null dan undefined secara terpisah, mari kita bandingkan mereka bersamaan untuk memahami perbedaan mereka dengan baik.

Aspek	null	undefined
Arti	Kehadiran sengaja dari nilai objek apa pun	Variabel dideklarasikan tapi belum diberikan nilai
Tipe	Object	Undefined
Dalam JSON	Valid	Invalid
Parameter default fungsi	Tidak digunakan sebagai default	Digunakan sebagai default untuk parameter opsional
Kesetaraan	null == undefined (benar), null === undefined (salah)	undefined == null (benar), undefined === null (salah)

Marilah kita lihat beberapa contoh kode untuk menggambarkan perbedaan ini:

// Pemeriksaan tipe
console.log(typeof null);       // Output: "object"
console.log(typeof undefined);  // Output: "undefined"

// Serialisasi JSON
console.log(JSON.stringify({ a: null }));     // Output: {"a":null}
console.log(JSON.stringify({ a: undefined })); // Output: {}

// Parameter default fungsi
function sayHello(name: string = "World") {
console.log(`Hello, ${name}!`);
}

sayHello();        // Output: Hello, World!
sayHello(undefined); // Output: Hello, World!
sayHello(null);    // Output: Hello, null!

// Kesetaraan
console.log(null == undefined);  // Output: true
console.log(null === undefined); // Output: false

Dalam praktek, pilihan antara null dan undefined seringkali bergantung pada preferensi pribadi atau tim. Namun, memahami perbedaan ini dapat membantu Anda menulis kode yang lebih tepat dan bebas dari bug.

Ini adalah contoh final untuk mengikat semua hal bersama:

function processUser(user: { name: string, age?: number } | null | undefined) {
if (user === null) {
console.log("User secara eksplisit diatur ke null");
} else if (user === undefined) {
console.log("User tidak diberikan");
} else {
console.log(`Memproses pengguna: ${user.name}, Umur: ${user.age ?? "Tak Diketahui"}`);
}
}

processUser(null);                    // Output: User secara eksplisit diatur ke null
processUser(undefined);               // Output: User tidak diberikan
processUser({ name: "Alice" });       // Output: Memproses pengguna: Alice, Umur: Tak Diketahui
processUser({ name: "Bob", age: 30 }); // Output: Memproses pengguna: Bob, Umur: 30

Fungsi ini menunjukkan bagaimana kita mungkin menangani null, undefined, dan objek pengguna valid secara berbeda dalam sebuah konteks real dunia.

Dan itu saja! Anda baru saja belajar tentang null dan undefined di TypeScript. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini dalam kode Anda sendiri. Selamat coding, dan semoga variabel Anda selalu sengaja null atau undefined!

Credits: Image by storyset