JavaScript - for - in & for - of

반복문 중에서 객체의 길이만큼 반복하는 for - in문과 for - of문을 정리해보자.

* for - in 문

객체의 열거 가능한 '속성들'을 순회하며 모든 객체에서 사용 가능

객체의 key값에 접근 가능, value값에는 직접 접근 불가
따라서 배열에서는 index에 객체에서는 key값에 접근

var arr = ['a', 'b', 'c']; 
for (var index in arr) { 
    console.log(index, arr[index]); 
} 
// 0 a, 1 b, 2 c 

var obj = { a: 1, b: 2, c: 3 }; 
for (var prop in obj) { 
    console.log(prop, obj[prop]); }
// a 1, b 2, c 3

참고

1> for - in문에는 순서가 보장되지 않는다.(순서가 중요하다면 사용X)
2> length 연산자를 사용 할 수 없다.
3> value값은 string이라 연산이 불가능하다

* for - of 문

반복 가능한 객체(iterable)를 순회하며 Array, Map, Set, arguments 등에서 사용 가능 (Object는 해당 X)

for - of문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야 한다.

// Array
for (let item of ['a', 'b', 'c']) { 
    console.log(item); 
    // 'a','b','c'
} 

// String 
for (let val of 'abc') { 
    console.log(val); 
    // 'a','b','c' 
} 

// Object 
for (let val of {1 :'a', 2 :'b', 3 :'c'} ) {               
    console.log(val); 
    // TypeError: object is not iterable 
}

* 차이점

• for - in은 객체(Object)의 key를 순회하고, for - of는 iterable객체의 value를 순회하는 데 사용