docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
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>
This commit is contained in:
@@ -0,0 +1,316 @@
|
||||
---
|
||||
id: javascript-array-iteration
|
||||
title: "JavaScript Array Iteration"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["Array iteration", "forEach", "map", "filter", "reduce", "Array.from", "spread operator"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.9
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["javascript", "js", "web", "frontend", "w3schools", "array", "iteration"]
|
||||
raw_sources: ["https://www.w3schools.com/js/js_array_iteration.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[JavaScript Array Iteration]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Array iteration methods operate on every array item — `forEach` runs a function per element, `map`/`flatMap`/`filter` produce new arrays, `reduce`/`reduceRight` fold to a single value, and `every`/`some` test conditions — while `Array.from`, `keys`, `entries`, the spread `...` and rest `...` round out array traversal and construction. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`forEach()`** calls a function once for each array element. The callback receives value, index, and array; index and array are optional. [S1]
|
||||
- **`map()`** creates a new array by performing a function on each element, without changing the original. [S1]
|
||||
- **`flatMap()`** (ES2019) maps each element then flattens the result by one level. [S1]
|
||||
- **`filter()`** creates a new array with the elements that pass a test. [S1]
|
||||
- **`reduce()`** runs a function on each element to reduce the array to a single value, working left-to-right; it can take an initial value. [S1]
|
||||
- **`reduceRight()`** works like `reduce()` but right-to-left. [S1]
|
||||
- **`every()`** checks if all elements pass a test; **`some()`** checks if some (at least one) pass. [S1]
|
||||
- **`Array.from()`** returns an array object from any iterable, with an optional map function. [S1]
|
||||
- **`keys()`** returns an Array Iterator with the keys; **`entries()`** returns key/value pairs. [S1]
|
||||
- **`with()`** (ES2023) returns a new array with one element replaced, without mutating the original. [S1]
|
||||
- **The spread `...` operator** expands an iterable into individual elements; **rest `...`** collects remaining elements during destructuring. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Side-effect pass** — `forEach` for running an action per element. [S1]
|
||||
- **Transform pass** — `map`/`flatMap` to produce a transformed new array. [S1]
|
||||
- **Select pass** — `filter` to keep matching elements. [S1]
|
||||
- **Fold pass** — `reduce`/`reduceRight` to accumulate to one value, optionally with a seed. [S1]
|
||||
- **Test pass** — `every`/`some` for all-match / any-match booleans. [S1]
|
||||
- **Combine/copy** — spread `[...a, ...b]` to merge or `[...a]` to copy arrays. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**Array forEach()** — calls a function (a callback function) once for each array element. The callback takes value, index, array (index and array are optional): [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let txt = "";
|
||||
numbers.forEach(myFunction);
|
||||
|
||||
function myFunction(value, index, array) {
|
||||
txt += value + "<br>";
|
||||
}
|
||||
```
|
||||
With only the value parameter: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let txt = "";
|
||||
numbers.forEach(myFunction);
|
||||
|
||||
function myFunction(value) {
|
||||
txt += value + "<br>";
|
||||
}
|
||||
```
|
||||
|
||||
**Array map()** — creates a new array by performing a function on each array element. It does not execute the function for array elements without values and does not change the original array: [S1]
|
||||
```javascript
|
||||
const numbers1 = [45, 4, 9, 16, 25];
|
||||
const numbers2 = numbers1.map(myFunction);
|
||||
|
||||
function myFunction(value, index, array) {
|
||||
return value * 2;
|
||||
}
|
||||
```
|
||||
With only the value parameter: [S1]
|
||||
```javascript
|
||||
const numbers1 = [45, 4, 9, 16, 25];
|
||||
const numbers2 = numbers1.map(myFunction);
|
||||
|
||||
function myFunction(value) {
|
||||
return value * 2;
|
||||
}
|
||||
```
|
||||
|
||||
**Array flatMap()** — ES2019 added `flatMap()`, which first maps all elements of an array and then creates a new array by flattening the array: [S1]
|
||||
```javascript
|
||||
const myArr = [1, 2, 3, 4, 5, 6];
|
||||
const newArr = myArr.flatMap(x => [x, x * 10]);
|
||||
```
|
||||
|
||||
**Array filter()** — creates a new array with array elements that pass a test: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
const over18 = numbers.filter(myFunction);
|
||||
|
||||
function myFunction(value, index, array) {
|
||||
return value > 18;
|
||||
}
|
||||
```
|
||||
With only the value parameter: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
const over18 = numbers.filter(myFunction);
|
||||
|
||||
function myFunction(value) {
|
||||
return value > 18;
|
||||
}
|
||||
```
|
||||
|
||||
**Array reduce()** — runs a function on each array element to produce (reduce it to) a single value. It works from left-to-right and does not reduce the original array: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let sum = numbers.reduce(myFunction);
|
||||
|
||||
function myFunction(total, value, index, array) {
|
||||
return total + value;
|
||||
}
|
||||
```
|
||||
With only total and value parameters: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let sum = numbers.reduce(myFunction);
|
||||
|
||||
function myFunction(total, value) {
|
||||
return total + value;
|
||||
}
|
||||
```
|
||||
With an initial value (100): [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let sum = numbers.reduce(myFunction, 100);
|
||||
|
||||
function myFunction(total, value) {
|
||||
return total + value;
|
||||
}
|
||||
```
|
||||
|
||||
**Array reduceRight()** — runs a function on each array element to produce a single value, working from right-to-left: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let sum = numbers.reduceRight(myFunction);
|
||||
|
||||
function myFunction(total, value, index, array) {
|
||||
return total + value;
|
||||
}
|
||||
```
|
||||
With only total and value parameters: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let sum = numbers.reduceRight(myFunction);
|
||||
|
||||
function myFunction(total, value) {
|
||||
return total + value;
|
||||
}
|
||||
```
|
||||
|
||||
**Array every()** — checks if all array values pass a test: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let allOver18 = numbers.every(myFunction);
|
||||
|
||||
function myFunction(value, index, array) {
|
||||
return value > 18;
|
||||
}
|
||||
```
|
||||
With only the value parameter: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let allOver18 = numbers.every(myFunction);
|
||||
|
||||
function myFunction(value) {
|
||||
return value > 18;
|
||||
}
|
||||
```
|
||||
|
||||
**Array some()** — checks if some array values pass a test: [S1]
|
||||
```javascript
|
||||
const numbers = [45, 4, 9, 16, 25];
|
||||
let someOver18 = numbers.some(myFunction);
|
||||
|
||||
function myFunction(value, index, array) {
|
||||
return value > 18;
|
||||
}
|
||||
```
|
||||
|
||||
**Array.from()** — returns an Array object from any object with a length property or any iterable object. Create an array from a string: [S1]
|
||||
```javascript
|
||||
let text = "ABCDEFG";
|
||||
Array.from(text);
|
||||
```
|
||||
With a map function: [S1]
|
||||
```javascript
|
||||
const myNumbers = [1,2,3,4];
|
||||
const myArr = Array.from(myNumbers, (x) => x * 2);
|
||||
```
|
||||
|
||||
**Array keys()** — returns an Array Iterator object with the keys of an array: [S1]
|
||||
```javascript
|
||||
const fruits = ["Banana", "Orange", "Apple", "Mango"];
|
||||
const keys = fruits.keys();
|
||||
|
||||
for (let x of keys) {
|
||||
text += x + "<br>";
|
||||
}
|
||||
```
|
||||
|
||||
**Array entries()** — returns an Array Iterator object with key/value pairs: [S1]
|
||||
```javascript
|
||||
const fruits = ["Banana", "Orange", "Apple", "Mango"];
|
||||
const f = fruits.entries();
|
||||
|
||||
for (let x of f) {
|
||||
document.getElementById("demo").innerHTML += x;
|
||||
}
|
||||
```
|
||||
|
||||
**Array with()** — ES2023 added the `with()` method as a safe way to update elements without altering the original array: [S1]
|
||||
```javascript
|
||||
const months = ["Januar", "Februar", "Mar", "April"];
|
||||
const myMonths = months.with(2, "March");
|
||||
```
|
||||
|
||||
**Array Spread (...)** — the `...` operator expands an iterable into more elements. Combine two arrays: [S1]
|
||||
```javascript
|
||||
const arr1 = [1, 2, 3];
|
||||
const arr2 = [4, 5, 6];
|
||||
|
||||
const arr3 = [...arr1, ...arr2];
|
||||
```
|
||||
Combine four arrays: [S1]
|
||||
```javascript
|
||||
const q1 = ["Jan", "Feb", "Mar"];
|
||||
const q2 = ["Apr", "May", "Jun"];
|
||||
const q3 = ["Jul", "Aug", "Sep"];
|
||||
const q4 = ["Oct", "Nov", "Des"];
|
||||
|
||||
const year = [...q1, ...q2, ...q3, ...q4];
|
||||
```
|
||||
Copy an array: [S1]
|
||||
```javascript
|
||||
const arr1 = [1, 2, 3];
|
||||
const arr2 = [...arr1];
|
||||
```
|
||||
Spread into Math functions: [S1]
|
||||
```javascript
|
||||
const numbers = [23,55,21,87,56];
|
||||
let minValue = Math.min(...numbers);
|
||||
let maxValue = Math.max(...numbers);
|
||||
```
|
||||
|
||||
**Array Rest (...)** — collects remaining elements during destructuring: [S1]
|
||||
```javascript
|
||||
let a, rest;
|
||||
const arr1 = [1,2,3,4,5,6,7,8];
|
||||
|
||||
[a, ...rest] = arr1;
|
||||
```
|
||||
```javascript
|
||||
let a, b, rest;
|
||||
const arr1 = [1,2,3,4,5,6,7,8];
|
||||
|
||||
[a, b, ...rest] = arr1;
|
||||
```
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's own snippets are the canonical applied examples — doubling numbers with `map`, filtering values over 18, summing with `reduce`, merging quarters into a year with spread, and replacing a month with `with`. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Transform every element:
|
||||
```javascript
|
||||
const numbers2 = numbers1.map(value => value * 2);
|
||||
```
|
||||
Keep matching elements:
|
||||
```javascript
|
||||
const over18 = numbers.filter(value => value > 18);
|
||||
```
|
||||
Fold to a single value:
|
||||
```javascript
|
||||
let sum = numbers.reduce((total, value) => total + value);
|
||||
```
|
||||
Merge / copy arrays:
|
||||
```javascript
|
||||
const arr3 = [...arr1, ...arr2];
|
||||
const copy = [...arr1];
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **`forEach` vs `map`** — `forEach` is for side effects and returns nothing useful; `map` returns a new transformed array. [S1]
|
||||
- **`reduce` vs `reduceRight`** — same folding behavior but opposite direction (left-to-right vs right-to-left). [S1]
|
||||
- **`every` vs `some`** — `every` requires all elements to pass; `some` requires at least one. [S1]
|
||||
- **Spread vs rest** — same `...` token; spread expands an iterable into elements, rest collects leftover elements during destructuring. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source. Version provenance noted: `flatMap` is ES2019; `with` is ES2023. [S1]
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.90
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[JavaScript Tutorial]]
|
||||
- **관련 개념:** [[JavaScript Array Search]], [[JavaScript Array Sort]], [[JavaScript Array Const]]
|
||||
- **참조 맥락:** Referenced whenever you need to traverse, transform, filter, or reduce array data.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — JavaScript Array Iteration — https://www.w3schools.com/js/js_array_iteration.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Array Iteration" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user