<div id="readability-page-1" class="page"><div id="kakaoContent">

                <div>
                                            <p><a href="/m/category/Programming%20Language/%F0%9F%9F%A8%20Javascript%20%28Core%29">Programming Language/🟨 Javascript (Core)</a></p><h2>generator의 yield*로 for...of 대체하기</h2>
                    <p><cite>
                        <span>DarrenKwonDev</span>
                    </cite>
                </p></div>
                <p><time>2021. 5. 26. 00:53</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p>

                                    
                
                <div>
                    <p data-ke-size="size16">flatten을 lazy evaluation으로 만들기 위해 아래와 같은 함수를 작성했습니다.</p>
<p data-ke-size="size16">depth를 2 이상 가진 배열을 돌리면, 완전히 flatten되지 않습니다.</p>
<p data-ke-size="size16">우선 위 함수 내부에 for...of 문이 중첩되어 들어가는 것이 가독성이 좋지 않게 보이므로 yield *를 활용하여 가볍게 만들겠습니다.</p>
<pre id="code_1621957106773" data-ke-language="javascript" data-ke-type="codeblock"><code>// iterable 안의 값도 iterable이면 펼쳐내는 작업. 단, depth가 1인 경우만 됨
L.flatten = function* (iter) {
  for (const a of iter) {
    if (isIterable(iter)) {
      for (const b of a) {
        yield b;
      }
    } else {
      yield a;
    }
  }
};</code></pre>

<p data-ke-size="size16">yield* 란, iterable의 값들을 하나씩 펼쳐나가는 과정입니다.</p>
<pre id="code_1621957257211" data-ke-language="javascript" data-ke-type="codeblock"><code>// iterable인 a의 iterator의 value값을 for..of 문으로 뿌립니다.
for (const b of a) {
  yield b;
}

// 아래로 변경합니다.
yield* a;</code></pre>

<p data-ke-size="size16">아주 간단히 generator를 만들어보자면 아래와 같이 for...of 없이도 편리하게 iterator를 정의할 수 있습니다.</p>
<pre id="code_1621957871021" data-ke-language="javascript" data-ke-type="codeblock"><code>const testGen = function* (iter) {
  yield* iter;
};

const iter = testGen([1, 2, 3]);
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: undefined, done: true }
</code></pre>


<p data-ke-size="size16">이제 depth가 2 이상인 배열도 flatten할 수 있도록 만들겠습니다. 이를 위해서 재귀적으로 실행하게 만들어야 합니다.</p>
<p data-ke-size="size16">generator를 재귀적으로 실행할 수 있도록 함수형태로 만든 후에 yield* 에 값이 안인 함수를 배당하겠습니다.</p>
<pre id="code_1621957683022" data-ke-language="javascript" data-ke-type="codeblock"><code>L.deepFlatten = function* f(iter) {
  for (const a of iter) {
    if (isIterable(a)) yield* f(a);
    else yield a;
  }
};</code></pre>
                                                            
                    
					
                    
                    
                </div>

                                    
                
                
                                    
                
                


                

                                    
                
                
            </div></div>

HotHandCoding

DarrenKwon

flatten을 lazy evaluation으로 만들기 위해 아래와 같은 함수를 작성했습니다.
depth를 2 이상 가진 배열을 돌리면, 완전히 flatten되지 않습니다.
우선 위 함수 내부에 for...of 문이 중첩되어 들어가는 것이 가독성이 좋지 않게 보이므로 yield *를 활용하여 가볍게 만들겠습니다.
// iterable 안의 값도 iterable이면 펼쳐내는 작업. 단, depth가 1인 경우만 됨
L.flatten = function* (iter) {
  for (const a of iter) {
    if (isIterable(iter)) {
      for (const b of a) {
        yield b;
      }
    } else {
      yield a;
    }
  }
};
 
yield* 란, iterable의 값들을 하나씩 펼쳐나가는 과정입니다.
// iterable인 a의 iterator의 value값을 for..of 문으로 뿌립니다.
for (const b of a) {
  yield b;
}
// 아래로 변경합니다.
yield* a;
 
아주 간단히 generator를 만들어보자면 아래와 같이 for...of 없이도 편리하게 iterator를 정의할 수 있습니다.
const testGen = function* (iter) {
  yield* iter;
};
const iter = testGen([1, 2, 3]);
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: undefined, done: true }
 
 
이제 depth가 2 이상인 배열도 flatten할 수 있도록 만들겠습니다. 이를 위해서 재귀적으로 실행하게 만들어야 합니다.
generator를 재귀적으로 실행할 수 있도록 함수형태로 만든 후에 yield* 에 값이 안인 함수를 배당하겠습니다.
L.deepFlatten = function* f(iter) {
  for (const a of iter) {
    if (isIterable(a)) yield* f(a);
    else yield a;
  }
};

generator의 yield*로 for...of 대체하기

댓글