TypeScript - 이터레이터와 생성자

안녕하세요, 미래의 코딩 슈퍼스타! TypeScript의 흥미로운 여정에 오신 것을 환영합니다. 이터레이터와 생성자의 마법의 세계를 탐험해 보겠습니다. 이 용어들이 지금은 외계 기술처럼 들리시겠지만, 이 튜토리얼의 끝을 맞아서는 이를 마스터하신 것입니다! 그麼, 손을 걷어붙이고 시작해 보겠습니다!

이터레이터

상상해 보세요. 다양한 장난감이 가득 찬 장난감 상자가 있습니다. 이터레이터는 상자를 바닥에 뿌리지 않고 하나씩 장난감을 돌려보는 마법의 지팡이입니다. 멋지죠? TypeScript에서 이게 어떻게 작동하는지 보겠습니다!

이터레이터는 무엇인가요?

이터레이터는 next() 메서드를 정의한 객체로, 시퀀스의 다음 항목을 반환합니다. 더 이상 항목이 없을 때는 시퀀스가 끝났음을 나타내는 특별한 값을 반환합니다.

우리의 첫 이터레이터를 만들어 보겠습니다:

function createNumberIterator() {
let n = 0;
return {
next: function() {
n += 1;
if (n <= 5) {
return { value: n, done: false };
}
return { value: undefined, done: true };
}
};
}

const numberIterator = createNumberIterator();
console.log(numberIterator.next()); // { value: 1, done: false }
console.log(numberIterator.next()); // { value: 2, done: false }
console.log(numberIterator.next()); // { value: 3, done: false }
console.log(numberIterator.next()); // { value: 4, done: false }
console.log(numberIterator.next()); // { value: 5, done: false }
console.log(numberIterator.next()); // { value: undefined, done: true }

이 예제에서 우리는 1에서 5까지 카운트하는 이터레이터를 만들었습니다. next()를 호출할 때마다 다음 숫자를 반환합니다. 5에 도달하면 { value: undefined, done: true }를 반환하여 끝났음을 알립니다.

이터레이터를 for...of 루프와 함께 사용하기

TypeScript는 for...of 루프와 함께 이터레이터를 사용하는 것을 더 쉽게 만듭니다. 어떻게 하는지 보겠습니다:

function* numberGenerator() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
}

for (const num of numberGenerator()) {
console.log(num);
}
// 출력:
// 1
// 2
// 3
// 4
// 5

이 for...of 루프는 자동으로 이터레이터를 사용하여 모든 값을 순회합니다. 마치 박스에서 특정 장난감을 하나씩 꺼내주는 로봇 비서似的입니다!

생성자

이제 생성자에 대해 이야기해 보겠습니다. 이터레이터는 마법의 지팡이라면, 생성자는 이러한 마법의 지팡이를 훨씬 적은 노력으로 만들 수 있는 마법사입니다!

생성자는 무엇인가요?

생성자는 일시정지하고 재개할 수 있는 특별한 함수로, 시간이 지남에 따라 시퀀스의 값을 생성할 수 있습니다. 한 번에 모든 값을 계산하고 배열로 반환하는 대신 말입니다.

우리의 첫 생성자를 만들어 보겠습니다:

function* countToFive() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
}

const generator = countToFive();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
console.log(generator.next().value); // 4
console.log(generator.next().value); // 5
console.log(generator.next().value); // undefined

이 예제에서 countToFive는 생성자 함수입니다. yield 키워드는 "다음 값을 줄게, 하지만 이 후에는 일시정지해요."라고 말하는 것입니다. next()를 호출할 때마다 함수는 yield에 도달할 때까지 실행되어 값을 반환하고 그 후 일시정지합니다.

생성자와 루프

생성자는 루프와 함께 사용할 때 더욱 강력해집니다. 예제를 보겠습니다:

function* evenNumbersUnder20() {
for (let i = 2; i < 20; i += 2) {
yield i;
}
}

for (const num of evenNumbersUnder20()) {
console.log(num);
}
// 출력:
// 2
// 4
// 6
// 8
// 10
// 12
// 14
// 16
// 18

이 생성자는 20 이하의 모든 짝수를 생성합니다. 마치 특정 종류의 장난감만 내어주는 지능형 장난감 분배기似的입니다!

이터레이터와 생성자의 차이

이제 이터레이터와 생성자를 모두 보았으니, 중요한 차이점을 정리해 보겠습니다:

기능	이터레이터	생성자
정의	next() 메서드를 정의한 객체	* 기호를 가진 함수
상태 관리	수동	자동
생성의 용이성	더 복잡	간단
일시정지/재개	내장되지 않음	yield로 내장됨
메모리 효율성	큰 데이터셋에 대해 더 효율적	큰 또는 무한 시퀀스에 최적화

이터레이터는 장난감 로봇을 스스로 만드는 것처럼 - 모든 작은 부분을 정의해야 합니다. 반면에 생성자는 이미 만들어진 로봇을 쉽게 사용하고 커스터마이즈할 수 있습니다. 둘 다 자리와 용도가 있습니다!

실제 세계의 예제

이제 배운 내용을 결합한 재미있는 실제 세계의 예제를 마무리로 보겠습니다:

function* fibonacciGenerator() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

const fib = fibonacciGenerator();
for (let i = 0; i < 10; i++) {
console.log(fib.next().value);
}
// 출력:
// 0
// 1
// 1
// 2
// 3
// 5
// 8
// 13
// 21
// 34

이 생성자는 피보나치 수열을 생성합니다 - 각 숫자는 이전 두 숫자의 합입니다. 마치 끝없는 계단에서 각 단계가 이전 두 단계에서 만들어지는 것처럼!

그렇습니다, 제 코딩 제자들! 우리는 이터레이터와 생성자의 땅을 거쳐 여정을 했고, 그들의 유사점과 차이점을 보았고, 심지어 우리 자신의 마법을 만들었습니다. 연습이 완벽을 만들어라, 이 개념들을 실험하지 않으시오. 누가 알겠는가, 새로운 이터레이터와 생성자의 힘으로 어떤 놀라운 프로그램을 만들어낼 수 있을까요? 행복하게 코딩하시고, 코드가 첫 번째 시도에서 항상 컴파일되기를 바랍니다!

Credits: Image by storyset