티스토리 뷰

Iteration 개념

  • es6 의 for ..of 등의 반복을 위해서는 Iteration 개념을 알아둘 필요가 있습니다.
  • 단어 그대로 보자면. Iteration : 반복의 뜻을 가지고 있습니다.
  • es6에선 2가지의 프로토콜(규칙) 있습니다.
    • 반복가능한 오브젝트 iterable Object
    • 반복하기 위해 메서드가 필요한 iterator Object 있습니다.

Iterable protocol

  • iterable protocol은 아래의 Object 들이 있습니다.
    • Array , String , Typed Array, map, set, arguemnts 등
  • built-in type으로 설정되어 있다.
  • 프로토콜 규약이므로 만들어 쓸 수 있다.
  • 주로 for of 문으로 반복이 가능합니다.
  • 혹은 ArrayLike도 반복이 가능합니다.

for-of

  • iterable Object 를 반복 처리 합니다.
  • 열거 가능한 프로퍼티가 대상이며
  • enumerable 속성이 true 여야 가능합니다.

Object 열거

  • 이터러블 오브젝트가 아니므로 열거 불가능하지만 Obejct.keys()를 이용하면 열거 할수 있습니다.

Example

let str = "hello"; // String
for (let char of str) {
  console.log(char);
}

let arr = [1, 2,3]; // Array
for (let num of arr) {
    console.log(num);
}

// ....

// arrayLike
const arrayLike = {
  0:'test',
  1:'test2',
  length:2
}
for (let value of arrayLike) { // TypeError
  console.log('value:',value);
}

const arr = Array.from(arrayLike);
for (let value of arr) {
  console.log('value:',value);
}

ArrayLike

  • 뜻을 해석 하자면 배열 좋아가 아닌 배열과 유사한. 즉 배열 같은 오브젝트 입니다.
  • 반드시 length 프로퍼티가 정의되어 있어야 하며, key를 index number로 지정하여 사용할 수 있습니다.
const arrayLike = {
  0:'test',
  1:'test2',
  length:2 // 반드시 렝스가 존재하여야 합니다.
}
const arr = Array.from(arrayLike); // iterable 하게 변환
for (let value of arr) {
  console.log('value:',value);
}




Iterator protocol

  • 오브젝트의 값을 순서대로 처리하는 규약입니다.
  • 다음 값을 가져오려면 반드시 next()를 호출 하여야 합니다.
  • next() 함수는 사용환경에 따라 정의하여 사용합니다.
  • Symbol.iterator() 를 호출하면 이터레이터 오브젝트를 만들어 반환합니다.
  • String, array, TypedArray, Map, Set은 모두 내장으로 iterator() 메소드를 가지고 있습니다.

next()

  • iterator object 는 next() 메소드를 가지고 있습니다.
  • return 값으로
    • {done:false, value: value}
    • 형태의 Object를 리턴하며
    • done이 true를 반환하면 반복문을 종료로 처리하게 됩니다.
let str = 'hello';
let iterator = str[Symbol.iterator]();
console.log(iterator);

console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());


'Javascript > ES6' 카테고리의 다른 글

[javascript ES6] Distructuring  (0) 2017.04.10
[javascript ES6] Spread 연산자  (0) 2017.04.10
[javascript ES6] iterable 과 iterator  (0) 2017.04.10
[javascript ES6] Arrow Function  (0) 2017.04.10
[javascript ES6] let , const  (0) 2017.03.23
[javascript ES6] Tower of babel  (0) 2017.03.21
댓글
댓글쓰기 폼