for of, for in 문법

1. for in

• for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다.
• 임의의 순서로 객체의 속성들에 대해 반복한다.
• 인덱스의 순서가 중요한 Array에서 반복을 위해 사용할 수 없다.(중요)
• 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없다
• 정수가 아닌 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환한다.
• 객체의 속성을 쉽게 확인할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있다.

문법

for ( const variable in object) {
     statement
}
variable : 매번 반복마다 다른 속성 이름(Value name)이 변수(variable)로 지정된다.
object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

for...in 사용 예시

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

for...in - JavaScript | MDN

 

2. for of

• 반복 가능한 객체(iterable)를 순회할 수 있도록 해준다.
• Iterator 속성이 있는 객체인 Array, Map, Set, TypeArray, argument 등의 값을 반복할 수 있으며, string 문자열에도 적용할 수 있다.
• Object(객체)는 이에 해당하지 않기 때문에 for ...of문을 사용하면 TypeError를 발생시킨다.

문법

for (variable of iterable) {
   statement
}
variable : 각 반복에 서로 다른 속성값이 variable에 할당됩니다.
iterable: 반복되는 열거가능(enumerable)한 속성이 있는 객체.
for ...of 구문을 사용하기 위해서는 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 한다.(직접 명시 가능)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN

3. 정리

for ...in 문

1. 객체의 열거 가능한 '속성들'을 순회할 수 있도록 함
2. 객체의 key값에 접근 가능, value값에는 직접 접근 불가
3. 모든 객체에서 사용 가능
4. Key를 리턴(배열의 경우에는 index)

for ...of문

1. 반복 가능한 객체(iterable)를 순회할 수 있도록 함
2. Array, Map, Set, argument 등이 해당됨 ( Object는 해당 X )
3. Value를 리턴

결론, for ...in과 for ...of의 차이점은

for ...in은 객체(Object)의 key를 순회하고

for ...of는 iterable객체의 value를 순회하는데 사용한다.

 

https://joooing.tistory.com/entry/Iteration2-for-in%EB%AC%B8-for-of%EB%AC%B8

Iteration (2) for in문, for of문의 차이점