자바스크립트 - 사용자 정의 이터레이터: 초보자 가이드
안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 사용자 정의 이터레이터의 세계에 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 친절한 안내자로서 모든 것을 단계별로 설명해 드릴 것입니다. 따뜻한 커피 한 잔을 손에 들고, 이제 시작해 보겠습니다!
이터레이터는 무엇인가요?
깊은 바다로 뛰어들기 전에, 기본 개념부터 시작해 보겠습니다. 상상해 보세요, 초콜릿 상자가 하나 있습니다 (음미!). 이터레이터는 마법의 손처럼 하나씩 초콜릿을 골라주고, 이미 먹은 것을 추적해 줍니다.
자바스크립트의 용어로는, 이터레이터는 next() 메서드를 정의한 객체로, 이 메서드는 시퀀스의 다음 항목을 반환합니다. 이 메서드가 이터레이터 마법의 핵심입니다!
next() 메서드: 이터레이션의 핵심
next() 메서드는 모든 행동이 일어나는 곳입니다. 이것은 우리 이터레이터 자동차의 엔진입니다. 이를 깨부추어 보겠습니다:
next()의 구조
{
value: any,
done: boolean
}이 메서드는 두 속성을 가진 객체를 반환합니다:
-
value: 시퀀스의 다음 값. -
done: 시퀀스가 끝났는지 여부를 나타내는 불리언.
간단한 예제를 통해 이를 실제로 보겠습니다:
function simpleIterator() {
let count = 0;
return {
next: function() {
count++;
if (count <= 3) {
return { value: count, done: false };
}
return { value: undefined, done: true };
}
};
}
const iterator = simpleIterator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }이 예제에서, 우리의 이터레이터는 3까지 카운트합니다. next()를 호출할 때마다 다음 번호를 반환할 때까지 계속합니다. 이는 작은 카운팅 기계와 같습니다!
사용자 정의 이터레이터: 자신만의 마법을 만들기
이제 기본 개념을 이해했으므로, 우리 자신의 이터레이터를 만들어 보겠습니다. 상상해 보세요, 우리가 좋아하는 노래 목록을 만들고 있습니다. 우리는 이 목록을 순회하는 이터레이터를 만들 것입니다.
function playlistIterator(songs) {
let currentIndex = 0;
return {
next: function() {
if (currentIndex < songs.length) {
return {
value: songs[currentIndex++],
done: false
};
} else {
return { done: true };
}
}
};
}
const myPlaylist = ['Bohemian Rhapsody', 'Stairway to Heaven', 'Hotel California'];
const myMusicIterator = playlistIterator(myPlaylist);
console.log(myMusicIterator.next()); // { value: 'Bohemian Rhapsody', done: false }
console.log(myMusicIterator.next()); // { value: 'Stairway to Heaven', done: false }
console.log(myMusicIterator.next()); // { value: 'Hotel California', done: false }
console.log(myMusicIterator.next()); // { done: true }여기서 우리는 playlistIterator를 만들어 우리의 노래 배열을 순회합니다. next()를 호출할 때마다 다음 노래를 반환할 때까지 계속합니다. 이는 우리의 개인 DJ와 같습니다!
객체를 이터러블하게 만들기
우리는 우리의 객체를 이터러블하게 만들 수도 있습니다. Book 객체를 만들어 페이지를 순회할 수 있게 만들어 보겠습니다:
const Book = {
title: 'The Great Gatsby',
pages: ['It was the best of times...', 'Call me Ishmael...', 'The end.'],
[Symbol.iterator]: function() {
let pageIndex = 0;
return {
next: () => {
if (pageIndex < this.pages.length) {
return { value: this.pages[pageIndex++], done: false };
} else {
return { done: true };
}
}
};
}
};
for (let page of Book) {
console.log(page);
}이 예제는 Book 객체를 만들어 for...of 루프를 사용하여 페이지를 순회할 수 있게 합니다. 이는 책의 페이지를 넘기는 것과 같습니다!
실용적인 응용: 어디에서 사용할 수 있을까요?
사용자 정의 이터레이터는 다양한 상황에서 매우 유용합니다:
- 사용자 정의 데이터 구조: 자신만의 데이터 구조를 만들었을 때, 어떻게 순회해야 할지 정의할 수 있습니다.
- Lazy Evaluation: 메모리에 모든 값을 저장하지 않고 즉시 값을 생성합니다.
- 무한 시퀀스: 피보나치 수열과 같은 가능성이 무한한 시퀀스를 만들 수 있습니다.
무한 피보나치 수열 이터레이터의 예제를 보겠습니다:
function fibonacciIterator() {
let [prev, curr] = [0, 1];
return {
next: function() {
[prev, curr] = [curr, prev + curr];
return { value: prev, done: false };
}
};
}
const fib = fibonacciIterator();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5이 이터레이터는 영원히 피보나치 수열을 생성할 것입니다! 이는 수학의 요정을 소환하는 것과 같습니다.
결론: 이터레이션의 힘
사용자 정의 이터레이터는 우리가 데이터를 어떻게 순회할지 제어할 수 있는 힘을 주어줍니다. 이는 우리가 원하는 대로 코드를 탐색하는 데 도움이 되는 맞춤형 도구입니다. 책의 페이지를 넘기거나, 재생 목록을 순회하거나, 무한한 수학적 시퀀스를 생성하는 등, 이터레이터는 모든 것을 커버합니다!
이터레이터를 완벽하게 습득하는 열쇠는 연습입니다. 다양한 상황에 맞는 이터레이터를 만들어 보세요.也许는 카드 덱을 순회하는 이터레이터나 소수를 생성하는 이터레이터를 만들어 보세요. 가능성은 무한합니다!
행복하게 코딩하시고, 이터레이터가 항상 다음 값을 찾아주길 바랍니다!
Credits: Image by storyset