for in과 for of의 차이점을 알아보면서 iteration 프로토콜을 알게 되었습니다.
redux saga를 할때, generator 함수 때문에 iteration 프로토콜을 공부했었는데, 그때 정리를 안해놔서…. 다시 정리 하는 겸 포스팅하게 되었습니다.

먼저 2가지 프로토콜이 있습니다. 1. iterable protocol2. iterator protocol

1. iterable(반복 가능) protocol

// @@iterator를 사용자 정의하는 예시
var someString = new String("hi");          // need to construct a String object explicitly to avoid auto-boxing

someString[Symbol.iterator] = function() {
  return { // this is the iterator object, returning a single element, the string "bye"
    next: function() {
      if (this._first) {
        this._first = false;
        return { value: "bye", done: false };
      } else {
        return { done: true };
      }
    },
    _first: true
  };
};

2. iterator protocol

// iterator 예시
var someString = "hi";
typeof someString[Symbol.iterator];          // "function"
var iterator = someString[Symbol.iterator]();
iterator + "";                               // "[object String Iterator]"
 
iterator.next();                             // { value: "h", done: false }
iterator.next();                             // { value: "i", done: false }
iterator.next();                             // { value: undefined, done: true }

iterable, iterator 정리

for …in

// 일반 for ...in 예시
var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

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

// 프로토 타입 체인 속성 열거 예시
obj.b = 2; 
Object.prototype.c = 3; 
obj.b; // 2 
obj.c; // 3 
obj.hasOwnProperty("b"); // true 
obj.hasOwnProperty("c"); // false

// Object.entries() 
const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed

for …of

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

참조