ES6부터 새로 생겨난 for of에 대해서 궁금증이 생겨서 학습안 내용을 포스트에 남깁니다.
const arr = [1, 2, 3, 4]
for( const value of arr ) {
console.log('value', value)
}
const set = new Set([1, 2, 3, 4])
for( const value of set ) {
console.log('value', value)
}
const obj = {0: 1, 1: 2, 2: 3, 3: 4}
for( const value of obj ) {
console.log('value', value)
}
Array, Set은 for of 문장으로 반복이 되지만, Object는 반복이 되지 않는가?
obj is not iterable인데, 반복할 수 없다 정도록 해석이 가능 할 것 같다.
for of구문을 확인해보면 아래와 같다.
iterable이 무엇인가? 간단하게 말하면 iterator를 생성할 수 있는 모든객체를 말 할 수 있다.
그러면 iterator는 무엇인가? 반복자를 말한다. 저 단어는 많은 개발자들이 많이 들어 보셧을 것이기 때문에 이하 생략한다.
여기서 더 중요한것은 for of는 무엇을 반복자로 받아 들이는가? 이다.
이에 대한 내용은 ES6에 추가된 protocol인 iterable protocol 과 iterator protocol을 확인 할 필요가 있다. 이 기준에만 충족을 한다면 자바스크립트의 for of에 적용 할 수 있다.
protocol 두가지는 아주 심플하다.
iterable protocol: 내용을 살펴 보면 Object 혹은 prototype chain 의 오브젝트 중 하나가 Symbol.iterator key의 속성을 가지며 값이 iterator protocol을 충족 시킬수 있는 값을 반환하는 함수를 반환되면 된다.
iterator protocol: 위의 내용보다 더욱 심플 하다. object이고 next 함수(iterator)가 존재해서 value 값, done 값(진위값)을 반환 하기만 하면 된다.
아주 간단하게 위의 obj에 적용 시켜보자.
obj[Symbol.iterator] = function() {
let i = 1
return {
next() {
return i > 4 ? { done: true } : { value: i++, done: false }
}
}
}
위의 코드에 이와 같은 함수를 추가 하고 나면
결과값은 위와 같다. 추가 적으로 전개연산자도 iterable protocol 과 iterator protocol을 따른다.
댓글
댓글 쓰기