1. Pendahuluan
Saat membangun program dalam JavaScript, Anda mungkin kadang‑kadang melihat string “[object Object]” ketika mencoba menampilkan sebuah objek. Ini adalah situasi umum yang terjadi ketika objek JavaScript dikeluarkan secara langsung tanpa pemformatan.
Dalam artikel ini, kami akan menjelaskan apa arti sebenarnya dari “[object Object]” dan bagaimana menampilkan isi sebuah objek dengan cara yang dapat dibaca.
Panduan ini dirancang untuk pengembang pemula hingga menengah, dan mencakup contoh praktis serta potongan kode untuk membantu Anda memahami topik ini lebih mendalam.
2. Apa Itu ‘[object Object]’?
Dalam JavaScript, ketika Anda mencoba mengubah sebuah objek menjadi string, perilaku default sering menghasilkan “[object Object]”. Output ini mewakili informasi tipe tentang nilai tersebut, tetapi tidak menampilkan isi sebenarnya dari objek.
Mengapa ‘[object Object]’ Muncul?
Objek JavaScript memiliki metode toString() default. Metode ini dipanggil setiap kali sebuah objek diperlakukan sebagai string. Namun, menurut spesifikasi standar JavaScript, objek mengembalikan format berikut secara default ketika diubah menjadi string.
console.log({}); // Output: [object Object]
Perilaku ini hanya menampilkan informasi tipe sebagai “object” dan tidak menyertakan detail tentang kunci atau nilai di dalam objek. Karena itu, pengembang perlu menggunakan metode lain untuk memeriksa dan menampilkan data objek dengan tepat.
3. Mengapa ‘[object Object]’ Muncul
Peran Metode toString()
Semua objek JavaScript mewarisi metode Object.prototype.toString(). Metode ini secara otomatis dipanggil ketika sebuah objek diubah menjadi string.
Untuk mengonfirmasi perilaku default, lihat kode berikut:
const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]
Seperti yang Anda lihat, toString() dirancang untuk mengembalikan “[object Object]” untuk objek biasa secara default.
Contoh yang Disebabkan oleh Koersi Tipe Implisit
Perilaku yang sama terjadi ketika sebuah objek digabungkan dengan string.
const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]
Dalam contoh ini, obj diubah menjadi string, dan toString() dipanggil secara internal—menghasilkan output “[object Object]”.
4. Cara Menghindari ‘[object Object]’
4.1. Mengonversi Objek menjadi String dengan JSON.stringify()
Pendekatan termudah dan paling umum adalah menggunakan JSON.stringify() untuk mengonversi sebuah objek menjadi string berformat JSON.
Contoh: Penggunaan Dasar JSON.stringify
const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}
Dalam kode ini, kunci dan nilai objek ditampilkan secara akurat dalam format JSON.
Pretty Printing (Dengan Indentasi)
Anda juga dapat mengeluarkan JSON yang diformat dengan indentasi untuk meningkatkan keterbacaan.
console.log(JSON.stringify(obj, null, 2));
Output:
{
"key": "value",
"id": 123
}
Karena JSON.stringify() dapat memformat objek kompleks dan struktur bersarang dengan bersih, ia sangat berguna untuk debugging.
4.2. Memeriksa Objek secara Detail dengan console.dir()
Dengan menggunakan console.dir(), Anda dapat memeriksa properti dan metode sebuah objek dalam struktur hierarkis.
Contoh: Cara Menggunakan console.dir
const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);
Output ini ditampilkan dalam format yang memungkinkan Anda memperluas dan memeriksa struktur objek di dalam DevTools.
Perbedaan antara console.dir dan console.log:
console.log(obj)menampilkan objek dalam gaya satu baris, yang tidak ideal untuk memeriksa struktur kompleks.console.dir(obj)mempertahankan struktur hierarkis, menjadikannya berguna untuk objek dan array bersarang.
4.3. Menerapkan Metode toString() Kustom
Anda dapat menyesuaikan output default “[object Object]” dengan mendefinisikan metode toString() Anda sendiri pada sebuah objek.
Contoh: Implementasi Custom toString
const obj = {
key: "value",
id: 123,
toString() {
return `Key: ${this.key}, ID: ${this.id}`;
},
};
console.log(obj.toString()); // Output: Key: value, ID: 123
Dengan pendekatan ini, ketika objek diperlakukan sebagai string, itu akan menghasilkan format kustom Anda alih-alih nilai default.
4.4. Mencetak Isi Objek dengan Loop for…in
Opsi lain adalah melooping melalui kunci dan nilai objek dan mencetaknya secara manual.
Contoh: Menggunakan Loop for…in
const obj = { key: "value", id: 123 };
for (const key in obj) {
console.log(`${key}: ${obj[key]}`);
}
Output:
key: value
id: 123
Pendekatan ini sederhana dan mudah disesuaikan, menjadikannya cocok untuk memeriksa objek kecil dengan cepat.
4.5. Menggunakan Object.entries() atau Object.keys()
Mulai dari ES6, JavaScript menyediakan metode untuk mengekstrak kunci dan nilai sebagai array.
Contoh: Menggunakan Object.entries
const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));
Output:
[ [ 'key', 'value' ], [ 'id', 123 ] ]
Dengan mendapatkan pasangan kunci-nilai sebagai array, Anda dapat memanfaatkan metode array untuk pemrosesan lebih lanjut.
5. Contoh Lanjutan: Menampilkan Objek dan Array Kompleks
5.1. Menampilkan Objek Bertingkat
Ketika sebuah objek berisi objek lain, mari kita lihat cara mudah untuk menampilkan isinya dengan jelas.
Contoh: Menampilkan Objek Bertingkat
const data = {
user: {
name: "John",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
},
hobbies: ["reading", "traveling"],
};
console.log(JSON.stringify(data, null, 2));
Output:
{
"user": {
"name": "John",
"age": 30,
"address": {
"city": "Tokyo",
"country": "Japan"
}
},
"hobbies": [
"reading",
"traveling"
]
}
Seperti yang ditunjukkan di atas, menggunakan JSON.stringify() membuat struktur objek bertingkat mudah dipahami.
5.2. Menampilkan Objek yang Berisi Array
Jika sebuah objek berisi array, Anda dapat menanganinya dengan cara serupa.
Contoh: Menampilkan Objek dengan Array
const order = {
id: 101,
items: [
{ name: "Apple", price: 150 },
{ name: "Banana", price: 100 },
{ name: "Cherry", price: 200 },
],
total: 450,
};
console.table(order.items);
Output:
| (index) | name | price |
|---|---|---|
| 0 | Apple | 150 |
| 1 | Banana | 100 |
| 2 | Cherry | 200 |
Dalam contoh ini, console.table() menampilkan item array dalam format tabel. Ini membuatnya lebih mudah untuk memeriksa struktur data secara visual dan meningkatkan efisiensi debugging.
5.3. Menangani Objek dengan Referensi Sirkular
Dalam JavaScript, jika sebuah objek berisi referensi sirkular, menggunakan JSON.stringify() secara langsung akan melemparkan kesalahan.
Contoh: Kesalahan Referensi Sirkular
const objA = {};
const objB = { a: objA };
objA.b = objB;
console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSON
Dalam kasus ini, Anda dapat menyelesaikan masalah dengan menggunakan pustaka pihak ketiga atau mengimplementasikan fungsi kustom untuk menangani referensi sirkular.
Contoh Solusi: Menggunakan Pustaka flatted
const { stringify } = require("flatted");
console.log(stringify(objA));
Pendekatan ini memungkinkan Anda untuk stringify objek yang berisi referensi sirkular dengan aman.
5.4. Mendapatkan Hanya Kunci dari Objek atau Array
Saat mengeksplorasi struktur data, juga berguna untuk mengekstrak dan menampilkan hanya kunci atau nilai.
Mendapatkan Daftar Kunci:
const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]
Mendapatkan Daftar Nilai:
console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]
Mendapatkan Pasangan Kunci-Nilai:
console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]
Metode-metode ini membantu untuk menganalisis data dan mengekstrak informasi spesifik secara efisien.
6. Kesalahan Umum dan Perbaikannya
6.1. Kesalahan Referensi Sirkular: “Mengonversi struktur sirkular ke JSON”
Pesan Kesalahan:
TypeError: Converting circular structure to JSON
Penyebab:
Ini terjadi ketika properti sebuah objek merujuk kembali ke objek yang sama, menciptakan struktur sirkular.
Contoh:
const objA = {};
const objB = { parent: objA };
objA.child = objB;
console.log(JSON.stringify(objA)); // Error occurs
Solusi 1: Gunakan Fungsi Serialisasi Kustom
function safeStringify(obj) {
const seen = new WeakSet();
return JSON.stringify(obj, (key, value) => {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) return "[Circular]";
seen.add(value);
}
return value;
});
}
console.log(safeStringify(objA));
// Output: {"child":{"parent":"[Circular]"}}
Solusi 2: Gunakan Pustaka Pihak Ketiga
Jika Anda menggunakan pustaka yang dirancang untuk referensi sirkular, seperti flatted, Anda dapat menghindari kesalahan ini dengan lebih mudah.
const { stringify } = require("flatted");
console.log(stringify(objA));
Pendekatan ini memungkinkan Anda menangani struktur sirkular yang kompleks dengan aman menggunakan bantuan pustaka.
6.2. Kesalahan Saat Menangani undefined atau null
Contoh Kesalahan:
const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefined
Penyebab:
Mencoba mengakses properti pada undefined atau null menghasilkan kesalahan.
Solusi: Gunakan Optional Chaining
const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)
Optional chaining (?.) memungkinkan akses aman bahkan ketika objek tidak ada.
6.3. Kesalahan Properti Tidak Terdefinisi
Contoh Kesalahan:
const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefined
Penyebab:
Ini terjadi ketika Anda mencoba mengakses properti yang tidak ada.
Solusi 1: Tetapkan Nilai Default
console.log((obj.value || "default").toString()); // Output: default
Solusi 2: Gabungkan Optional Chaining dan Nullish Coalescing
console.log(obj.value?.toString() ?? "default"); // Output: default
Ini membuat akses properti lebih aman dan mencegah kesalahan runtime.
6.4. Kesalahan Saat Menggunakan Object.assign()
Contoh Kesalahan:
const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to object
Penyebab:
Object.assign() memerlukan sebuah objek sebagai argumen pertama, sehingga memberikan null atau undefined menyebabkan kesalahan.
Solusi:
Berikan objek kosong sebagai nilai awal.
const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }
6.5. Kesalahan JSON.parse: “Unexpected token”
Contoh Kesalahan:
const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSON
Penyebab:
JSON memiliki aturan sintaks yang ketat. Menggunakan tanda kutip tunggal atau menghilangkan kutipan di sekitar kunci membuatnya menjadi JSON yang tidak valid.
Solusi:
Perbaiki string menjadi format JSON yang valid.
const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }
7. Ringkasan
Dalam artikel ini, kami membahas masalah tampilan “[object Object]” yang umum di JavaScript, termasuk mengapa hal itu terjadi dan cara memperbaikinya dengan solusi praktis. Mari tinjau poin-poin utama dan susun apa yang telah kami pelajari.
7.1. Apa yang Dimaksud dengan ‘[object Object]’
- Objek JavaScript secara default dikonversi menjadi string menggunakan metode
toString(). - Akibatnya, objek biasa ditampilkan dalam format “[object Object]”.
7.2. Cara Menampilkan Konten Objek dengan Benar
Kami memperkenalkan beberapa pendekatan praktis untuk memeriksa dan menampilkan data objek dengan lebih jelas.
JSON.stringify()untuk mengonversi objek menjadi string yang dapat dibaca:
- Menampilkan objek dalam format JSON dan mendukung pretty printing (output terformat).
console.dir()untuk inspeksi objek hierarkis:
- Memungkinkan Anda menjelajahi struktur objek secara detail di DevTools.
- Menerapkan metode
toString()khusus:
- Memungkinkan Anda mendefinisikan format tampilan sendiri untuk objek.
- Menggunakan loop dan
Object.entries():
- Mengekstrak kunci dan nilai untuk mencetaknya secara manual.
7.3. Kasus Penggunaan Lanjutan dan Penanganan Objek Kompleks
- Objek dan array bersarang:
JSON.stringify()danconsole.table()membantu menampilkan data dalam format yang bersih dan mudah dibaca. - Cara menangani kesalahan referensi sirkular:
- Gunakan fungsi khusus atau pustaka pihak ketiga untuk menghindari kegagalan.
- Ekstraksi data yang efisien:
- Gunakan
Object.keys(),Object.values(), danObject.entries()untuk mengambil informasi secara efisien.
7.4. Pencegahan Kesalahan dan Tips Debugging
Kami juga menjelaskan kesalahan umum yang terkait dengan operasi objek dan cara memperbaikinya.
- Kesalahan referensi sirkular:
- Tangani dengan serializer khusus atau pustaka.
- Kesalahan saat mengakses undefined atau null:
- Gunakan optional chaining dan tetapkan nilai default.
- Kesalahan JSON.parse:
- Pastikan string tersebut berformat JSON yang valid.
Dengan menerapkan teknik-teknik ini, Anda dapat mencegah kesalahan sebelumnya dan membuat proses debugging jauh lebih lancar.
7.5. Pemikiran Akhir
Objek JavaScript adalah alat yang kuat untuk mengelola data secara fleksibel. Namun, tanpa memahami cara kerja objek, Anda mungkin menghadapi masalah tampilan seperti “[object Object]” atau kesalahan runtime yang tidak terduga.
Gunakan teknik dan strategi penanganan kesalahan yang diperkenalkan dalam artikel ini untuk menulis kode yang lebih bersih, aman, dan efisien.
Langkah Selanjutnya:
- Untuk memperdalam pemahaman Anda tentang penanganan objek, periksa artikel terkait dan dokumentasi resmi.
- Tulis dan jalankan kode nyata untuk mengonfirmasi perilaku dan memperkuat keterampilan Anda.
Itulah penjelasan kami tentang masalah tampilan objek JavaScript. Terima kasih telah membaca!
