[번역] 모든 것을 배열로 바꾸는 것을 그만두세요 (대신 일을 덜 하세요)

원문: Stop turning everything into arrays (and do less work instead)

대부분의 프론트엔드 코드는 데이터가 화면에 표시되기 훨씬 이전에 데이터를 처리합니다. 우리는 목록을 가져오고, 수정하고, 줄이고, 이 과정을 반복합니다. 하지만 보통 그 과정에서 우리가 얼마나 많은 작업을 하고 있는지 깊이 생각하지 않습니다.

 

수년간 현대 자바스크립트는 우리를 익숙한 패턴으로 이끌어 왔습니다.

data
  .map(...)
  .filter(...)
  .slice(...)
  .map(...)

가독성이 좋고 표현력도 풍부합니다. 하지만 즉시 평가되고(eager), 여러 배열을 할당하고 불필요한 작업을 자주 수행합니다.

 

자바스크립트의 이터레이터 헬퍼는 대규모 데이터셋, 스트림, UI 기반 로직을 처리할 때 특히 유용한 네이티브 지연 평가 방식의 대안을 제공합니다.

어디에나 배열이 있고 (필요 이상으로 훨씬 더 많은 작업이 발생합니다)

다음과 같은 UI 시나리오를 생각해 보세요.

• 대규모 데이터셋을 가져옵니다
• 필터링합니다
• 처음 몇 개의 결과를 추출합니다
• 그 결과를 렌더링합니다

const visibleItems = items
  .filter(isVisible)
  .map(transform)
  .slice(0, 10);

나쁘지 않아 보이죠? 솔직히 말하면, 저도 이런 문구를 몇 번이나 썼는지 모를 정도입니다. 하지만 내부적으로는 꽤 많은 작업을 하고 있습니다.

1. filter는 새로운 배열을 생성합니다.
2. map은 또 다른 배열을 생성합니다.
3. slice도 역시 또 하나의 배열을 생성합니다.

비록 10개 항목만 필요하더라도, 수천 개를 처리했을 수 있습니다. 바로 이 불일치가 문제의 핵심입니다. 그리고 이 지점에서 이터레이터 헬퍼가 빛을 발합니다.

그래서 이터레이터 헬퍼(Iterator Helpers)가 무엇인가요?

이테레이터 헬퍼는 배열이 아닌 이테레이터 객체에 적용할 수 있는 체인 가능 메서드입니다.

이 구분은 중요합니다. 그리고 처음에는 놓치기 쉽습니다. 배열이 마법처럼 이런 메서드를 갖게 되는 것은 아닙니다. values(), keys(), entries() 또는 제너레이터를 통해 이터레이터를 얻어야 합니다. 그런 다음 그 위에 지연 파이프라인을 구축할 수 있습니다.

 

이터레이터 헬퍼를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

• map
• filter
• take
• drop
• flatMap
• find, some, every
• reduce
• toArray

이러한 헬퍼의 대부분은 게으르게(lazzy) 동작하며, 즉 필요할 때만 값을 가져옵니다.

⚠️ 참고: reduce는 결과를 생성하기 위해 모든 값을 확인해야 하므로 이터레이터를 즉시 소모합니다.

일반적으로 게으름이란 다음을 의미합니다.

• 중간 배열이 없습니다
• 불필요한 작업이 발생하지 않습니다
• 그리고 무엇보다도 가능한 한 빨리 작업을 중단합니다

원하는 결과를 설명하면, 런타임은 필요한 경우에만 값을 가져옵니다

기본적으로 게으르게

이터레이터 헬퍼를 사용하면 동일한 논리를 다음과 같이 표현할 수 있습니다.

const visibleItems = items
  .values()
  .filter(isVisible)
  .map(transform)
  .take(10)
  .toArray();

그렇다면 여기서 실제로 무엇이 달라졌을까요?

• items.values()는 배열이 아니라 이터레이터를 반환합니다
• 각 단계는 다음 값이 요청될 때만 실행됩니다
• 10번 조건을 만족하면 처리가 중단됩니다

실제 앱에서 이로 인해 얻는 것

순수한 속도만이 중요한 것은 아닙니다. 핵심은 불필요한 작업을 피하는 데 있습니다. 이터레이터 헬퍼는 더 나은 UI 패턴을 가능하게 합니다.

대규모 목록 렌더링

다음과 같은 작업을 처리하고 있다고 가정해 봅시다.

• 가상화된 목록
• 무한 스크롤
• 대규모 테이블

