[JavaScript] for in과 for of의 차이점

설명에 앞서 요약하면

for...in : 객체에 사용 (객체의 모든 열거 가능한 속성에 대해 반복)

for...of : 배열에 사용 ([Symbol.iterator] 속성을 가지는 컬렉션 전용)

for...in으로 객체를 순회하는 경우

for...in으로 배열을 순회하는 경우

for...in은 보통 객체를 순회하면서 값을 출력할때 사용한다. 배열도 객체이기 때문에 위의 코드에서도 순회를하며 값을 출력한다.

하지만 이러한 for...in을 배열에 사용할 경우 위 예시 코드와 같이 원본 배열이 가지고있는 않았던 추가된 값들까지 출력하기때문에 문제를 발생시킬 수 있다.

객체를 for...in으로 순회하면 key 값은 객체의 key 값으로 할당된다. 반면에

배열을 for...in으로 순회하면 key 값은 배열의 인덱스를 값으로 가지게 된다.

여기서 문제가 발생될 수 있다. 

보통 배열의 경우 인덱스 값을 가지고 원하는 값을 출력하는데 코드 중간에 사용자 정의 속성이 추가된 경우 값을 출력하게 되면 2번째 for...in에서와 같이 인덱스 값이 아닌 문자열을 출력하여 예상치 못한 결과를 초래할 수 있다.

그래서 배열은 for...of를 사용하는게 좋다. 사용자 정의 속성 값들이 추가되었다 하더라도 원본 배열을 제외한 나머지 값들은 출력하지 않기 때문이다.


추가적으로 for..in과 달리 for...of는 문자열을 순회하며 값을 출력할 수 도 있다.

위와같은 문제점들을 고려해서 

객체에서는 for...in

배열에서는 for...of

를 사용하도록 하자.