console.log(data)를 찍었을 때 data: [object Object]로 나오는 문제

자바스크립트에서 데이터의 내용을 확인하고 싶어 console.log(data)를 찍는 경우가 있다

이 때 data: [object Object] 의 형태로 객체의 내용을 볼 수 없을 때가 있는데

Why?

그 이유는 데이터가 json형태의 객체이기 때문이다.  => 다시 알아보니 그 이유가 아니였다. 

콘솔로그를 찍을 때 다른 로그들과 구분해주기 위해 데이터 앞에 문자("data: ")를 넣어줬는데

console.log("data: " + data);

여기서 뒤의 data와 연결해주기 위해 "+"를 삽입했다, 이 부분이 문제가 된 것이다.

그 이유는? 
숫자에 적용되는 "+" 연산자 오른쪽에 오는 값이 object인 경우에 자동으로 toString()메서드를 호출 해준다.
그 이유로  오른쪽에 오는 object값을 toString()메서드가 문자화 시키기 때문에 [object Object]의 형태로 출력되는 것이다. 

그냥 console.log()에 순수 데이터(data)만 넣어서 출력하면 데이터가 문제없이 출력된다.

console.log("data: " + data); 
// data: [object Object],[object Object]

console.log(data);
// [ { itemId: 1, quantity: 2 }, { itemId: 2, quantity: 5 } ]

console.log("data: ", data); 
// data: [ { itemId: 1, quantity: 2 }, { itemId: 2, quantity: 5 } ]

정리하자면 

1. 일반적으로는 콘솔로그 안에 데이터만 넣으면 잘 출력되고 

console.log(data)

 

2. 문자와 함께 출력하고 싶을 때 "+"를 사용한다면 위의 형태로 콘솔로그를 찍어야 하고 

console.log("data: " + JSON.stringify(data));

 

3. 다른 방법으로는 문자 뒤에 " + "가 아닌 " , "(쉼표)를 붙여야 객체가 제대로 출력된다.

console.log("data: ", data);

---

(추가 +)

console.dir(data)

위의 형태로도 확인할 수 있다고 한다. 자세한 건 추후에 추가