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

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와 비슷해서 헷갈리신 것 같습니다.

1// ES6 이전
2const name = 'Smith'
3const age = 20
4
5const person = {
6  "name": name,
7  "age": age,
8}
9
10// ES6 이후
11const name = 'Smith'
12const age = 20
13
14const person = {
15  name,
16  age,
17}