📚 for...in 반복문에서 순서가.. 왜 이러지...?
앞선 글 JavaScript에서 '객체'란 무엇이길래 사람들이 이리도 강조하는 것일까? 에서 for...in 반복문에 대해 학습해보았다. 이와 관련해서 다양한 객체를 통해 실제로 for...in 반복문을 활용하던 도중, 이상한 점을 발견하였다.
일반적으로 우리는 '순차적'인 방식을 좋아한다. 숫자도 1부터 시작해 차례차례 세는것이 편하고, 객체에서도 마찬가지로 위에서부터 아래로 읽어 내려오는 것이 일반적이다. 그런데, for...in 반복문을 사용하던 도중, 객체에 추가된 순서대로 데이터에 접근하는 것이 아닌 예외적인 상황을 발견하여 당혹스러움을 갖출 수 없었다.
그렇다면 언제 이러한 문제가 발생하는 것인지, 그리고 왜 이러한 문제가 발생했는지 조금 더 자세히 알아보자.
for...in과 객체 프로퍼티의 정렬
📌 객체 프로퍼티의 정렬 이해하기
JavaScript에서 for...in문은 객체 내부의 모든 프로퍼티를 순회할 때 사용된다. 일반적으로, 이 반복문은 객체에 추가된 순서대로 프로퍼티를 순회하는 것처럼 보이지만, 예외적인 상황이 있다.
Property Name이 숫자형일 경우, JavaScript는 이를 오름차순으로 자동 정렬한다.
let myObject = {
'2': '나는',
'3': '사과를',
'1': '먹고 있다',
};
for (let key in myObject) {
console.log(myObject[key]);
};
// 출력 순서: 먹고 있다, 나는, 사과를이 예제에서 볼 수 있듯, 작성한 순서와 다르게 for...in 반복문이 숫자형 프로퍼티를 오름차순으로 정렬하여 처리한다.
📌 숫자형 프로퍼티 네임의 특징
프로퍼티 네임으로 숫자형을 사용할 수 있다는 것은 JavaScript에서 드문 경우지만 가능하다. 예를 들어, 아래 객체에서 숫자형 프로퍼티 네임은 문자열로 형 변환되어 사용된다.
let myObject = {
100: '정수',
1.5: '소수',
};
for (let key in myObject) {
console.log(`${key}의 자료형은 ${typeof key}입니다.`);
};
// 출력: 100의 자료형은 string입니다. / 1.5의 자료형은 string입니다.이러한 형 변환 때문에, 숫자형 프로퍼티 네임은 대괄호 표기법을 사용하여 접근해야 한다. 점 표기법은 사용할 수 없다.
📌 정렬 규칙의 중요성
객체의 프로퍼티 중 정수형 프로퍼티 네임이 있을 경우, JavaScript는 이를 우선적으로 오름차순으로 정렬한다. 이후 나머지 프로퍼티들은 추가된 순서대로 정렬된다. 이러한 자동 정렬은 때때로 의도치 않은 결과를 가져올 수 있어 주의가 필요하다.
일반적으로 정수형 프로퍼티는 잘 사용되지 않는데, 그 이유는 이러한 정렬 방식 때문이다. 가능한 경우, 명확한 의미가 있는 프로퍼티 네임을 사용하는 것이 좋으며, 정수형 프로퍼티를 사용해야 하는 상황에서는 이러한 정렬 방식을 잘 이해하고 있어야 한다.
이러한 지식을 바탕으로, JavaScript 객체의 구조와 행동을 더 잘 이해하고, 효과적인 코드를 작성하는 데 도움이 될 것이다.
Outro
앞선 글에서 Clean Code를 위한 프로퍼티 이름에 대한 주의사항을 다뤘었다. 특히, 프로퍼티 이름은 문자, 밑줄(_), 또는 달러 기호($)로 시작해야 하며, 숫자로 시작하는 것은 지양해야 한다는 점을 강조했었다.
for...in 구문을 통해 발견된 예외 상황은 이러한 규칙과 주의사항이 왜 중요한지를 몸소 느끼게 해주는 계기가 되어주었다. 또한, 규칙을 지키는 것이 더욱 안전하고 완성도 높은 코드를 짜는 것의 시초라는 중요한 교훈을 나에게 제공하였다.
오늘의 발견은 프로그래밍 규칙과 convention을 이해하고 준수하는 것은 단순히 코드의 가독성을 높이는 것을 넘어서, 안정성과 유지 보수의 용이성을 보장하는 핵심적인 요소임을 나에게 다시 한번 상기시켜 주었다. 이러한 깨달음을 바탕으로, 앞으로 더욱 명확하고 견고한 코드를 작성하는 데 한 걸음 더 나아가자.
