W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
8.1 KiB
id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
| id | title | category | status | verification_status | canonical_id | aliases | duplicate_of | source_trust_level | confidence_score | created_at | updated_at | review_reason | merge_history | tags | raw_sources | applied_in | github_commit | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| javascript-iterators | JavaScript Iterators | Frontend | draft | conceptual |
|
B | 0.87 | 2026-06-23 | 2026-06-23 |
|
|
JavaScript Iterators
🎯 한 줄 통찰 (One-line insight)
An iterator is an object that provides a standard way to access elements sequentially through a next() method; ES2025 adds iterator helper methods (map, filter, reduce, take, drop, etc.) and Iterator.from() that bring iteration directly into the core language. [S1]
🧠 핵심 개념 (Core concepts)
- Iterator = sequential access object — an iterator is an object that provides a standard way to access elements one after another. [S1]
- The iterator protocol — an iterator must implement a
next()method that returns an object withvalue(the next value) anddone(falsewhile more elements exist, otherwisetrue). [S1] for...ofconsumes iterables — thefor...ofstatement loops through the elements of an iterable object; iterables must implementSymbol.iterator. Built-in iterables are Strings, Arrays, Typed Arrays, Sets, and Maps. [S1]- Iterator helper methods (ES2025) — new helpers let you transform and consume iterators lazily:
drop,every,filter,find,flatMap,forEach,from,map,reduce,some,take. [S1]
🧩 추출된 패턴 (Extracted patterns)
Iterator.from(iterable)— wrap any iterable into an iterator object so the helper methods become available. [S1]- Lazy chaining — methods like
filter,map,take, anddropreturn a new iterator (not an array), enabling pipeline-style transformation of sequences. [S1] - Terminal reducers —
every,some,find,reduce, andforEachconsume the iterator to produce a single value or side effect. [S1]
📖 세부 내용 (Details)
JavaScript Iterators
An iterator is an object that provides a standard way to access elements sequentially. Iterators must adhere to the iterator protocol by implementing a next() method. [S1]
The next() Method
The next() method returns an object with two properties: value holds the next value in the iteration sequence, and done returns false if there are more elements, otherwise true. [S1]
The for...of Loop
The JavaScript for...of statement loops through the elements of an iterable object. Iterables must implement the Symbol.iterator method. In JavaScript the following are iterables: Strings, Arrays, Typed Arrays, Sets, and Maps — their prototypes have a Symbol.iterator method. [S1]
Iterator.from() — creates an iterator object from an iterable: [S1]
const myIterator = Iterator.from([1, 2, 3]);
let text = "";
for (const x of myIterator) {
text += x;
}
drop() — returns an iterator that skips a specified number of elements before yielding the rest: [S1]
const myIterator = Iterator.from([1, 2, 3, 4, 5, 6]);
const firstFive = myIterator.drop(5);
every() — returns true if all elements satisfy a test function: [S1]
const myIterator = Iterator.from("123456789");
let result = myIterator.every(x => x > 7);
filter() — returns an iterator containing elements that satisfy a filter function: [S1]
const myIterator = Iterator.from([32, 33, 16, 40]);
const filteredIterator = myIterator.filter(x => x > 18);
find() — returns the first element that satisfies a test function: [S1]
const myIterator = Iterator.from([3, 10, 18, 30, 20]);
let result = myIterator.find(x => x > 18);
flatMap() — returns an iterator by mapping each element and then flattening the results: [S1]
const myIterator = Iterator.from([1, 2, 3, 4, 5, 6]);
const mappedIterator = myIterator.flatMap(x => [x, x * 10]);
forEach() — executes a function once for each element in the iterator: [S1]
const myIterator = Iterator.from("123456789");
let text = "";
myIterator.forEach (x => text += x);
map() — returns an iterator with all elements transformed by a map function: [S1]
const myIterator = Iterator.from("123456789");
const mappedIterator = myIterator.map(x => x * 2);
reduce() — applies a reducer function against each element to reduce it to a single value: [S1]
const myIterator = Iterator.from([175, 50, 25]);
let result = myIterator.reduce(myFunc);
some() — returns true if at least one element satisfies a test function: [S1]
const myIterator = Iterator.from("123456789");
let result = myIterator.some(x => x > 7);
take() — returns an iterator that yields a specified number of elements: [S1]
const myIterator = Iterator.from([1, 2, 3, 4, 5, 6]);
const firstFive = myIterator.take(5);
Iterator Helper Methods (ES2025) [S1]
| Function | Description |
|---|---|
drop() |
Returns an iterator that skips a specified number of elements before yielding the rest |
every() |
Returns true if all elements satisfy a test function |
filter() |
Returns an iterator containing elements that satisfy a filter function |
find() |
Returns the first element that satisfies a test function |
flatMap() |
Returns an iterator by mapping each element and then flattening the results |
forEach() |
Executes a function once for each element in the iterator |
from() |
Creates an iterator object from an iterable |
map() |
Returns an iterator with all elements transformed by a map function |
reduce() |
Applies a reducer function against each element to reduce it to a single value |
some() |
Returns true if at least one element satisfies a test function |
take() |
Returns an iterator that yields a specified number of elements |
Iterators bring the iteration concept directly into the core JavaScript language and provide a mechanism for customizing the behavior of for...of. [S1]
🛠️ 적용 사례 (Applied in summary)
The page's own Iterator.from(...) snippets are the canonical applied examples — wrapping arrays and strings into iterators and applying filter, map, reduce, take, drop, and the predicate helpers. No external project/commit applications found in the source.
💻 코드 패턴 (Code patterns)
Wrap an iterable, then transform it (language: JavaScript):
const myIterator = Iterator.from([32, 33, 16, 40]);
const filteredIterator = myIterator.filter(x => x > 18);
Reduce to a single value:
const myIterator = Iterator.from([175, 50, 25]);
let result = myIterator.reduce(myFunc);
⚖️ 모순 및 업데이트 (Contradictions & updates)
The iterator helper methods (map, filter, reduce, take, drop, etc.) and Iterator.from() are an ES2025 addition; availability depends on the runtime supporting that version. [S1]
✅ 검증 상태 및 신뢰도
- 상태: draft
- 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
- 신뢰 점수: 0.87
- 중복 검사 결과: 신규 생성 (New discovery)
🔗 지식 그래프 (Knowledge Graph)
- 상위/루트: JavaScript Tutorial
- 관련 개념: JavaScript Iterables, JavaScript Generators, JavaScript Symbols
- 참조 맥락: Referenced when consuming sequences with
for...ofor composing lazy data pipelines with the ES2025 iterator helpers.
📚 출처 (Sources)
- [S1] W3Schools — JavaScript Iterators — https://www.w3schools.com/js/js_iterators.asp
📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Iterators" page (Astra wiki-curation, P-Reinforce v3.1 format).