자바스크립트 오브젝트 프로퍼티의 순서

오브젝트 프로퍼티의 순서

• 자바스크립트 오브젝트 프로퍼티에 순서가 있다.
  • 자바스크립트는 이를 이용해 배열을 구현한다. 배열은 사실 length 속성을 가진 객체이다.

객체 프로퍼티 정렬 규칙

객체의 프로퍼티는 아래의 우선순위를 갖고 정렬된다.

• 1: 숫자
  • 오름차순으로 정렬된다.
• 2: 문자열
  • 생성된 순서대로 정렬된다.
• 3: 심볼
  • 생성된 순서대로 정렬된다.

const obj = {
  2: "b",
  3: "c",
  1: "a",
};

obj["test3"] = "test3";
obj["test1"] = "test1";
obj["test5"] = "test5";
obj[Symbol.for("test")] = "test symbol";
obj[0] = "zero";

console.log(obj); // {0: 'zero', 1: 'a', 2: 'b', 3: 'c', test3: 'test3', test1: 'test1', test5: 'test5', Symbol(test): 'test symbol'}

예제 1: 오브젝트 프로퍼티가 숫자일 때

const obj = {
  2: "b",
  3: "c",
  1: "a",
};

console.log(obj); // {1: 'a', 2: 'b', 3: 'c'}

• 오브젝트 프로퍼티가 숫자일 때, 프로퍼티는 자동으로 오름차순의 순서를 갖는다.
• 자바스크립트의 배열도 사실 인덱스 번호를 키로 하고 값을 가지는 Object 이다.
  • 다만, Array.prototype 에서 상속하고, length 속성과 관련된 특별한 동작을 갖는다.

예제 2: for ... in 구문 사용해보기

const obj = {
  2: "b",
  3: "c",
  1: "a",
};

for (const key in obj) {
  console.log(key); // 1, 2, 3
}

• for ... in 구문을 사용하면, 1, 2, 3 이 순서대로 출력된다.

예제 3: 오브젝트 키의 순서를 믿었다가 낭패를 보는 경우

function example(obj) {
  obj.answer = 42;
  obj.question = "How old i am?";
  return obj;
}

const obj = example({});
console.log(obj); // {answer: 42, question: 'How old i am?'}

const obj2 = example({ question: "" });
console.log(obj2); // {question: 'How old i am?', answer: 42}

• answer 뒤에 question 이 오도록 순서를 의도했다면, 낭패를 볼 수 있다.
• 순서가 강제된 것이 아니기 때문에, 다른 개발자가 의도치 않게 먼저 question 을 먼저 만들어버릴 수 있다.
  • 개발자는 해당 로직이 순서에 의존하는지 코드만 봐서는 알기 힘들다.