JavaScript에서 console.log에 객체를 출력하면 [object Object]로 표시 될 때

개발자 모드로 console 내용 보려고 할때 아래처럼 object로 표시가 된다면 코드에 JSON.stringify 추가 하시면 됩니다. 

 

변경 전:

 console.log("유저 정보: " + response.data);

변경 후:

    console.log("유저 정보: " + JSON.stringify(response.data));

이런식으로 이제 잘 보이는 것을 봀 수 있습니다.

이유는 다음과 같습니다. 
JavaScript에서 console.log에 객체를 출력하면 [object Object]로 표시되는 것은 객체를 문자열로 변환할 때 기본적으로 toString() 메서드가 호출되기 때문입니다. 이를 해결하려면 객체의 내용을 명시적으로 출력해야 합니다.

JSON.stringify는 JavaScript 객체를 JSON 형식의 문자열로 변환하는 함수입니다. 이 함수는 브라우저 콘솔에서 객체의 내용을 문자열로 명시적으로 출력하거나, 데이터를 JSON 포맷으로 변환하여 전송할 때 유용합니다.

 

역할 및 기능

객체를 JSON 문자열로 변환

JSON.stringify는 객체를 JSON 표기법에 맞는 문자열로 변환합니다.

 

사용 시 주의 사항

1. 순환 참조 객체 변환 불가
   • 순환 참조가 있는 객체는 변환할 수 없습니다.
   • 예: 객체 내부에서 자신을 참조하는 경우.
2. 함수와 undefined는 변환되지 않음
   • JSON.stringify는 함수와 undefined 값을 변환에서 제외합니다.

요약

JSON.stringify는 JavaScript 객체를 JSON 문자열로 변환하여 다음과 같은 용도로 사용됩니다:

1. 서버와의 데이터 교환 (HTTP 요청에서 데이터 전송).
2. 디버깅 (객체 내용을 문자열로 출력).
3. 데이터 저장 (로컬 스토리지 등에 JSON 형식으로 저장).
4. 필드 필터링 및 포맷팅.

이 함수는 JSON 형식의 데이터를 다루는 모든 웹 애플리케이션에서 중요한 역할을 합니다