객체

1️⃣ key 값으로 사용할 수 있는 형식은 어떻게 되나요?

문자열(String), 심볼(Symbol)
객체 리터럴을 사용할 경우, 숫자도 key가 될 수 있지만 내부적으로는 문자열로 변환된다.

const obj = {
  name: "Alice",  // 문자열 key
  123: "Number key",  // 숫자도 가능하지만 내부적으로 "123" (문자열)로 변환됨
  [Symbol("id")]: 456  // 심볼 key
};

console.log(obj["123"]); // "Number key"
console.log(obj[123]);   // 동일하게 동작 ("123"으로 변환됨)

✔️심볼(Symbol)
변경 불가능한 원시 값

2️⃣ 동적인 값(다른 변수에 담긴 값)으로 key를 사용하는 경우, 어떻게 해야 할까요?

대괄호[] 표기법 사용

이것을 계산된 속성 이름(Computed Property Name)한다.

const keyName = "age";
const person = {
  name: "Alice",
  [keyName]: 25  // 동적 key 사용
};

console.log(person.age); // 25

3️⃣ 동적인 값(다른 변수에 담긴 값)으로 value를 사용하는 경우, 어떻게 해야 할까요?

value는 일반적으로 변수의 값을 그대로 할당하면 된다.

const ageValue = 25;
const person = {
  name: "Alice",
  age: ageValue  // 동적 value 사용
};

console.log(person.age); // 25

동적 key와 동적 value를 함께 사용하는 경우

const key = "city";
const value = "Seoul";

const location = {
  [key]: value  // key와 value 모두 동적 사용
};

console.log(location.city); // "Seoul"

퀴즈

const erson = {
  city: 0,
  1: 2 
};

console.log(erson);

• "1"은 숫자로 해석될 수 있기 때문에 먼저 출력됨
• "city"는 일반 문자열 키라서 숫자 키 다음에 출력됨

객체 속성의 출력 순서

1. 숫자 키(정수) 먼저 출력
   • 숫자로 해석될 수 있는 키(예: "1", "100" 등)는 오름차순으로 정렬되어 먼저 출력된다
2. 그다음 문자열 키(정수 아닌 키) 출력
   • 일반적인 문자열 키(예: "city", "name" 등)는 추가된 순서대로 출력된다
3. 심볼(Symbol) 키는 가장 마지막에 출력

예제 1: 숫자 키가 여러 개일 때

const obj = {
  100: "a",
  2: "b",
  50: "c",
  name: "d",
  age: "e"
};
console.log(obj);
// [object Object] 
// {
//  "2": "b",
//  "50": "c",
//  "100": "a",
//  "name": "d",
//  "age": "e"
// }

→ 숫자 키(정수)가 먼저 정렬되어 출력된 후, 문자열 키가 순서대로 출력됨


해결 방법: 키 순서 유지하기
객체의 속성 순서를 강제로 변경하려면 Map을 사용하면 된다.

const map = new Map();
map.set("city", 0);
map.set(1, 2);
console.log(Object.fromEntries(map)); // { city: 0, '1': 2 }

Map은 삽입 순서를 유지하기 때문에 원하는 순서대로 출력 가능하다.