지연 반복은 화면에 표시되지 않는 항목을 처리하지 않는다는 의미입니다.

function* rows(data) {
  for (const row of data) {
    yield renderRow(row);
  }
}

const visibleRows = rows(data)
  .filter(isInViewport)
  .take(20)
  .toArray();

필요한 것만 정확히 렌더링하고, 그 이상은 수행하지 않습니다.

스트리밍 및 비동기 데이터

비동기 이터러블(Async Iterables)은 자체적인 이터레이터 헬퍼를 제공하므로, 페이지 분할된 API나 스트림 처리에 매우 적합합니다.

async function* fetchPages() {
  let page = 1;
  while (true) {
    const res = await fetch(`/api/items?page=${page++}`);
    if (!res.ok) return;
    yield* await res.json();
  }
}

const firstTen = await fetchPages().filter(isValid).take(10).toArray();

전체 응답을 버퍼링할 필요도 없고, 수동으로 카운터를 관리할 필요도 없습니다. 파이프라인을 설명하기만 하면, 런타임이 필요한 부분만 가져옵니다.

💡 더 알아볼 준비가 되셨나요?
루프에서 await가 어떻게 동작하는지, 그리고 비동기 로직을 효율적으로 구성하는 방법을 살펴보세요.

더 깔끔한 데이터 파이프라인 (유틸리티 라이브러리 없이)

이터레이터 헬퍼가 등장하기 전에는 게으른 파이프라인을 구현하기 위해 별도의 라이브러리를 사용해야 했습니다. 이제는 언어 자체에 내장되었습니다.

const ids = users
  .values()
  .map((u) => u.id)
  .filter(Boolean)
  .toArray();

읽기 쉽고, 네이티브이며, 의존성이 없습니다.

이터레이터 헬퍼 vs 배열 메서드

이터레이터 헬퍼	배열 메서드
지연 처리	즉시 처리
중간 배열 없음	중간 배열 생성
가능한 한 빨리 작업 중단	모든 항목 처리
약간의 러닝 커브	친숙함

경험상 전체 배열이 필요하지 않다면, 배열을 생성하지 않는 것이 좋습니다.

이테레이터 헬퍼를 사용하지 말아야 할 때

이터레이터 헬퍼는 강력하지만, 모든 상황에서 배열을 대체할 수는 없습니다. 모든 경우에 억지로 적용하려 하면 오히려 코드 가독성만 떨어질 수 있습니다. 다음과 같은 경우에는 적합하지 않습니다.

• 임의 접근이 필요한 경우 (items[5])
• 배열 변형에 크게 의존하는 경우
• 데이터 크기가 작아 단순성이 더 중요한 경우

알아두어야 할 주의사항

이터레이터 헬퍼는 몇 가지 중요한 측면에서 배열과 다르게 동작합니다.

주의사항	의미	중요한 이유
일회용 이터레이터	한 번 소비되면 다시 사용할 수 없습니다	동일한 파이프라인을 두 번 사용할 수 없음
게으른 실행	소비되기 전까지 아무 작업도 실행되지 않습니다	부수 효과가 사라진 것처럼 보일 수 있습니다
순차 접근만 가능	임의 접근이 불가능합니다	items[5]와 같은 패턴은 사용할 수 없습니다
디버깅시 데이터 소모	로깅시 이터레이터가 이동합니다	console.log 등의 로그가 동작 방식을 바꿀 수 있습니다

이터레이터는 이미 존재하는 데이터가 아니라 아직 수행되지 않은 작업으로 생각해야 합니다.

지금 당장 사용할 수 있나요?

이터레이터 헬퍼는 모든 최신 브라우저와 Node 22 이상에서 지원됩니다. 현재 버전을 대상으로 한다면 문제없이 사용할 수 있습니다.

일부러 일을 덜 하기

오랫동안 자바스크립트는 모든 것을 열성적으로 배열로 변환하도록 우리를 훈련시켜 왔습니다. 반복자 헬퍼는 또 다른 선택지를 제공합니다.

• 더 적은 작업을 수행하고
• 더 적은 메모리를 할당하며
• UI가 실제로 작동하는 방식에 부합하는 파이프라인을 작성할 수 있게 합니다

게으른 반복에 익숙해지면, 열성적인 체인으로 돌아가는 방식은 다소 낭비처럼 느껴질 것입니다.

 

🚀 한국어로 된 프런트엔드 아티클을 빠르게 받아보고 싶다면 Korean FE Article을 구독해주세요!