for...in 반복문

for...in 반복문은 객체 안에 있는 프로퍼티들을 가지고
반복적인 동작을 수행할 때 사용한다.
객체의 프로퍼티 네임을 가져오는 반복문이기 때문에
일반적인 for문으로는 대체할 수 없는 조금 특별한 반복문이다.
기존 구조부터 살펴보면 일반적인 for문과 비슷하지만 소괄호 내부가 조금 다르다.

for (변수 in 객체) {
  동작부분
}

소괄호 내부에서 특정한 변수를 만들고
in이라는 키워드 다음에 반복할 객체를 넣어 주게 되면
이 객체에 프로퍼티 네임이 변수에 할당되고
객체에 프로퍼티 개수만큼 반복 동작을 하게 된다.

let codeit = {
	name : '코드잇',
  	bornYear : 2017,
  	isVeryNice : true,
  	worstCourse : null,
  	bestCourse : '자바스크립트 프로그래밍 기초'
}

for (let key in codeit) {
	console.log(key);
}
// 출력
// name
// bornYear
// isVeryNice
// worstCourse
// bestCourse

codeit 객체의 프로퍼티 개수만큼 반복한다.
이때 key라는 변수에 이 codeit 객체인 프로퍼티 네임들이 차례대로 전달되는 방식이다.

대괄호표기법을 활용하면 프로퍼티값에도 접근할 수 있다.

for (let key in codeit) {
	console.log(codeit[key]);
}
// 출력
// 코드잇
// 2017
// true
// null
// 자바스크립트 프로그래밍 기초

이렇게 객체 내부에 있는 모든 프로퍼티 값들을 하나씩 다루어야 하는 경우에
for...in 반복문을 활용할 수 있다.


for...in 반복문이 실행될 때 따로 정해진 순서 없이 객체에 추가한 순서를 따라서
반복문이 수행이 되는데,

let myObject = {
	'2' : '알고리즘의 정석',
  	'3' : '컴퓨터 개론',
  	'1' : '자바스크립트 프로그래밍 기초',
}
for (let key in myObject) {
	console.log(myObject[key]);
}
// 출력
// 자바스크립트 프로그래밍 기호
// 알고리즘의 정석
// 컴퓨터 개론

해당 코드를 보면 작성한 순서와 다르게 수행되고 있다.
객체의 프로퍼티는 어떤 순서로 정렬되는 것일까?


객체의 프로퍼티 네임의 예외사항과 객체의 정렬 방식

숫자형(양수) 프로퍼티 네임

흔한 경우는 아니지만 프로퍼티 네임에 숫자형(양수)을 작성해서 사용할 수도 있다.

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

다만 실제로 사용될 때는 문자열로 형 변환이 되어 사용된다.

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']);
console.log(myObject.300); // Error!
console.log(myObject.1.2); // Error!

정수형 프로퍼티 네임

for...in 문을 사용할 때 주의해야 할 순간은 바로 정수형 프로퍼티 네임이 있을 때이다.
객체는
정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고,
나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징
이 있다.

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

자동으로 정렬되는 특성이 장점처럼 느껴질 수도 있지만 대부분의 경우에는 의도치 않은 결과를 가져올 수도 있기 때문에 일반적으로는 정수형 프로퍼티를 잘 사용하지 않는다.
그래서 불가피한 경우에는 이런 객체의 정렬방식을 잘 이해한 상태에서 사용하고, 가급적 명확한 의미가 있는 프로퍼티 네임을 사용하는 게 좋다.

좋은 웹페이지 즐겨찾기