0Pricing
JavaScript Academy · 강의

반복 가능 프로토콜과 for...of

반복 가능 프로토콜을 배웁니다. Symbol.iterator와 iterator.next()를 사용하고, 작은 사용자 정의 예제로 for...of, 전개 구문, Array.from을 활용합니다.

반복 가능 프로토콜과 for...of은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

전체 그림

목표: 작은 iterable을 읽고 만듭니다.

  • iterable의 의미
  • Symbol.iterator와 iterator.next()
  • for...of, spread, Array.from
  • 0부터 N까지 세는 Counter 예제 만들기
반복 가능 프로토콜과 for...of — 일러스트레이션 1

내장 객체에서 for...of 사용

for...of는 배열과 문자열 같은 내장 iterable에서 작동하며 항목을 순서대로 반환합니다.

// Arrays and strings are iterable
const arr = [10, 20, 30];
for (const n of arr) {
  console.log("arr item:", n);
}

const word = "JS";
for (const ch of word) {
  console.log("char:", ch);
}
반복 가능 프로토콜과 for...of — 일러스트레이션 2

사용자 정의 iterable

iterable에는 반복자를 반환하는 [Symbol.iterator]()가 있으며, 반복자의 next()는 { value, done }을 반환합니다.

// A tiny iterable that counts 0..max-1
const Counter = {
  make: function (max) {
    return {
      max: max,
      // Symbol.iterator returns an iterator object
      [Symbol.iterator]: function () {
        let i = 0;
        return {
          next: function () {
            if (i < max) {
              const out = { value: i, done: false };
              i = i + 1;
              return out;
            }
            return { value: undefined, done: true };
          }
        };
      }
    };
  }
};

for (const x of Counter.make(3)) {
  console.log("count:", x);
}
반복 가능 프로토콜과 for...of — 일러스트레이션 3

수동 반복

내부적으로 for...of는 done: true가 될 때까지 next()를 반복해서 호출합니다.

// You can drive the iterator manually
const iterable = Counter.make(2);
const it = iterable[Symbol.iterator]();

console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }
반복 가능 프로토콜과 for...of — 일러스트레이션 4

전개와 Array.from

전개와 Array.from도 iterable 프로토콜을 사용해 값을 모읍니다.

// Spread (...) and Array.from consume iterables
const small = Counter.make(4);
const a1 = [...small];
const a2 = Array.from(Counter.make(3));

console.log("spread:", a1);
console.log("from :", a2);
반복 가능 프로토콜과 for...of — 일러스트레이션 5

좋은 습관

팁:

  • [Symbol.iterator]에서는 매번 새로운 반복자를 반환하십시오.
  • 무한 반복을 피하려면 항상 done: true로 끝내십시오.
  • 반복자 클로저 내부에 상태를 로컬로 유지하십시오.
반복 가능 프로토콜과 for...of — 일러스트레이션 6

Iterable 프로토콜 퀴즈

빠른 확인: 객체를 iterable로 만드는 방법입니다.

반복 가능 프로토콜과 for...of — 일러스트레이션 7

복습

복습: 배열 같은 내장 객체는 iterable입니다. 직접 만들려면 반복자를 반환하는 [Symbol.iterator]()를 추가하십시오. 값을 소비할 때는 for...of, spread 또는 Array.from을 사용하십시오.

반복 가능 프로토콜과 for...of — 일러스트레이션 8

자주 묻는 질문

“반복 가능 프로토콜과 for...of” 강의는 무료인가요?

네 — “반복 가능 프로토콜과 for...of” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“반복 가능 프로토콜과 for...of”에서 뭘 배우나요?

반복 가능 프로토콜을 배웁니다. Symbol.iterator와 iterator.next()를 사용하고, 작은 사용자 정의 예제로 for...of, 전개 구문, Array.from을 활용합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.

“반복 가능 프로토콜과 for...of” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 반복 가능 프로토콜과 for...of
  2. 제너레이터 함수, yield와 작은 파이프라인
  3. 비동기 반복자 — for await...of와 비동기 제너레이터
← JavaScript Academy(으)로 돌아가기