(26) JavaScript - 객체 / for...in 반복문

for...in 반복문은 객체를 다루는 for문이며 객체 안에 있는 프로퍼티들들 가지고

반복적인 동작을 수행할 때 사용한다.

객체의 프로퍼티 네임을 가져오는 반복문이기 때문에 

일반적은 for문으로 대체할 수 없는 특별한 반복문이라고 보면 된다.

 

for...in 반복문

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

 

▲ 기본 구조부터 살펴보면 일반적인 for문과 비슷하지만 소괄호 내부가 조금 다르다.

소괄호 내부에서 특정한 변수를 만들고 in이라는 키워드 다음에 반복할 객체를 넣어주면  

그 객체에 프로퍼티 네임이 변수에 할당되고 객체에 프로퍼티 개수만큼 반복 동작을 하게 된다.

 

    let exp = {
        name : '섭이',
        Year : 2024,
        areYouLame: true,
        goodDay: null,
        bestFace:'차은우는 사람일까 신일까',
    }

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

▲ 'exp'라는 객체를 하나 만들었는데 이 객체를 for...in문으로 반복을 하는 코드이다.

소괄호 내부를 보면 'key'라는 변수를 만들고 'in exp' 는 'exp' 객체의 프로퍼티 개수 만큼 반복을 하는데

이때 'key' 변수에 이 'exp' 객체인 프로퍼티 네임들이 차례대로 전달되는 방식이다.

console.log를 통해 변수 'key'를 출력해보면 각 프로퍼티의 네임들이 차례대로 출력 될 것이다.

 

그리고 이전 글에서 대괄호 표기법에 대해 자세히 다뤘다시피

프로퍼티 값에도 접근할 수있다.

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

 

출력해보면 'exp' 객체의 각 프로퍼티 네임과 벨류값이 출력이 되는 것을 볼 수 있다.

 

객체 내부에 있는 모든 프로퍼티 값들을 하나씩 다루어야 하는 경우가 있을 것이다

그럴땐 이렇게 for...in 반복문을 활용할 수 있다.

 

for...in 주의사항 (객체의 정렬 방식)

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

또한 반복문이 실행 될 때 따로 정해진 순서 없이 추가한 순서를 따라서 반복문이 실행된 결과를 볼 수있었는데

아래의 코드를 살펴보면

    let numberList = {
        '2': '2번 입니다.',
        '3': '3번 입니다.',
        '1': '1번 입니다',
    };

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

 

분명히 객체를 작성할 때 " 2번 입니다, 3번 입니다, 1번 입니다" 순서로 작성했는데

최종 출력 결과는 작성한 순서와 다르게 for...in 반복문이 수행되었다.

이유를 알아보기 전에..

 

반복문을 사용할 떄 이 순서를 알지 못하면 위와 같이 의도치 않은 결과를 얻을 수 있으며

상황에 따라서는 큰 오류로 이어질 수 도 있다.

그렇기에 우리는 객체의 프로퍼티 네임의 예외사항과 정렬 방식에 대해 살펴봐야한다.

---

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

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

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

 

다만 실제로 사용될 때는 문자열로 형 변환이 되어 사용되는데,▼

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

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

 

이렇게 for..in문을 활용해서 각 프로퍼티 네임들의 자료형을 확인해보면 모두 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 myObjectt = {
        3: '정수3',
        name: 'codeit',
        1: '정수1',
        birthDay: '2017.5.17',
        2: '정수2',
    };

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

 

코드를 실행하면 다음과 같이 결과가 출력되는데 

for...in문으로 인해 알아서 오름차순으로 정렬이 되어 출력이 된 것을 볼 수 있다.

---

★GitHub 주소 (for..in)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/5.for...in%EB%B0%98%EB%B3%B5%EB%AC%B8.html

JavaScript_soloPlay/Basic/8-객체/5.for...in반복문.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (for...in 예제)

https://purrfect-gargoyle-935.notion.site/for-in-10ee9530b3e180caafddeee40d6087ae?pvs=4

for…in문 | Notion