[JavaScript] 정리 3. Object 타입의 속성 순서

유의사항: 해당 글은 공부한 내용을 정리하는 용도이므로, 수정이 필요할 경우 내용의 수정이 있을 수 있습니다.

 

개요

 

여러 데이터를 하나의 변수에서 관리하고 싶다면 Object 타입을 사용해야 한다. 그런데, Object 타입에 존재하는 속성들은 차례대로 출력되지 않는다. 오늘은 "왜 Object 타입에 존재하는 속성들은 적힌 순서대로 출력되지 않는가?" 에 대해 알아보자.

---

가장 일반적인 예상

객체가 가진 속성의 출력 순서를 예상해보면 당연히 "적은 순서대로 나올 것이다"라고 생각한다. 그렇다. 실제로 아래 코드처럼 순서대로 출력이 된다. 그런데...

let obj1 = {
  key1 : "value1",
  key2 : "value2",
  key3 : "value3"
};

for (let prop in obj1){
  console.log(obj1[prop]);
}

// Output:
// value1
// value2
// value3

 

순서대로 출력되지 않는 속성들

어떤 Object는 아래와 같이 숫자 key를 가진 속성을 포함할 수도 있다. 이런 key값이 여러 개 있는 객체의 속성들을 한 번 출력해보면...

let obj2 = {
  key1 : "value1",
  key2 : "value2",
  key3 : "value3",
  1 : "a",
  2 : "b"
}

 

아래와 같이 숫자 key값을 가진 속성이 이전 속성들보다 먼저 출력되는 것을 알 수 있다. 그런데 더 이상한 점은 console.log(obj2); 부분의 출력 결과처럼 속성의 순서 자체가 바뀌어져 있다는 점이다.

// 객체 자체를 출력.
console.log(obj2);

// 각 key의 value를 출력
for (let prop in obj2){
  console.log(obj2[prop]);
}

// Output:
//{ '1': 'a', '2': 'b', key1: 'value1', key2: 'value2', key3: 'value3' }
// a
// b
// value1
// value2
// value3

 

왜그러는 걸까?

이유는 간단하다. 자바스크립트에서 Object의 속성들은 적은 순서 뿐만이 아닌, 여러 우선순위 규칙에 따라 순서가 정해지기 때문. ES6 이후, Object 속성의 순서는 크게 3가지를 따른다.

1. 정수 키 (실제 숫자가 아니라 숫자로 변환할 수 있는 문자열)는 작은 숫자에서 큰 숫자로 정렬됩니다.
2. 문자열 키는 객체에 추가된 순서대로 나타납니다.
3. 심볼 키는 객체에 추가된 순서대로 나타납니다.

즉, 우선순위는 정수 > 문자열 > 심볼이며, 정수 타입 안에서는 오름차순으로, 문자열과 심볼 키는 추가된 순서를 기준으로 정렬되는 것을 알 수 있다.

 

이해를 위한 예제 코드를 아래에 두었으니, 한 번 씩 확인해가며 이해하면 좋을 듯하다.

let obj = {
  str2 : "a",
  3 : "b",
  [Symbol("sumbol")]: "c",
  1 : "d",
  str1 : "e"
};

// 객체 자체를 출력
console.log(obj);

// 각 key의 value를 출력.
for (let prop in obj){
  console.log(obj[prop]);
}

// Output:
// { '1': 'd', '3': 'b', str2: 'a', str1: 'e', [Symbol(sumbol)]: 'c' }
// d
// b
// a
// e