1. Introduction
JavaScript로 프로그램을 작성할 때 객체를 출력하려고 하면 “[object Object]” 라는 문자열이 보이는 경우가 있습니다. 이는 JavaScript 객체를 포맷 없이 직접 출력할 때 흔히 발생하는 상황입니다.
이 글에서는 “[object Object]” 가 실제로 무엇을 의미하는지, 그리고 객체의 내용을 읽기 쉽게 표시하는 올바른 방법을 설명합니다.
본 가이드는 초급부터 중급 개발자를 대상으로 하며, 실용적인 예제와 코드 스니펫을 포함해 주제를 보다 깊이 이해할 수 있도록 돕습니다.
2. What Is ‘[object Object]’?
JavaScript에서 객체를 문자열로 변환하려고 하면 기본 동작으로 “[object Object]” 가 출력되는 경우가 많습니다. 이 출력은 값에 대한 타입 정보를 나타내지만, 객체의 실제 내용은 보여주지 않습니다.
Why Does ‘[object Object]’ Appear?
JavaScript 객체는 기본 toString() 메서드를 가지고 있습니다. 객체가 문자열로 취급될 때마다 이 메서드가 호출됩니다. 그러나 JavaScript 표준 사양에 따르면, 객체는 문자열로 변환될 때 기본적으로 다음 형식으로 반환됩니다.
console.log({}); // Output: [object Object]
이 동작은 타입 정보를 “object” 로만 표시하고, 객체 내부의 키나 값에 대한 상세 정보를 포함하지 않습니다. 따라서 개발자는 객체 데이터를 올바르게 검사하고 표시하기 위해 다른 방법을 사용해야 합니다.
3. Why ‘[object Object]’ Appears
The Role of the toString() Method
모든 JavaScript 객체는 Object.prototype.toString() 메서드를 상속받습니다. 이 메서드는 객체가 문자열로 변환될 때 자동으로 호출됩니다.
기본 동작을 확인하려면 다음 코드를 살펴보세요:
const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]
보시다시피, toString() 은 기본 객체에 대해 “[object Object]” 를 반환하도록 설계되어 있습니다.
Examples Caused by Implicit Type Coercion
객체를 문자열과 연결할 때도 동일한 동작이 발생합니다.
const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]
이 예제에서 obj 가 문자열로 변환되고, 내부적으로 toString() 이 호출되어 “[object Object]” 라는 출력이 생성됩니다. 
4. How to Avoid ‘[object Object]’
4.1. Convert Objects to Strings with JSON.stringify()
가장 쉽고 일반적인 방법은 JSON.stringify() 를 사용해 객체를 JSON 형식 문자열로 변환하는 것입니다.
Example: Basic JSON.stringify Usage
const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}
위 코드에서는 객체의 키와 값이 정확히 JSON 형식으로 표시됩니다.
Pretty Printing (With Indentation)
가독성을 높이기 위해 들여쓰기를 포함한 포맷된 JSON을 출력할 수도 있습니다.
console.log(JSON.stringify(obj, null, 2));
Output:
{
"key": "value",
"id": 123
}
JSON.stringify() 는 복잡한 객체와 중첩 구조를 깔끔하게 포맷할 수 있기 때문에 디버깅에 매우 유용합니다.
4.2. Inspect Objects in Detail with console.dir()
console.dir() 를 사용하면 객체의 속성과 메서드를 계층 구조로 검사할 수 있습니다.
Example: How to Use console.dir
const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);
이 출력은 DevTools 내에서 객체 구조를 확장하고 상세히 확인할 수 있는 형태로 표시됩니다.
Difference Between console.dir and console.log:
console.log(obj)은 객체를 한 줄 형태로 표시하므로 복잡한 구조를 검사하기에 적합하지 않습니다.console.dir(obj)은 계층 구조를 유지하여 중첩된 객체와 배열을 검사할 때 유용합니다.
4.3. Implement a Custom toString() Method
객체에 자체 toString() 메서드를 정의하면 기본 “[object Object]” 출력 방식을 커스터마이즈할 수 있습니다.
Example: Custom toString Implementation
const obj = {
key: "value",
id: 123,
toString() {
return `Key: ${this.key}, ID: ${this.id}`;
},
};
console.log(obj.toString()); // Output: Key: value, ID: 123
이 접근 방식을 사용하면, 객체가 문자열로 처리될 때 기본값 대신 사용자 지정 형식을 출력합니다.
4.4. for…in 루프를 사용한 객체 내용 출력
다른 옵션은 객체의 키와 값을 반복하여 수동으로 출력하는 것입니다.
예제: for…in 루프 사용
const obj = { key: "value", id: 123 };
for (const key in obj) {
console.log(`${key}: ${obj[key]}`);
}
출력:
key: value
id: 123
이 접근 방식은 간단하고 사용자 지정이 쉽기 때문에 작은 객체를 빠르게 검사하는 데 적합합니다.
4.5. Object.entries() 또는 Object.keys() 사용
ES6부터 JavaScript는 키와 값을 배열로 추출하는 메서드를 제공합니다.
예제: Object.entries 사용
const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));
출력:
[ [ 'key', 'value' ], [ 'id', 123 ] ]
키-값 쌍을 배열로 얻음으로써 배열 메서드를 활용하여 추가 처리를 할 수 있습니다.
5. 고급 예제: 복잡한 객체와 배열 표시
5.1. 중첩된 객체 표시
객체가 다른 객체를 포함할 때, 내용을 명확하게 표시하는 쉬운 방법을 살펴보겠습니다.
예제: 중첩된 객체 표시
const data = {
user: {
name: "John",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
},
hobbies: ["reading", "traveling"],
};
console.log(JSON.stringify(data, null, 2));
출력:
{
"user": {
"name": "John",
"age": 30,
"address": {
"city": "Tokyo",
"country": "Japan"
}
},
"hobbies": [
"reading",
"traveling"
]
}
위에 보여진 바와 같이, JSON.stringify()를 사용하면 중첩된 객체의 구조를 쉽게 이해할 수 있습니다.
5.2. 배열을 포함하는 객체 표시
객체가 배열을 포함하는 경우, 비슷한 방식으로 처리할 수 있습니다.
예제: 배열이 포함된 객체 표시
const order = {
id: 101,
items: [
{ name: "Apple", price: 150 },
{ name: "Banana", price: 100 },
{ name: "Cherry", price: 200 },
],
total: 450,
};
console.table(order.items);
출력:
| (index) | name | price |
|---|---|---|
| 0 | Apple | 150 |
| 1 | Banana | 100 |
| 2 | Cherry | 200 |
이 예제에서 console.table()은 배열 항목을 테이블 형식으로 표시합니다. 이는 데이터 구조를 시각적으로 검사하기 쉽게 하고 디버깅 효율성을 향상시킵니다.
5.3. 순환 참조가 있는 객체 처리
JavaScript에서 객체가 순환 참조를 포함하는 경우, JSON.stringify()를 직접 사용하면 오류가 발생합니다.
예제: 순환 참조 오류
const objA = {};
const objB = { a: objA };
objA.b = objB;
console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSON
이 경우, 타사 라이브러리를 사용하거나 순환 참조를 처리하는 사용자 지정 함수를 구현하여 문제를 해결할 수 있습니다.
솔루션 예제: flatted 라이브러리 사용
const { stringify } = require("flatted");
console.log(stringify(objA));
이 접근 방식은 순환 참조를 포함하는 객체를 안전하게 문자열로 변환할 수 있게 합니다.
5.4. 객체 또는 배열에서 키만 가져오기
데이터 구조를 탐색할 때, 키나 값만 추출하여 표시하는 것도 유용할 수 있습니다.
키 목록 가져오기:
const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]
값 목록 가져오기:
console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]
키-값 쌍 가져오기:
console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]
이러한 메서드는 데이터를 분석하고 특정 정보를 효율적으로 추출하는 데 도움이 됩니다.
6. 일반적인 오류와 수정
6.1. 순환 참조 오류: “Converting circular structure to JSON”
오류 메시지:
TypeError: Converting circular structure to JSON
원인:
객체 속성이 동일한 객체를 다시 참조하여 순환 구조를 만들 때 발생합니다.
예시:
const objA = {};
const objB = { parent: objA };
objA.child = objB;
console.log(JSON.stringify(objA)); // Error occurs
해결 방법 1: 사용자 정의 직렬화 함수 사용
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]"}}
해결 방법 2: 서드파티 라이브러리 사용
순환 참조를 처리하도록 설계된 라이브러리, 예를 들어 flatted 를 사용하면 이 오류를 보다 쉽게 피할 수 있습니다.
const { stringify } = require("flatted");
console.log(stringify(objA));
이 방법을 사용하면 라이브러리의 도움으로 복잡한 순환 구조를 안전하게 처리할 수 있습니다.
6.2. undefined 또는 null 처리 시 오류
오류 예시:
const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefined
원인:
undefined 또는 null 에서 속성을 접근하려 하면 오류가 발생합니다.
해결 방법: 옵셔널 체이닝 사용
const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)
옵셔널 체이닝 (?.) 은 객체가 존재하지 않을 때도 안전하게 접근할 수 있게 해줍니다.
6.3. 정의되지 않은 속성 오류
오류 예시:
const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefined
원인:
존재하지 않는 속성에 접근하려 할 때 발생합니다.
해결 방법 1: 기본값 설정
console.log((obj.value || "default").toString()); // Output: default
해결 방법 2: 옵셔널 체이닝과 Nullish Coalescing 결합
console.log(obj.value?.toString() ?? "default"); // Output: default
이렇게 하면 속성 접근이 더 안전해지고 런타임 오류를 방지할 수 있습니다.
6.4. Object.assign() 사용 시 실수
오류 예시:
const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to object
원인:
Object.assign() 은 첫 번째 인자로 객체가 필요하므로 null 또는 undefined 를 전달하면 오류가 발생합니다.
해결 방법:
초기값으로 빈 객체를 전달합니다.
const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }
6.5. JSON.parse 오류: “Unexpected token”
오류 예시:
const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSON
원인:
JSON 은 엄격한 구문 규칙을 가지고 있습니다. 작은 따옴표를 사용하거나 키에 따옴표를 생략하면 유효한 JSON 이 아닙니다.
해결 방법:
문자열을 올바른 JSON 형식으로 수정합니다.
const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }
7. 요약
이 글에서는 JavaScript에서 흔히 발생하는 “[object Object]” 표시 문제를 다루었으며, 발생 원인과 실용적인 해결 방법을 소개했습니다. 주요 포인트를 다시 살펴보고 배운 내용을 정리해 보겠습니다.
7.1. ‘[object Object]’ 가 실제 의미하는 바
- JavaScript 객체는 기본적으로
toString()메서드를 사용해 문자열로 변환됩니다. - 따라서 일반 객체는 “[object Object]” 형식으로 표시됩니다.
7.2. 객체 내용을 올바르게 표시하는 방법
우리는 객체 데이터를 보다 명확하게 검사하고 표시하기 위한 실용적인 접근법을 여러 가지 소개했습니다.
JSON.stringify()를 사용해 객체를 읽기 쉬운 문자열로 변환하기:
- 객체를 JSON 형식으로 표시하고, pretty printing(포맷된 출력)을 지원합니다.
console.dir()를 사용한 계층적 객체 검사:
- DevTools에서 상세 객체 구조를 시각적으로 탐색할 수 있습니다.
- 사용자 정의
toString()메서드 구현:
- 객체의 표시 형식을 직접 정의할 수 있습니다.
- 루프와
Object.entries()사용:
- 키와 값을 추출하여 직접 출력할 수 있습니다.
7.3. 고급 사용 사례 및 복합 객체 처리
- 중첩 객체와 배열:
JSON.stringify()와console.table()을 사용하면 데이터를 깔끔하고 읽기 쉬운 형식으로 표시할 수 있습니다. - 순환 참조 오류 처리 방법:
- 실패를 방지하기 위해 사용자 정의 함수나 서드파티 라이브러리를 사용합니다.
- 효율적인 데이터 추출:
Object.keys(),Object.values(),Object.entries()를 활용해 정보를 효율적으로 가져옵니다.
7.4. 오류 방지 및 디버깅 팁
객체 연산에 관련된 일반적인 오류와 해결 방법을 설명했습니다.
- 순환 참조 오류:
- 맞춤 직렬화기나 라이브러리를 사용해 처리합니다.
- undefined 또는 null 접근 오류:
- 옵셔널 체이닝을 사용하고 기본값을 설정합니다.
- JSON.parse 오류:
- 문자열이 올바른 JSON 형식인지 확인합니다.
이러한 기법을 적용하면 오류를 사전에 방지하고 디버깅을 훨씬 원활하게 할 수 있습니다.
7.5. 최종 생각
JavaScript 객체는 데이터를 유연하게 관리할 수 있는 강력한 도구입니다. 하지만 객체가 어떻게 동작하는지 이해하지 못하면 “[object Object]”와 같은 표시 문제나 예상치 못한 런타임 오류가 발생할 수 있습니다.
이 글에서 소개한 기법과 오류 처리 전략을 활용해 더 깔끔하고 안전하며 효율적인 코드를 작성하세요.
다음 단계:
- 객체 처리에 대한 이해를 심화하려면 관련 기사와 공식 문서를 확인하세요.
- 실제 코드를 작성하고 실행해 동작을 확인하며 실력을 강화하세요.
여기까지가 JavaScript 객체 표시 문제에 대한 설명입니다. 읽어 주셔서 감사합니다!
