댓글 검색 목록

[javascript] 3 분 만에 JavaScript Generators 이해

페이지 정보

작성자 운영자 작성일 20-07-10 15:49 조회 686 댓글 0

JavaScript의 생성기 유형은 종종 논의되지 않습니다. 실제로 사용하려는 시나리오가 거의 없기 때문입니다. 그러나 이 기능의 유용성을 무효화하지는 않습니다. 이러한 시나리오가 결국 완료되면 벨트 아래에 발전기를 갖게 되어 기쁩니다.


https://medium.com/swlh/understand-javascripts-generators-in-3-minutes-8af75c9c4f5f 


프로그래밍의 대부분의 것과 마찬가지로 생성기 유형은 도구일 뿐입니다. 이 경우 전문 도구입니다.


작동 중인 발전기의 예를 살펴본 다음 각 단계를 수행하고 작동 방식을 살펴 보겠습니다.


Image for post 


여기에 생성기가 정의되어 있습니다. * 및 yield 키워드가 있다는 점을 제외하면 일반 함수와 매우 유사하다는 것을 알 수 있습니다. * JavaScript에 생성기 함수임을 알려줍니다. 우리는 1 분 안에 수확량이 무엇을 하는지 논의 할 것입니다. 먼저 발전기의 예를 보여 드리겠습니다.

Image for post 


someGenerator는 이터레이터를 반환하여 다음 메소드에 액세스 할 수 있습니다. 다음에 호출 할 때마다 함수는 yield 문이 나타날 때까지 코드를 실행합니다. yield 문을 만나면 next가 다시 호출 될 때까지 실행을 일시 중지합니다. someGenerator가 실행을 마치면 다음에 다음에 호출 할 때 값이 true로 설정된 키가 있는 객체를 받습니다.


꽤 깔끔하지? 잘 반환 된 반복자는 실제로 그 이상을 할 수 있습니다. 또한 스프레드 연산자와 같은 다른 반복자 메소드뿐만 아니라 명령문에 액세스 할 수 있습니다.


Image for post 


이제 생성기 사용에 대한 기본 사항을 알았습니다. 사용 사례를 살펴 보겠습니다. 일반적인 사용 사례는 인덱스를 기반으로 하는 ID 생성기의 상태를 유지하는 것입니다. 항목의 맵 / 객체가 있고 사용자가 이 맵에 항목을 추가 할 수있는 기능을 노출하려고 한다고 가정 해 봅시다. 각 항목은 삽입 된 순서에 따라 고유 한 ID를 가져야 합니다. 생성기를 통해 ID 생성을 달성 할 수 있습니다.

Image for post 


또 다른 예는 UX 흐름을 단일 기능으로 추상화 하는 것입니다. UX 디자인이 있다고 상상해보십시오. 사용자가 버튼을 클릭 한 다음 계산을 한 다음 계산이 완료되면 다른 버튼을 표시하고 해당 버튼을 클릭 한 후 더 많은 계산을 수행 한 다음 창을 새로 고칩니다.


이 모든 것을 단일 함수에 넣을 수는 있지만 혼동 될 수 있습니다. 대신 UX 디자인의 순서를 알고 있기 때문에 생성기를 사용할 수 있습니다.


Image for post 


여기서 우리는 UX 디자인과 논리를 성공적으로 격리했습니다. 따라서 테스트, 가독성 및 결과적으로 유지 관리가 쉬워집니다. 계산을 마칠 때마다 UI에서 다음 단계를 보여줍니다.


결론 


생성기가 필요하지는 않지만 자주 생성하면 기뻐할 것입니다. 반복을 돕고 정렬 된 값의 게으른 평가가 필요할 때 깨끗한 솔루션을 제공합니다.



댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.