2nd/10_Wiki/Topic_JavaScript/JavaScript_Array_Methods.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-methods	JavaScript Array Methods	Frontend	draft	conceptual		array methods push pop shift unshift splice slice concat toString join		B	0.89	2026-06-23	2026-06-23			javascript js web frontend w3schools arrays array-methods data-structures	https://www.w3schools.com/js/js_array_methods.asp

JavaScript Array Methods

🎯 한 줄 통찰 (One-line insight)

JavaScript arrays come with built-in methods to read, add, remove, copy, and slice elements — some mutate the original array (push, pop, splice) while others return a new one (concat, slice). [S1]

🧠 핵심 개념 (Core concepts)

• Rich built-in method set — arrays expose methods for length, conversion, access, addition, removal, copying, and slicing. [S1]
• Mutating methods — push, pop, shift, unshift, splice, and copyWithin modify the original array. [S1]
• Non-mutating methods — concat, slice, and flat return a new array without changing the source. [S1]
• delete leaves holes — using delete on an array element leaves undefined holes; use pop() or shift() instead. [S1]
• at() is the modern accessor — array.at(index) returns the element at an index (an ES2022 alternative to bracket access). [S1]

🧩 추출된 패턴 (Extracted patterns)

• End operations — push (add) / pop (remove) work at the end. [S1]
• Start operations — unshift (add) / shift (remove) work at the start. [S1]
• Mid-array edit — splice(start, deleteCount, ...items) inserts and/or removes at any position. [S1]
• Extract a copy — slice(start, end) returns a new sub-array without mutating the original. [S1]

📖 세부 내용 (Details)

Array length The length property returns the length (number of elements) of an array: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

toString() The toString() method converts an array to a string of (comma separated) array values: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let myList = fruits.toString();

at() The at() method returns an indexed element from an array (the same value as bracket access): [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

This is equivalent to bracket notation: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

join() The join() method joins all array elements into a string. It behaves like toString(), but you can specify the separator: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

pop() The pop() method removes the last element from an array: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

The pop() method returns the value that was "popped out": [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

push() The push() method adds a new element to an array (at the end): [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

The push() method returns the new array length: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

shift() The shift() method removes the first array element and "shifts" all other elements to a lower index: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

The shift() method returns the value that was "shifted out": [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

unshift() The unshift() method adds a new element to an array (at the beginning) and "unshifts" older elements: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Changing elements Array elements are accessed using their index number. Setting an indexed value changes that element: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

Deleting elements Since arrays are objects, array elements can be deleted with the JavaScript operator delete. Using delete leaves undefined holes in the array — use pop() or shift() instead: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];   // Changes the first element to undefined

concat() The concat() method creates a new array by merging (concatenating) existing arrays. It does not change the existing arrays: [S1]

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

concat() can take any number of array arguments: [S1]

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

concat() can also take values (strings) as arguments: [S1]

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

copyWithin() The copyWithin() method copies array elements to another position in the array, overwriting existing values: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

flat() The flat() method (ES2019) creates a new array by flattening a nested array into a one-dimensional array: [S1]

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

splice() The splice() method can be used to add new items to an array. The first parameter defines the position where new elements should be added (spliced in); the second parameter defines how many elements should be removed; the remaining parameters define the new elements to be added: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

With a non-zero second parameter, splice() removes elements while adding: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

You can use splice() to remove elements without leaving holes: [S1]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

slice() The slice() method slices out a piece of an array into a new array. It does not remove any elements from the source array. This example slices out a part of the array starting from element 1 ("Orange"): [S1]

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

Starting from element 3 ("Apple"): [S1]

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

The slice() method can take two arguments — slice(1, 3) selects elements from the start argument up to (but not including) the end argument: [S1]

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

🛠️ 적용 사례 (Applied in summary)

The page's snippets are the applied cases: managing a fruits array by reading its length, converting/joining to a string, adding/removing at either end (push/pop/shift/unshift), editing in the middle (splice), and producing new arrays without mutation (concat, slice, flat). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

End/start add-remove (language: JavaScript):

fruits.push("Kiwi");    // add at end
fruits.pop();           // remove from end
fruits.unshift("Lemon"); // add at start
fruits.shift();         // remove from start

Insert/remove anywhere:

fruits.splice(2, 0, "Lemon", "Kiwi"); // insert at index 2, remove 0
fruits.splice(2, 2, "Lemon", "Kiwi"); // remove 2 at index 2, then insert

New array without mutation:

const merged = arr1.concat(arr2);
const part = fruits.slice(1, 3);

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• Mutating vs. non-mutating — push/pop/shift/unshift/splice/copyWithin change the original; concat/slice/flat return a new array. Choose by whether you want to preserve the source. [S1]
• delete vs. pop/shift/splice — delete leaves undefined holes; prefer pop/shift/splice to remove cleanly. [S1]
• at() vs. bracket access — both return the element at an index; at() is the newer (ES2022) accessor. [S1]
• toString() vs. join() — both stringify; join() lets you choose the separator. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source. The page notes version origins for some methods (flat() is ES2019; at() is ES2022).

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: JavaScript Tutorial
• 관련 개념: JavaScript Arrays, JavaScript Array Search, JavaScript Array Sort, JavaScript Array Iteration
• 참조 맥락: Referenced whenever transforming or restructuring array data in JavaScript.

📚 출처 (Sources)

• [S1] W3Schools — JavaScript Array Methods — https://www.w3schools.com/js/js_array_methods.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Array Methods" page (Astra wiki-curation, P-Reinforce v3.1 format).