JavaScript의 `for...in` 반복문과 객체 프로퍼티의 정렬 방식

JavaScript의 for...in 반복문과 객체 프로퍼티의 정렬 방식

소개

for...in 반복문은 객체의 프로퍼티를 순회하는 데 사용됩니다. 그러나 프로퍼티가 작성된 순서대로 출력되지 않을 수 있습니다. 이 글에서는 for...in 반복문의 프로퍼티 순서와 객체의 프로퍼티 정렬 방식을 살펴보겠습니다.

객체 프로퍼티 순서의 특징

for...in 반복문을 사용하면 객체의 프로퍼티가 특정 순서에 따라 반복됩니다. 그러나 작성된 순서와는 다르게 출력될 수 있습니다.

예시:

let myObject = {
  '2': '알고리즘의 정석',
  '3': '컴퓨터 개론',
  '1': '자바스크립트 프로그래밍 기초',
};

for (let key in myObject) {
  console.log(myObject[key]);
}

// 자바스크립트 프로그래밍 기초
// 알고리즘의 정석
// 컴퓨터 개론

위 예시에서는 '2', '3', '1'의 순서로 프로퍼티를 정의했지만, for...in 반복문은 '1', '2', '3' 순서로 프로퍼티를 출력합니다.

객체 프로퍼티의 정렬 방식

JavaScript에서 객체의 프로퍼티는 다음과 같은 규칙에 따라 정렬됩니다:

1. 정수형 프로퍼티: 양의 정수 값인 키는 자동으로 오름차순으로 정렬됩니다.
2. 기타 프로퍼티: 문자열이나 심볼 등 나머지 프로퍼티는 작성된 순서대로 정렬됩니다.

예시:

let myObject = {
  3: '정수3',
  name: 'codeit',
  1: '정수1',
  birthDay: '2017.5.17',
  2: '정수2',
};

for (let key in myObject) {
  console.log(key);
}

// 1
// 2
// 3
// name
// birthDay

위 예시에서 1, 2, 3의 키는 오름차순으로 정렬되고, 그 외의 프로퍼티인 'name'과 'birthDay'는 작성된 순서대로 출력됩니다.

숫자형 프로퍼티

JavaScript 객체의 프로퍼티는 문자열로 자동 변환되어 사용됩니다. 숫자형 키도 예외는 아닙니다.

let myObject = {
  300: '정수',
  1.2: '소수',
};

for (let key in myObject) {
  console.log(`${key}의 자료형은 ${typeof key}입니다.`);
}

// 300의 자료형은 string입니다.
// 1.2의 자료형은 string입니다.

숫자형 키가 문자열로 변환되기 때문에 점 표기법이 아닌 대괄호 표기법으로만 접근 가능합니다.

let myObject = {
  300: '정수',
  1.2: '소수',
};

console.log(myObject['300']); // 정수
console.log(myObject['1.2']); // 소수

객체의 정렬 방식 관련 추가 내용

• 순서 유지: ECMAScript 2015 (ES6) 이후 객체의 키 순서는 기본적으로 입력된 순서를 유지합니다. 그러나 정수형 프로퍼티는 예외로, 항상 오름차순으로 정렬됩니다.
• Map 객체 사용: 객체의 프로퍼티 순서가 중요하다면, 정렬 순서를 보장하는 Map 객체를 사용하는 것이 좋습니다. Map은 키-값 쌍을 순서대로 저장하며, 순회 시 입력된 순서대로 값을 반환합니다.

let myMap = new Map([
    [3, '정수3'],
    ['name', 'codeit'],
    [1, '정수1'],
    ['birthDay', '2017.5.17'],
    [2, '정수2']
]);

for (let [key, value] of myMap) {
    console.log(key, value);
}

// 3 정수3
// name codeit
// 1 정수1
// birthDay 2017.5.17
// 2 정수2

결론

객체의 프로퍼티는 양의 정수형 키가 있을 경우 오름차순으로 정렬되며, 나머지 키는 추가한 순서대로 정렬됩니다. 이를 잘 이해하면 for...in 반복문을 사용할 때 예측 가능한 코드를 작성할 수 있습니다. 또한 정렬 순서를 정확히 유지하려면 Map 객체를 고려할 수 있습니다.