Javascript for in, of 차이

for...in

for...in 명령문은 상속된 열거 가능한 속성들을 포함해서 객체에서 문자열로 지정된 모든 열거 가능한 속성에 대해 반복

var obj = {
    'a':1,
    'b':2,
    'c':3,
    1:4
}
var arr = [1,2,3]

console.log(obj)
console.log(arr)

console.log("print for in obj")
for (var item in obj) {
    console.log(item)
}

console.log("print for in arr")
for (var item in arr) {
    console.log(item)
}

실행 결과는 다음과 같음

{ '1': 4, a: 1, b: 2, c: 3 }
[ 1, 2, 3 ]
print for in obj
1
a
b
c
print for in arr
0
1
2

예제에서 보다시피 obj에 경우 for in 방식 사용시 문자열로 구성된 Key 값을 출력
숫자 1의 경우 obj에 포함되는 순간 문자열로 변경되어 문자열 key로 출력
arr에 경우 내부 value 대신 0부터 시작하는 index 값을 출력

for...in은 열거 가능한 속성을 타겟으로 하기 때문에, array(배열)의 값이 아닌 열거 가능한 index를 기준으로 함

for...of

for...of 명령문은 반복가능(Iteration)한 객체에 대해서 반복하고 각 개별 속성값에 대해 루프를 생성
여기서 객체는 Array, Map, Set, String, TypedArray, arguments가 포함됨

var arr = [1,2,3]

console.log(arr)

console.log("print for of arr")
for (var item of arr) {
    console.log(item)
}

실행 결과는 다음과 같음

[ 1, 2, 3 ]
print for of arr
1
2
3

for...in과 다르게 출력의 대상이 index가 아닌 개별 속성값임
obj는 이번 예제에 포함되지 않았는데, 객체는 반복가능(iterator) 속성이 없기 때문에 오류가 발생

TypeError: obj is not iterable

obj와 비슷한 Map 구조를 사용하면 for...of를 사용가능

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}

for (let [key, value] of iterable) {
  console.log(key,":",value);
}

실행 결과는 다음과 같음

[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
a : 1
b : 2
c : 3

Map에 경우 추출한 값에 Key, Value의 맵구조를 보유하고 있음
받는 변수의 개수를 2개로 나누면, Key와 Value가 별도로 대입되는 구조를 가짐

차이

for...of와 for...in에 차이를 둔다면 배열과 객체라는 사용 대상의 차이를 둘 수 있음