[JavaScript] 반복문 for..in

 

자바스크립트 반복문 for..in

 

for...in 반복문 이란? 객체안에 있는 프로퍼티를 가지고 반복을 돌린다.

 

for ( 변수 in 객체 ) {

동작부분 ;

}

 

- 예시 

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

console.log('---반복문 test---');
for (let key in codeIt){
    console.log(key); // 프로퍼티 네임 출력 
    console.log(codeIt[key]); //대괄호 표기법을 이용하여, 프로퍼티 밸류값 출력 
}

 

for in문을 활용하면 객체 내부에 있는 모든 프로퍼티들을 하나씩 다룰 수 있다.

 

for in 반복문이 실행될 때 따로 정해진 순서 없이 객체에 추가한 순서를 따라서 반복문이 수행된걸 볼 수 있다.

아래의 코드를 살펴보면

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

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

// 결과

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

객체를 작성할 때는 알고리즘의 정석, 컴퓨터 개론, 자바스크립트 프로그래밍 기초 순서로 작성했는데,

결과를 보면 작성한 순서와 다르게 for in 반복문이 수행되었다.

 

객체의 프로퍼티는 어떤 순서로 정렬이 되는 건지, 반복문을 사용할 때 이 순서를 알지 못하면,

방금처럼 의도치 않은 결과를 얻게 될 수도 있기 때문에 주의를 해야한다.

 

---

 

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

프로퍼티 네임에는 숫자형(양수)을 작성해서 사용할 수도 있다.

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

 

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

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

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

 

이렇게 for in 문을 활용해서 각 typeof 를 사용해서 프로퍼티 네임들의 자료형을 확인해보면, 모두 string(문자열)이 출력된다. 

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!

 

---

 

정수형 프로퍼티 네임

객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 

나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있기 때문에 주의 해야 한다!

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

 

3, name, 1, birthday, 2순서로 프로퍼티가 작성되었음에도 불구하고, for in문이 실행될 때는 오름차순으로 정렬이 되어 출력이 됨을 확일 할 수 있다.

 

for문을 그대로 작성하지 않고도 그냥 콘솔에 myObject를 콘솔에 출력만 해봐도

{1: "정수1", 2: "정수2", 3: "정수3", name: "codeit", birthDay: "2017.5.17"}

 

객체가 정수형 프로퍼티에 한해서 오름차순으로 정렬이 되고 나머지는 추가한 순서대로 정렬이 되는걸 볼 수 있다.

처음에 살펴봤던 것처럼 정수형 프로퍼티에 따옴표를 붙여 문자열처럼 만들더라도, 정렬방식은 동일하게 처리된다.

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

 

자동으로 정렬되는 특성이 장점처럼 느껴질 수도 있지만 대부분의 경우에는 의도치 않은 결과를 가져올 수도 있기 때문에,

일반적으로 정수형 프로퍼티는 잘 사용하지 않는다!

 

그래서 불가피한 경우에는 이런 객체의 정렬방식을 잘 이해한 상태에서 사용하고, 가급적 명확한 의미가 있는 프로퍼티 네임을 사용하시는걸 권장한다.