Iterator 도우미가 새로운 기준으로 제공됨

Jeremy Wagner

게시일: 2025년 5월 1일

JavaScript를 작성하는 경우 반복은 자주 실행하는 작업입니다. 배열을 사용하기 위해 루프를 작성하거나 map, filter와 같은 함수 프로그래밍 메서드 또는 기타 유사한 메서드를 사용하여 모든 종류의 데이터를 처리합니다.

하지만 이러한 메서드를 사용할 때 한 가지 문제가 있습니다. 배열에서만 사용할 수 있다는 점입니다. 반복 가능한 객체에서 이를 사용하려면 반복 가능한 객체를 배열로 변환한 다음 필요한 메서드를 호출해야 합니다. 이는 낭비가 될 수 있으며, 인터러블이 생성자 함수를 사용하여 무한 데이터 세트를 포함하는 경우에는 불가능합니다. 하지만 이제 반복자 도우미가 새로운 기준으로 제공되므로 모든 브라우저에서 이 기능을 사용할 수 있습니다.

반복자 도우미는 어떻게 작동하나요?

Iterator 도우미는 Iterator 객체의 prototype에 새 메서드를 정의하여 노출됩니다. 이러한 메서드는 map, filter, reduce 및 기타 유사한 메서드와 같이 익숙하게 사용하는 많은 함수 프로그래밍 메서드와 일치합니다.

예를 들어 filter 메서드에서 iterator 도우미를 사용하여 DOM 노드 컬렉션의 innerText 속성 콘텐츠를 기준으로 목록 항목을 필터링할 수 있습니다. 그런 다음 나중에 for 루프에서 사용할 수 있습니다.

const posts = document.querySelectorAll("ul#specific-list > li")
  .values()
  .filter(item => item.textContent.includes("kiwi"));

// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
  console.log(post.textContent);
}

위의 코드 스니펫에서 filter의 반복자 도우미 메서드는 특정 <ul> 요소의 모든 <li> 요소를 반복하는 데 사용됩니다. 필터링 기준은 각 요소의 텍스트 콘텐츠에 "kiwi"의 하위 문자열이 포함되어야 한다는 것입니다.

반복자 도우미는 생성자 함수와 함께 사용할 수도 있습니다. 이 예에서는 계승을 계산하지만, 반복자 도우미를 사용하여 값을 8로 나눌 수 있는 값으로 필터링하고 필터링된 처음 5개 값을 콘솔에 로깅하는 생성자 함수를 보여줍니다.

function* factorials (n) {
  let result = 1;

  for (let i = 1; i <= n; i++) {
    result *= i;

    yield result;
  }
}

const filteredFactorials = factorials(128).filter(x => x % 8 === 0);

console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);

특히 위의 코드 스니펫은 이터레이터 도우미로는 불가능한 작업의 예입니다. 팩토리얼의 수는 무한대이며 배열로 변환할 수 없기 때문입니다.

상황에 따라 반복자 도우미는 많은 잠재력을 발휘할 수 있으며, 다음과 같은 반복 가능한 메서드 각각에 사용할 수 있습니다.

반복자 도우미 사용 사례의 가능성은 무궁무진하며 개발자 작업 환경을 크게 개선할 수 있습니다. 이제 기준점으로 새롭게 제공되므로 시간이 지남에 따라 호환성 문제를 우려하지 않고 사용할 수 있다는 확신이 점점 커질 것입니다. 자세한 내용은 다음 리소스를 확인하세요.