[JavaScript] 객체를 출력하는 방법

일반적으로 서버 요청을 통해 받은 데이터는 JSON 형태의 객체로 들어온다. 이를 console.log 로 출력해보려고 하면 예상과 다르게 [object Object] 라고만 출력될 때가 있다. 문자열이나 숫자를 출력할 때에는 문제가 없었는데, 뭔가 구조화된 객체를 출력하려고만 하면 이런 이상한 로그가 찍힌다. 이 로그의 정체는 무엇이며, JavaScript 객체의 내용은 어떻게 출력해서 확인해볼 수 있을까? 

 

[object Object] 란 무엇인가

JavaScript의 자료형은 크게 두 가지로 나뉜다. 오직 하나의 데이터만 담을 수 있는 원시형(primitive)과, 다양한 데이터를 담을 수 있는 객체형(object)이다. string, number, boolean 등의 원시형 데이터들은 string으로 변환 시 본래의 데이터를 그대로 보여준다. 반면 객체형 데이터의 경우, string으로 변환 시 [object Object]를 리턴하는 것이 default이다. 모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있다. 따라서 문자열의 형태로 콘솔에 값을 출력시키는 console.log에 객체를 담을 경우, 콘솔에는 구조에 맞는 데이터가 아닌 [object Object]가 찍히게 된다.

그렇다면 왜 [object]가 아닌, [object Object]라는 이상한 형태로 출력되는 것일까? JavaScript에는 다양한 형태의 객체들이 존재하기 때문이다. 다음은 다양한 형태의 객체가 stringify() 함수를 통해 어떻게 리턴되는지 보여주는 코드다. 

// stringfy를 다음과 같이 정의해보자
function stringify (x) {
    console.log(Object.prototype.toString.call(x));
}

// Function objects
stringify(function (){}); 
// Output: [object Function]

// Array objects
stringify([]);
// Output: [object Array]

// RegExp objects
stringify(/x/);
// Output: [object RegExp]

// Date objects
stringify(new Date);
// Output: [object Date]

// Object objects
stringify({});
// Output: [object Object]

모든 객체에 상속되는 toString() 메서드는 특별히 overriding되지 않는 이상 “[object type]”을 반환한다. 여기서 type은 object type이며, 따라서 리턴값의 두 번째에 오는 값은 Function, Array, Object 등 객체의 타입이 된다. 

 

자바스크립트에선 배열도 함수도...전부 다 객체다!

그렇다면 객체 내부 컨텐츠를 어떻게 출력할 수 있을까

[object type]이 아닌, 객체의 내부 컨텐츠를 출력할 수 있는 방법은 바로 JSON.stringify() 메서드를 사용하는 것이다. 다음과 같이 자바스크립트 객체를 JSON string 형태로 바꿔주는 JSON.stringify() 함수를 통해 문자열로 변환된 데이터를 도출해낼 수 있다. 데이터를 그대로 출력해주는 Window.alert() 또는 Console.log()와 사용할 수 있다.

alert(JSON.stringfy(obj));
console.log(JSON.stringfy(obj));

객체를 로깅할 때 또 한가지 좋은 방법은 console.log() 대신 console.dir() 메서드를 사용하는 것이다. console.log는 데이터를 HTML과 같은 트리 구조로 출력하는 반면, console.dir은 데이터를 JSON과 같은 트리 구조로 출력한다. 따라서 JSON 객체를 콘솔에서 확인하고 싶을 때에는 console.dir() 메서드를 사용하는 것이 가독성이 더 좋다. 

 

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

https://stackoverflow.com/questions/4750225/what-does-object-object-mean

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify