🚀 자바스크립트 이터레이터, 이터러블, 제너레이터

for(var i = 0; i < arr.length; i++){
  console.log(arr.length);
}

arr.forEach(callback[, thisArg]){

}

var arr = [1, 2, , 4];

var a = arr.forEach(function(currentValue, index, array){
    console.log(`arr[${index}] : ${currentValue},  array : ${array}`);
    // if(value === 2) break; // SyntaxError: Illegal break statement
});
console.log(a);
/* 출력값
arr[0] : 1,  array : 1,2,,4
arr[1] : 2,  array : 1,2,,4
arr[3] : 4,  array : 1,2,,4
undefined
*/

function Counter() {
    this.sum = 0;
    this.count = 0;
}
Counter.prototype.add = function(array) {
    console.log(`array.length : ${array.length}`);
    array.forEach(function(entry) {
        (function(){array[6] = 5;})();
        this.sum += entry;
        ++this.count;
    }, this);
    console.log(`array.length : ${array.length}`);
};

var obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count);
console.log(obj.sum);
/* 출력값
array.length : 3
array.length : 7
3
16
 */

for(variable in object){
  statement
}

var str = {
    a: 1,
    b: 2,
    c: 3
}
for(v in str){
    console.log(`${v} : ${str[v]}`); // 속성 출력
    delete str.a; // a 속성이 제거되었지만 이전 반복이 끝난 상태여서 이전 값을 참조
}
console.log(typeof v);
console.log(str);
/* 출력값
a : 1
b : 2
c : 3
string
{ b: 2, c: 3 }
 */

var str = {
    a: 1,
    b: 2,
    c: 3
}
for(v in str){
    console.log(`${v} : ${str[v]}`); // 속성 출력
    delete str.b; // 반복이 시작되지않은 b속성을 제거하면 제거한 값을 빼고 반복
}
console.log(str);
/* 출력값
a : 1
c : 3
{ a: 1, c: 3 }
 */

var str = {
    a: 1,
    b: 2,
    c: 3
}

Object.defineProperty(str, 'a', {enumerable: false}); // a속성을 열거불가능하게 했다
for(variable in str){ // 열거 불가능한 요소는 반복하지않는다
    console.log(`${variable} : ${str[variable]}`);
}
console.log(str.a); // 하지만 a 속성은 존재
console.log(Object.keys(str).length);
// Object.keys() 는 열거형 속성을 문자열을 요소로갖는 배열로 반환, 반환한 배열의 length
/* 출력값
b : 2
c : 3
1
2
 */

for(variable of iterable){
  statement
}

var iterable = [1, 2, ,3];
for(const value of iterable){
    console.log(value);
}
/* 출력값
1
2
undefined
3
 */
console.log(iterable[Symbol.iterator]()); // next() 존재

var iterable = "hello";
for(let value of iterable){
    console.log(value);
}
/* 출력값
h
e
l
l
o
 */
console.log(iterable[Symbol.iterator]());
// StringIterator {} 내에 next() 존재

var iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for(let entry of iterable){
    console.log(entry);
}
for(let [key, value] of iterable){ // 디스트럭쳐링에 관해 따로 commit
    console.log(`${key} : ${value}`);
}
/* 출력값
[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
a : 1
b : 2
c : 3
 */
console.log(iterable[Symbol.iterator]());
//next() 존재

var non_iterable = {
    name: "heecheol",
    age: 24
}
// for(let value of non_iterable){
//     console.log(value); // error! non_iterable is not iterable
// }
for(let key of Object.keys(non_iterable)){
    console.log(`${key}: ${non_iterable[key]}`);
}
for(let key in non_iterable){
    console.log(`${key}: ${non_iterable[key]}`);
}
/* 출력값
name: heecheol
age: 24
name: heecheol
age: 24
 */
var foo = Object.keys(non_iterable)[Symbol.iterator]();
console.log(foo); // next() 존재

Symbol([description])

console.log(typeof Symbol()); // symbol

var str1 = "hello";
var str2 = "hello";
console.log(str1 === str2); // true

