2nd/10_Wiki/Topic_JavaScript/JavaScript_Array_Iteration.md

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-array-iteration	JavaScript Array Iteration	Frontend	draft	conceptual		Array iteration forEach map filter reduce Array.from spread operator		B	0.9	2026-06-23	2026-06-23			javascript js web frontend w3schools array iteration	https://www.w3schools.com/js/js_array_iteration.asp

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

let text = "ABCDEFG";
Array.from(text);

With a map function: [S1]

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]

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]

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]

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]

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

Combine four arrays: [S1]

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]

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

Spread into Math functions: [S1]

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]

let a, rest;
const arr1 = [1,2,3,4,5,6,7,8];

[a, ...rest] = arr1;

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:

const numbers2 = numbers1.map(value => value * 2);

Keep matching elements:

const over18 = numbers.filter(value => value > 18);

Fold to a single value:

let sum = numbers.reduce((total, value) => total + value);

Merge / copy arrays:

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