객체와 문자열의 합

아고라에서 답변 올리다가 겪은 내용이다. object 타입 변수를 템플릿 리터럴로 표현하니까 원하지 않은 결과가 출력됐다.

원인을 찾아보니 문자열과 객체의 합연산은 형변환이 일어나서 String(obj) 후 연산이 된다. 해당 현상을 해결하려면 먼저 객체를 JSON 문자열로 변환한 후 합연산을 해야한다. JSON.stringhify()

let obj = { a: 1, b: 2 };
console.log(`${obj}`); // [object Object]
console.log('' + obj); // [object Object]
console.log('', obj); // { a: 1, b: 2 }
console.log(`${JSON.stringify(obj)}`); // { "a": 1,"b": 2 }

Agorastates

https://github.com/codestates/agora-states/discussions/1153

Q. 어떠한 부분에서 이해가 안 되었나요?

console.log(현재 obj는 ${obj}); -> 현재 obj는 [object Object] 라고 출력되고
console.log(obj); -> {b: 1} 이런식으로 출력되는데
차이점을 알고 싶습니다

A. 안녕하세요. 객체가 문자열 함수로 변환되어서 [object Object] 라는 결과가 나오는 것 같습니다. String(obj)를 실행하면 [object Object] 값이 반환됩니다.
String 타입 + Object 타입 계산 시 toString 메소드가 불러져서 위와 같은 결과가 나오는 것 같습니다. 객체를 JSON 문자열로 치환해서 객체의 내용을 형변환 후 템플릿 리터럴의 문자열과 합연산하면 깔끔하게 해결될 것 같습니다.
JSON.stringify 관련하여 찾아보세요.

참조 URL

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

https://okky.kr/article/570916

https://jaimemin.tistory.com/1535