var symbol1 = Symbol();
var symbol2 = Symbol();
console.log(symbol1 === symbol2); // false

var symbol3 = Symbol('mySymbol');
var symbol4 = Symbol('mySymbol');
console.log(symbol3 === symbol4); // false
// var symbol5 = new Symbol();
// error! TypeError: Symbol is not a constructor

Symbol.for(key)

var saveSym1 = Symbol.for('foo'); // 새로운 전역심볼 생성
var saveSym2 = Symbol.for('foo'); // 이미 만들어진 심볼을 검색하고 있다면 그 심볼 반환

console.log(saveSym1 === saveSym2); // true

var prop2 = Symbol('prop2');

var obj = {
    prop1: "hello",
    [prop2]: "world"
}
for(var key in obj){
    console.log(obj[key]);
}
console.log(obj[prop2]); // 괄호를 이용해 접근
/* 출력값
hello
world
 */

var sym1 = Symbol();
var sym2 = Symbol('sym2');
var sym3 = Symbol('sym3');

var obj = {
    [sym1] : 1,
    [sym2] : 2,
    [sym3] : 3,
    name: "heecheolman"
}

console.log(Object.getOwnPropertySymbols(obj));
console.log(Reflect.ownKeys(obj));


var foo = Object.getOwnPropertySymbols(obj);
var foo2 = Reflect.ownKeys(obj);
console.log(typeof foo);
console.log(typeof foo[0]);
console.log(foo.length);
console.log("====");
console.log(typeof foo2);
console.log(typeof foo2[0]);
console.log(typeof foo2[1]);
/* 출력값
[ Symbol(), Symbol(sym2), Symbol(sym3) ]
[ 'name', Symbol(), Symbol(sym2), Symbol(sym3) ]
object
symbol
3
====
object
string
symbol
 */

{
 a: 정수
}

{
  next: function(){
    return {value: 1, done: false};
  }
}

var obj = {
    array: [1, 2, 3, 4],
    next: function(){
        return {
            done: this.array.length == 0,
            value: this.array.pop()
        };
    }
}

console.log(obj.next());
console.log(obj.next());
console.log(obj.next());
console.log(obj.next());
console.log(obj.next());
/* 출력값
{ done: false, value: 4 }
{ done: false, value: 3 }
{ done: false, value: 2 }
{ done: false, value: 1 }
{ done: true, value: undefined }
 */

{
  [Symbol.iterator]: function(){
    return {
      next: function(){
        return {value: 1, done: false};
      }
    };
  }
}

let arr = [1, 2, 3, 4];
while(arr.length >= 0){
  console.log(arr.pop());
}

while( 계속 반복할지 판단 ) {
  반복시마다 처리할 것
}

var obj = {
    array: [1, 2, 3, 4],
    next: function(){
        return {
            done: `계속 반복할지 판단`
            value: `반복시마다 처리할 것`
        };
    }
}

const loop = (iter, f) => {

    // iterable 이면 iterator 획득
    if(typeof iter[Symbol.iterator] == 'function'){
        iter = iter[Symbol.iterator]();
    }

    //iterator가 아니라면 건너뜀, 이런 패턴을 쉴드패턴(Shield pattern)
    if(typeof iter.next != 'function') return;

    while(true){
        const val = iter.next();
        if(val.done) return; // val.done 이 true 라면 종료
        f(val.value); // 아닐 시 val.value 전달
    }
};

var obj = {
    [Symbol.iterator](){return this;},
    array: [1, 2, 3, 4],
    next(){
        return {
            done: this.array.length == 0,
            value: this.array.pop()
        };
    }
};

loop(iter, console.log);
/* 출력값
4
3
2
1
*/

var obj = {
    [Symbol.iterator](){return this;},
    array: [1, 2, 3, 4],
    next(){
        return {
            done: this.array.length == 0,
            value: this.array.pop()
        };
    }
};

