[ES6] Iteration & for..of 반복문

Iteration

사전적의미 -Iteration : 반복의 뜻!!!

ES6에서 Iteration 프로토콜은 Iterable 프로토콜과 Iterator 프로토콜로 구성된다.

Iterable (순회 가능한 자료 구조) 프로토콜은 반복 가능한 오브젝트를 나타내는 프로토콜이며 Iterator 프로토콜은 이터러블 오브젝트(Iterable 프로토콜을 따르는 오브젝트)의 값을 작성한 순서대로 처리하는 프로토콜이다.

ES6에서 제공하는 빌트인 Iterable

built in 오브젝트들은 디폴트로 이터러블 프로토콜을 갖고 있다.오브젝트에 Symbol.iterator가 있어야 한다

Array
Array.prototype[Symbol.iterator]
​
String
String.prototype[Symbol.iterator]
​
Map
Map.prototype[Symbol.iterator]
​
Set
Set.prototype[Symbol.iterator]
​
Argument
Argument.prototype[Symbol.iterator]
​
DOM data structures
NodeList.prototype[Symbol.iterator] HTMLCollection.prototype[Symbol.iterator]

JavaScript’s for statement

기존 for문

var arr = ["홍길동",100,100,96];
var sum =0;
for(var i = 1;i<=3;i++){
    sum +=arr[i];
}
arr.push(sum); // 배열 맨 끝에 값 추기 
arr.push(sum/3);
for(var i=0;i<arr.length;i++){
     console.log(arr[i]);
}
​

for....in 문

<h1>반복문 -for...in</h1>
<script>
var arr = ["홍길동",100,100,96];
for(var i in arr){ // i는 배열 인덱스 이다. 배열 전체를 반복한다.
     console.log(i,arr[i]);
}

i의 역할이index를 잡아주는 것 외에 별 다른 기능이 없다. 그래서 기존에는 for-in statement를 사용했다. 하지만 for-in statement 은 문자열 키를 가진 일반Object 객체들을 위해 만들어졌다.

for ..of 등장!!!

<h1>반복문 -객체에 for...of 적용</h1>
<script>
 var obj = new Object();
 obj.name ="홍길동";
 obj.kor =100;
 obj.eng=100;
 obj.math=96;
 obj.sum= obj.kor + obj.eng + obj.math;
 obj.aver = obj.sum / 3;
 //for .. of 에 대상은 배열이나 String NodeList Map Ser 만 가능하다.
 //for .. in 처럼 일반 객체에 대해서는 반복문을 실행 XX
 // 다음은 오류
 /*
 for(var i of obj){ // 반복문을 돌리 대상이 객체인 경우 i의 값은 프로퍼티명이다.
     console.log(i);
}
*/
var myMap = new Map();
myMap.set("name","홍길동");
myMap.set("kor",100);
myMap.set("eng",100);
myMap.set("math",96);
myMap.set("sum",(100+100+96));
myMap.set("aver",myMap.get("sum")/3);
for(var i of myMap){ // 반복문을 돌리 대상이 객체이 인경우 i의 값은 프로퍼티명이다.
    console.log(i[0], i[1]);
}
console.log("===============")
// 문자열인 경우  i 는 문자열에 한글자인다
for(var i of "hello")
    console.log(i)
</script>
<br>
​

for-in loop statement는 객체의 프로퍼티들을 루프시키지만for-of loop statement 는 데이터, 즉 배열 내의 value들을 루프시킨다. for-of는 배열 뿐만 아니라 다양한 Collection 에도 동작한다. DOM의 NodeList 같은 유사배열 객체들에도 동작하고 문자열에도 동작한다. 문자열을 유니코드 문자의 배열로 취급하는 것이다. Set, Map에 대해서도 물론 동작한다. key-value 형식의 Map에 대해서는 for (let [key, value] of …) 형식의 destructuring을 사용한다.

마지막으로 커스텀 iterator

// 피보나치 수열
const fibonacci = {
  [Symbol.iterator]() {
    let [prev, curr] = [0, 1];
    // 순회 카운터
    let step = 0;
    // 최대 순회수
    const maxStep = 10;
    return {
      // 피보나치 객체가 순회할 때마다 next 함수가 호출된다.
      next() {
        [prev, curr] = [curr, prev + curr];
        return { value: curr, done: step++ >= maxStep };
      }
    };
  }
};
​
for (const num of fibonacci) {
  console.log(num);
}
​
// spread 연산자
const arr = [...fibonacci];
console.log(arr); // [ 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ]
​
// destructuring
const [first, second, ...rest] = fibonacci;
console.log(first, second, rest); // 1 2 [ 3, 5, 8, 13, 21, 34, 55, 89 ]