💡 한줄 답변: 객체를 문자열로 강제 변환할 때 기본 toString()이 호출되어 발생하므로 JSON.stringify()를 사용해야 합니다.
📌 핵심 요약- 객체를 문자열과 덧셈 연산자로 합치거나 템플릿 리터럴에 직접 넣으면 [object Object]가 출력됩니다.
- 디버깅 시에는 console.log 안에서 더하기 대신 쉼표(,)를 사용해 객체 트리를 확인해야 합니다.
- 화면에 객체 구조를 그대로 나타내려면 JSON.stringify 메서드를 사용하고, 단일 값은 개별 속성명으로 접근합니다.
자바스크립트 개발 중 화면이나 로그에 [object Object]라는 문구가 나타나는 이유는 객체 타입 데이터를 일반 문자열로 잘못 결합했기 때문입니다. API 응답 데이터를 템플릿 리터럴이나 innerText로 화면에 출력하려다 당황하는 개발자가 많습니다.
이번 글에서는 이 현상이 발생하는 표준 내부 동작 원리와 실제 현업에서 안전하게 해결하는 단계별 대응법을 다룹니다.
01발생 지점을 파악하는 단계별 디버깅 순서
➤ 데이터가 브라우저 DOM이나 템플릿에 도달하기 전 콘솔 분리 출력과 브레이크포인트로 데이터 타입을 확인해야 합니다.
- 1단계: 오류가 표시된 화면 요소와 연결된 템플릿 바인딩 코드나 문자열 결합 위치를 식별합니다.
- 2단계: 데이터 바인딩 직전에 console.log('검사 변수:', data) 형태로 쉼표를 사용해 실제 객체 구조를 분리 출력합니다.
- 3단계: 브라우저 개발자 도구의 Sources 탭에서 중단점을 설정하고 변수의 typeof 결과가 'object'인지 확인합니다.
- 4단계: 객체 내부의 특정 키(예: data.name)를 렌더링하려던 것인지, 전체 데이터를 직렬화하려던 것인지 의도를 구분합니다.
02상황에 맞는 3가지 해결 절차
➤ 객체 내용 전체를 보여주려면 JSON.stringify를 적용하고 특정 값만 필요하다면 프로퍼티 키로 직접 접근해야 합니다.
- 방법 1 (전체 내용 출력): JSON.stringify(targetObject, null, 2)를 적용해 객체를 읽기 쉬운 포맷의 JSON 텍스트로 직렬화하여 바인딩합니다.
- 방법 2 (특정 프로퍼티 추출): 객체 자체 대신 targetObject.title 또는 targetObject?.data?.name 처럼 옵셔널 체이닝으로 개별 문자열 프로퍼티에 접근합니다.
- 방법 3 (커스텀 문자열 정의): 클래스나 객체 내부에서 직접 toString() 메서드를 재정의하여 원하는 규격화된 문자열이 반환되도록 설정합니다.
03자주 묻는 [object Object] 발생 의문점
➤ 자바스크립트 엔진이 객체를 원시 문자열로 형변환할 때 Object.prototype.toString 메서드가 자동 실행되어 발생합니다.
Q. 화면에 왜 데이터 대신 [object Object]라는 글자만 나오나요?
A. 자바스크립트 템플릿 리터럴(`${obj}`)이나 덧셈 연산자('결과: ' + obj)를 사용하면 객체가 강제로 문자열로 변환됩니다. 이때 기본 내장 메서드인 Object.prototype.toString()이 호출되어 해당 문자열이 반환되는 것입니다.
Q. console.log로 찍어도 가끔 똑같이 나오는 이유는 무엇인가요?
A. console.log('결과: ' + data)처럼 문자열과 객체를 더하기 연산자로 연결하면 객체가 이미 문자열로 변환된 뒤 출력되기 때문입니다. 쉼표(,)를 사용해 console.log('결과:', data) 형태로 인자를 분리해야 객체의 세부 속성을 검사할 수 있습니다.
Q. React나 Vue 같은 프론트엔드 프레임워크에서도 발생하나요?
A. 네, JSX나 템플릿 문법 내부에서 원시값(문자열, 숫자) 대신 객체 자체({user})를 자식 요소로 직접 렌더링하려고 시도할 때 흔히 발생하거나 렌더링 에러를 유발합니다.
04자바스크립트 객체 직렬화 핵심 비교 지표
➤ JSON 직렬화 및 원시 객체 변환 시 표준 메서드의 특성을 숙지하면 오류를 사전 차단할 수 있습니다.
05자바스크립트 암묵적 형변환과 toString 동작 원리
➤ 자바스크립트 명세상 객체는 문자열 컨텍스트에서 Symbol.toPrimitive 또는 toString 메서드를 순차 탐색하여 기본 식별자를 반환합니다.
자바스크립트의 모든 일반 객체는 Object 프로토타입을 상속받으며, 기본적으로 toString 메서드를 내장하고 있습니다. 명시적으로 오버라이딩하지 않은 일반 객체에서 toString을 호출하면 내부 슬롯인 [[Class]]를 참조하여 '[object ' + type + ']' 형식의 문자열을 생성합니다(출처: MDN Web Docs).
따라서 개발자가 기대한 JSON 형태의 키-값 쌍 대신 자바스크립트 런타임의 타입 식별 문자열이 그대로 노출됩니다. 이를 방지하려면 객체를 문자열 문맥에 직접 노출하지 않고 명시적으로 직렬화하거나 필요한 하위 프로퍼티에 접근해야 합니다.
06데이터 수신부터 화면 렌더링까지의 표준 작업 흐름
➤ API 응답 객체는 수신 즉시 구조 분해 또는 직렬화를 거쳐 뷰 레이어로 안전하게 전달되어야 합니다.
- 1API 응답 수신
fetch 또는 axios를 통해 백엔드 서버로부터 JSON 규격의 데이터를 전달받아 자바스크립트 객체로 파싱합니다. - 2데이터 유효성 검증
응답 객체가 정상적인 배열 또는 단일 객체인지 확인하고 null이나 undefined 예외를 방어합니다. - 3필요 필드 추출 및 가공
화면에 표기할 핵심 프로퍼티만 객체 구조 분해 할당(Destructuring)으로 추출하여 원시값 형태로 변환합니다. - 4안전한 DOM 바인딩
단일 텍스트는 원시값 변수를 바인딩하고, 디버깅 목적의 전체 뷰는 JSON.stringify를 통해 안전하게 렌더링합니다.
정리하며
지금 작성 중인 코드에서 객체 변수가 문자열과 '+' 기호로 연결되어 있는지 점검하고, 화면 출력 부모 요소를 JSON.stringify 또는 개별 프로퍼티 참조로 즉시 교체해 보시기 바랍니다.
- 자주 묻는 [object Object] 발생 의문점
- 자바스크립트 암묵적 형변환과 toString 동작 원리
- 발생 지점을 파악하는 단계별 디버깅 순서
- 데이터 수신부터 화면 렌더링까지의 표준 작업 흐름
- 상황에 맞는 3가지 해결 절차
- 자바스크립트 객체 직렬화 핵심 비교 지표
자주 묻는 질문 (FAQ)
Q. [object Object]가 폼 전송 데이터에 들어가는 이유는 무엇인가요?
A. HTML FormData 객체에 자바스크립트 객체를 append 할 때 자동으로 문자열 변환이 발생하기 때문입니다. 객체는 JSON.stringify를 통해 텍스트로 변환한 후 전송해야 서버에서 정상 수신할 수 있습니다.
Q. 배열(Array)을 문자열과 더하면 왜 [object Object]가 안 나오나요?
A. 배열은 Array.prototype.toString 메서드가 재정의되어 있어 원소들을 쉼표로 연결한 문자열(join)을 반환하기 때문입니다. 단, 배열 원소가 일반 객체라면 배열 내부에 [object Object]가 포함되어 출력될 수 있습니다.
Q. JSON.stringify를 썼는데도 빈 객체 {}로 나오는 이유는 무엇인가요?
A. 객체의 프로퍼티가 함수(Function), 심볼(Symbol), 또는 undefined인 경우 JSON 직렬화 대상에서 자동 제외되기 때문입니다. 순환 참조(Circular Reference)가 있는 객체 역시 직렬화 시 런타임 오류가 발생하므로 주의해야 합니다.
Q. HTML 태그 속성에 객체를 넣으려면 어떻게 해야 하나요?
A. 태그의 dataset 속성에 넣을 때는 JSON.stringify로 변환해 저장하고, 읽어올 때는 JSON.parse를 적용해야 객체 원형을 복원할 수 있습니다.
Q. Object.prototype.toString.call(value) 코드는 왜 자주 쓰이나요?
A. 자바스크립트에서 배열, 날짜, 정규식 등 세부 객체 타입을 정확하게 판별하기 위해 빌트인 슬롯을 조회하는 표준 관용구로 널리 활용됩니다.
출처
- MDN Web Docs, Object.prototype.toString() 명세 및 가이드 (확인일자: 2026-10-06)
- W3C, ECMAScript 및 웹 API 기술 표준 (확인일자: 2026-10-06)
댓글 쓰기