const N2 = class {
    constructor(max){
        this.max = max;
    }
    [Symbol.iterator](){
        let cursor = 0, max = this.max;
        return {
          done: false,
          next() {
              if(cursor >= max){
                  this.done = true;
              }else{
                  this.value = cursor * cursor;
                  cursor++;
              }
              return this;
          }
        };
    }
};
console.log([...new N2(5)]);

for(const v of new N2(5)){
    console.log(v);
}
/* 출력값
[ 0, 1, 4, 9, 16 ]
0
1
4
9
16
*/

function* name(parameter) {
   statements
}

function* generatorFunc(){
    console.log("제너레이터 함수 시작!");
    yield 1; // a 에는 yield 1; 이 할당되므로 undefined
    const a = yield 5;
    console.log(a);
    const b = yield (6 + a);
    const c = yield 1 + b;
    const d = yield 2 + c;
    return b + c + d;
    yield 10;
}

const gnObj = generatorFunc();

console.log(typeof gnObj[Symbol.iterator] === 'function'); // true, 이터러블 인터페이스를 갖춤
console.log(typeof gnObj.next === 'function'); // true, 이터레이터인터페이스를 갖춤
console.log(gnObj === gnObj[Symbol.iterator]()); // true, 제너레이터객체는 이터레이터
// 제너레이터 함수는 이터러블 인터페이스와 이터레이터 인터페이스를 동시에 갖추고있다.

console.log(gnObj.next());
//      출력: 제너레이터 함수 시작!
// yield 문 뒤의 1이 value 에 반환
//      출력: { value: 1, done: false }

console.log(gnObj.next());
// yield 문 뒤의 5가 value 에 반환
//      출력: { value: 5, done: false }

console.log(gnObj.next());
// next() 를 호출할때 아무 인자도 넣지 않았으므로, const a 는 undefined
//      출력: undefined
// 6 + a 인데 a 가 undefined 이므로 NaN 반환
//      출력: { value: NaN, done: false }

console.log(gnObj.next(50));
// 50을 parameter로 전달, const b = 50;
// yield 50 + 1이 반환
//      출력: { value: 51, done: false }

console.log(gnObj.next(100));
// 100을 parameter로 전달, const c = 100;
// yield 100 + 2 반환
//      출력: { value: 102, done: false }

console.log(gnObj.next(200));
// 200을 parameter로 전달, cont d = 200;
// return b + c + d = 350 반환, return 문을 만났으므로 done: true
//      출력: { value: 350, done: true }

console.log(gnObj.next());
//return문 뒤에 yield 가 있지만 return으로 done: true 라서 undefined 반환
//      출력: { value: undefined, done: true }

function* gnFunc(){
    yield console.log("hello");
    yield console.log("heecheol");
}
const gnObj = gnFunc();

console.log(gnObj.next());
// console.log("hello") 메서드가 실행이 된 후 console.log()의 반환값인 undefined 이 value에 반환
//          출력: hello
//          출력: { value: undefined, done: false }

console.log(gnObj.return(5));
// 제너레이터함수 외부에서 return()을 호출하여 제너레이터함수가 종료
// parameter가 IteratorObject 의 value 값에 저장되며 return() 호출로 반복을 종료했으므로 done은 true
//          출력: { value: 5, done: true }

console.log(gnObj.next());
//  next()를 호출하면 반복이 종료됐으므로 undefined와 true를 반환
//          출력: { value: undefined, done: true }

yield* expression;

function* gnFunc1(){
    const a = yield* gnFunc2();
    yield a;
    const attention = yield* [4, 5];
    console.log(attention);
    const attention2 = yield* (function*(){yield 6; yield 7;})();
    // yield* function*(){yield 8; yield 9;}; // 제너레이터함수를 선언한것이지 이터러블객체를 반환하는 표현이 아님
    console.log(attention2);
    const result = yield function*(){yield 8; yield 9; return "NotFinish"; }
    return result;
}
function* gnFunc2(){
    yield 1;
    yield 2;
    return "foo";
    yield 4;
}
const gnObj = gnFunc1();

