[JavaScript] 자바스크립트 for in문 사용법 & 예제 정리

자바스크립트 for문의 종류

• for문 : 일반적인 for문으로 블록 안의 코드를 조건에 따라 반복합니다.
• forEach문 : 배열에 대해 사용되는 for문으로, 각 배열 요소에 대해 주어진 함수를 실행합니다.
• for...in문 :객체에 대해 사용되는 for문으로, 객체의 열거 가능한 속성을 반복할 때 사용됩니다. 
• for...of문 :배열, 문자열, 맵(Map), 셋(Set) 등의 iterable 객체를 순회할 때 사용되는 for문입니다.

 

자바스크립트에서는 경우에 따라 forEach, for in, for of와 같은 다양한 종류의 for문이 사용될 수 있습니다. 이번 포스팅에서는 for...in문에 대해 알아보도록 하겠습니다. for...in 문은 자바스크립트에서 객체의 열거 가능한 속성을 반복하는 데 사용되는 루프 구문입니다. 이 구문은 객체의 속성을 열거하고 해당 속성에 대한 작업을 수행하는 데 활용됩니다. 하지만 주의할 점이 있어서 배열을 순회할 때에는 for...in 대신 for...of를 사용하는 것이 권장됩니다.

 

---

 

 자바스크립트 for in문 사용법 

for (변수 in 객체) {
    // 객체의 속성에 대한 코드
}

• 변수: 각 반복에서 현재 속성의 이름이 할당되는 변수입니다.
• 객체: 열거 가능한 속성이 있는 객체입니다.

 

 for문을 for in문으로 바꿔보기 - 객체 속성 출력 

for문 사용 시

See the Pen for by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

for문을 사용한다면 Object.keys() 메서드를 사용하여 객체의 키들을 배열로 가져온 다음, 배열을 순회하여 각 키에 대한 값을 출력해야 합니다.

 

for in 사용 시

See the Pen for in by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

for in으로 바꾼다면 위와 같이 바꿀 수 있습니다. 

1. const person = { name: "Alice", age: 30, city: "Wonderland" } : 객체 person을 정의하고 세 개의 속성(name, age, city)을 가지고 초기화합니다.
2. for (const key in person) : for...in 루프를 사용하여 객체 person의 속성을 반복합니다. key는 각 속성의 키가 됩니다.
3. document.write(${key}: ${person[key]}<br>) : 현재 반복 중인 속성의 키와 값에 접근하여 문자열 템플릿 리터럴을 사용하여 출력합니다. ${key}는 현재 속성의 키를 나타내며, ${person[key]}는 해당 키에 대한 값을 나타냅니다. 

 

---

 

 for in문 다양한 예제 

객체를 순회하면서 모두 출력하기

See the Pen for in1 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

객체를 순회하면서 모든 속성값을 출력합니다.

 

객체의 메서드 출력

See the Pen for in2 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

객체에 정의되어 있는 모든 메서드를 출력합니다.

 

DOM 요소의 속성 출력

See the Pen for in3 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

button 태그의 DOM 요소의 속성들을 모두 출력합니다.

 

---

 

 for in문 사용 시 주의사항 

순서 보장 안 됨

for...in은 객체의 속성을 열거할 때 순서를 보장하지 않습니다. 즉 객체의 속성 순서는 특별한 순서 없이 열거됩니다.

 

상속된 속성 포함

for...in은 객체의 자체 속성뿐만 아니라 상속된 속성도 모두 열거합니다. 만약 객체에 자체 속성만 열고 싶다면 Object.hasOwnProperty() 메서드를 활용하면 자체 속성인지 확인하고 상속된 속성을 제외하고 자체 속성만 열거할 수 있습니다.

 

배열에는 사용을 권장하지 않습니다.

배열에 대해 for...in을 사용하면 오동작의 소지가 있습니다. for...in은 순서를 보장하지 않기 때문에 index라는 순서가 있는 배열에 사용하면 예상치 못한 동작 오류를 낼 수 있습니다. 그래서 배열을 순회할 때는 for...of나 forEach를 사용하는 것이 더 적합합니다.