2nd/10_Wiki/Topic_JavaScript/JavaScript_Array_Iteration.md

---
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).