console.log(gnObj.next());
// gnFunc2()가 호출되면서 나온 이터러블객체(= 제너레이터객체)를 next()로 호출함으로서 순회하고 반환되는 값을 yield
// 제너레이터객체의 첫번째 yield 뒤의 1이 gnObj이터레이터 value키의 값이 되고 yield
//      출력: { value: 1, done: false }

console.log(gnObj.next());
// 제너레이터객체의 두번째 yield 뒤의 2가 gnObj이터레이터 value키의 값이 되고 yield
//      출력: { value: 2, done: false }

console.log(gnObj.next());
// 제너레이터객체는 이때 return을 만나서 { value: "foo", done: true }
// done키가 true인 value "foo"가 yield*의 값이됨
// yield*의 값인 "foo"가 a에 할당
// a가 gnObj이터레이터의 value가 됨
//      출력: { value: 'foo', done: false }

console.log(gnObj.next());
// 이터러블객체인 Array를 next()로 호출함으로서 순회하고 반환되는 값을 yield
// 4가 반환되고 yield
//      출력: { value: 4, done: false }

console.log(gnObj.next());
// 5가 반환되고 yield
// 여기서 진짜 주의해야 할 점은 아직 Array의 속성은 { value: 5, done: false } gnObj이터레이터의 속성과는 별개
// gnObj이터레이터의 value는 5가 되고 yield, 아직 done이 false이므로 yield*의 값이 정해지지않음
//      출력: { value: 5, done: false }

console.log(gnObj.next());
// 이때의 next() 호출로 Array의 마지막이터레이터 속성은 { value: undefined, done: true } done이 true이므로
// yield*의 값은 undefined로 정해짐
// yield*의 값인 undefined가 attention에 할당
//      출력: undefined
// 제너레이터객체가 반환되는 제너레이터즉시실행함수 호출
// 제너레이터객체의 첫번째 yield문 뒤의 6이 gnObj이터레이터의 value가 되고 yield
//      출력: { value: 6, done: false }

console.log(gnObj.next());
// 제너레이터객체의 두번째 yield문 뒤의 7이 gnObj이터레이터의 value가 되고 yield
// 여기서도 주의, 이 때 제너레이터객체의 이터레이터 속성은 { value: 7, done: false } done이 false이므로
// yield*의 값이 정해지지않음
//      출력: { value: 7, done: false }

const gnFunc3 = gnObj.next().value;
// 이때 제너레이터객체의 이터레이터 속성은 { value: undefined, done: true } done이 true이므로
// yield*의 값은 undefined로 정해짐
//      출력: undefined

// 여기서 gnFunc1()의 마지막 yield 는 제너레이터 함수를 반환한다.
// 반환된 제너레이터 함수는 gnObj 이터레이터의 value키에 저장되므로 .value를 통해 접근
// gnFunc3에 제너레이터 함수 저장
// 물론 .value()를 통해 바로 제너레이터 객체를 얻을 수 있지만 천천히 개념을 잡기위해 이렇게함

console.log(typeof gnFunc3);
//      출력: function

const gnObj2 = gnFunc3();
// gnFunc3() 를 호출해서 반환된 제너레이터 객체를 gnObj2에 할당

console.log(gnObj2.next());
// gnObj2 이터레이터의 value에 8 저장 후 yield
//      출력: { value: 8, done: false }


console.log(gnObj2.next());
// gnObj2 이터레이터의 value에 9 저장 후 yield
//      출력: { value: 9, done: false }
// 여기서 done이 false 인 이유는 아직 yield로 정지 되어있기 때문임

console.log(gnObj2.next());
// return 구문을 만나 gnObj2의 마지막 이터레이터 속성이 { value: "NotFinish", done: true }
//      출력: { value: "NotFinish", done: true }
// 그러나 아직 gnObj는 yield 되어있음

console.log(gnObj.next('Finish'));
// parameteter로 'Finish' 를 전달해 result에 할당
// return 구문을 만나서 result가 gnObj 마지막 이터레이터의 value가 되고
// 반복이 끝나서 done은 true
//      출력: { value: 'Finish', done: true }