Cara aman saat mengakses data pada object di Javascript sangat penting dilakukan agar aplikasi dapat bertahan dengan kondisi data yang tidak sesuai. Teknik ini pada dasarnya dilakukan dengan menghindari masalah karena data null.

Perhatian!!!

Agar dapat memahami tulisan ini dengan baik, diperlukan pengetahuan tentang nilai truthy dan falsy pada Javascript.

Kasus

Sering kali saat menulis kode, kita perlu mengambil data yang ada pada object. Katakan kita punya sebuah object pegawai, lalu kita perlu untuk mengambil data status nya.

• Jika ada, maka tulis status tersebut.
• Jika tidak ada, maka tulis "magang".

Sebagai ilustrasi, kira-kira kodenya begini.

const pegawai = {
  nama: 'Alex Under',
  status: 'tetap',
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan tampil

Alex Under adalah pegawai tetap

Masalah dan Solusi Ke-1

Sekarang kita kurangi isi object-nya jadi begini.

const pegawai = {
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan tampil

undefined adalah pegawai undefined

Di sini masih aman, semuanya masih bisa jalan dan gak ada error. Cuman datanya memang ditampilkan undefined, jadi terlihat aneh.

Untuk mengatasi masalah ini, kita bisa tambahkan if-else seperti ini.

const pegawai = {
};

if (!pegawai.nama) {
  pegawai.nama = 'Seorang Pegawai';
}

if (!pegawai.status) {
  pegawai.status = 'magang';
}

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan tampil

Seorang Pegawai adalah pegawai magang

Kita dapat memberi nilai default pada data sehingga jika data tidak tersedia, maka nilai default tersebut yang akan digunakan.

Bonus

Supaya lebih singkat, bisa dibuat seperti ini.

const pegawai = {
};

pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Masalah dan Solusi Ke-2

Gimana kalau object-nya gak ada (null) ?

const pegawai = null;
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

Maka akan error dong kayak gini

Uncaught TypeError: Cannot read properties of null (reading 'nama')

Di sini sudah masalah, aplikasi berhenti karena ada error dikarenakan kita mengambil data nama dan status dari sebuah object yang bernilai null. Akhirnya, aplikasi akan crash dan berhenti.

Untuk mengatasi masalah ini, kita bisa menggunakan teknik mantap seperti berikut.

const pegawai = null;
const pegawaiSafe = pegawai || {};

if (!pegawaiSafe.nama) {
  pegawaiSafe.nama = 'Seorang Pegawai';
}

if (!pegawaiSafe.status) {
  pegawaiSafe.status = 'magang';
}

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

Maka tidak ada error dan akan tampil

Seorang Pegawai adalah pegawai magang

Bonus

Supaya lebih singkat, bisa dibuat seperti ini.

const pegawai = null;

const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

Atau seperti ini.

const pegawai = null;

const pegawaiSafe = pegawai || {};
pegawaiSafe.nama = pegawaiSafe.nama || 'Seorang Pegawai';
pegawaiSafe.status = pegawaiSafe.status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

Nahhh...

Sekarang aplikasi kita gak crash lagi horeeee ahahahaa...

Penutup

Dengan menerapkan solusi-solusi di atas, kita akan terhindar dari masalah null pada object terutama object yang menerima isian dari luar, seperti user input, database, service pihak ketiga, dll.

Terima kasih sudah baca.

Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