8. iterators + for..of

for ... of 구문에 대해 알아보겠습니다. 기본적인 MDN의 정의는 이러합니다.

for...of 문(statement)은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

보통 for ...of문은 for ...in문과 비교를 하곤 하는데 중요한 차이점 하나만 짚고 넘어가겠습니다.

let info = {
	'name' : 'Lee',
	'age' : 28,
	'sex' : 'm'
}

for(let i in info){
	console.log(i);		//name age sex
}
for(let i of info) {
       console.log(i);          //TypeError: info is not iterable
}

for in문은 반복 가능한 속성의 객체가 아닐지라도 모든 열거 가능한 속성을 가진 객체에 대해 반복이 가능합니다. 하지만 for...of 구문은 [Symbol.iterator] 속성을 가지는 컬렉션만이 사용 가능한 구문입니다. 에러에서도 not iterable 이라고해서 반복이 불가능하다라고 알려주고 있죠. Symbol은 ES6에서 등장한 자료형으로 아직 포스팅하지는 않았는데 엄청 중요하게 생각하진 않으셔도 되겠습니다.

let str = "korea";

for(let i in str) { console.log(i)}	//0 1 2 3 4
for(let i of str) { console.log(i)}	//k o r e a

MDN의 정의에서도 말했다시피 for...of문은 반복가능한 객체에 대해서 실행되는 반복문이면서 개별 속성값에 대해 실행되는 구문입니다. 그에반해 for in은 값이 아닌 key 에 초점을 맞추고 있죠. 

반복 가능한 객체를 사용한다는 부분에서 또 하나의 예시를 보겠습니다.

let iterable = [3,5,7];
iterable.notIterable = "not iterable";

for(let i in iterable){
	console.log(i);		//0 1 2 notIterable
}

for(let i of iterable){
	console.log(i);		//3 5 7
}

보시다시피 iterable 객체에 notIterable 키를 가지는 객체를 하나 추가했습니다. 근데 for in문에서는 key가 출력이 되었는데 for of 문에서는 키 값이 출력이 안됐다는 것은 {"notIterable : "not iterable" } 형태로 추가된 이 객체는 iterable한 객체가 아니라는 뜻입니다. 철저하게 iterable 가능한 객체에 대해서만 값을 출력하고 있는 것을 볼 수 있죠.