JS는 {변수}로 사용하면 객체가 나오나요?

Question

React를 급하게 독학하고 있는데 JS 문법에서 막혀서 여쭤봅니다. 강의들 찾아보면 {}를 사용해서 변수처럼 쓸 수 있는데 (ex.

{contents}

) 이걸 JS 표현식이라고 해서 JS 문법이라고 들었습니다. 일반적으로 객체를 변수에 할당시키면 리터럴이 아니라 주소가 담기잖아요. 왜 a를 찍는데 객체 리터럴이 보이고, {a}를 하면 객체 value로 객체가 들어가는 것처럼 표현되나요? 이 개념 찾아보고 싶은데, 뭐라고 검색해야 되는지 막막합니다... -------------------------------- let a = {a:asfd, b:erw}; let b = ast; console.log(a); // 출력1: { a: asfd, b: erw } console.log(b); // 출력2: ast console.log({a}); // 출력3: { a: { a: asfd, b: erw } } console.log({b}); // 출력4: { b: ast } 위 코드는 myCompiler에서 실행해봤습니다. https://www.mycompiler.io/ko/new/nodejs

김하림 · Accepted Answer

JavaScript의 `{}`와 JavaScript 확장 문법인 JSX의 `{}`를 혼동하고 계신 것 같습니다.
JS의 `{}`는 말 그대로 객체를 의미하지만,
JSX의 `{}`는 자바스크립트 코드를 실행하고 그 결과를 HTML로 표현하고자 할 때 사용하는 구문입니다. (참고: https://react.dev/learn/javascript-in-jsx-with-curly-braces) JSX는 마크업 작성의 편의를 위해 만들어진 문법이기 때문에, 실제로 브라우저에서 JSX 문법을 실행하면 당연히 다른 결과가 나타납니다.
적어주신 `console.log({ a })` 코드는 `console.log({ a: a })`를 축약한 형태입니다.  이 문법은 ES6에서 도입된 Object shorthand property 문법으로, 객체 리터럴의 key랑 value가 같을 때 가독성을 좋게 만들어주는 역할을 합니다.
ES6 이전엔 key와 value가 같더라도 두 번 타이핑을 해줘야 했습니다. (코드 참조) ES6 부터는 축약된 형태로 객체 리터럴을 작성할 수 있습니다. 이 문법 구조가 JSX의 Curly braces와 비슷해서 헷갈리신 것 같습니다.