2nd/10_Wiki/Topic_JavaScript/JavaScript_Array_Methods.md

---
id: javascript-array-methods
title: "JavaScript Array Methods"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["array methods", "push pop shift unshift", "splice slice", "concat", "toString join"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["javascript", "js", "web", "frontend", "w3schools", "arrays", "array-methods", "data-structures"]
raw_sources: ["https://www.w3schools.com/js/js_array_methods.asp"]
applied_in: []
github_commit: ""
---

# [[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]
```javascript
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]
```javascript
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]
```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
```
This is equivalent to bracket notation: [S1]
```javascript
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]
```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
```

**`pop()`**
The `pop()` method removes the last element from an array: [S1]
```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
```
The `pop()` method returns the value that was "popped out": [S1]
```javascript
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]
```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
```
The `push()` method returns the new array length: [S1]
```javascript
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]
```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
```
The `shift()` method returns the value that was "shifted out": [S1]
```javascript
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]
```javascript
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]
```javascript
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]
```javascript
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]
```javascript
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
```
`concat()` can take any number of array arguments: [S1]
```javascript
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]
```javascript
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]
```javascript
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]
```javascript
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]
```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
```
With a non-zero second parameter, `splice()` removes elements while adding: [S1]
```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
```
You can use `splice()` to remove elements without leaving holes: [S1]
```javascript
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]
```javascript
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
```
Starting from element 3 ("Apple"): [S1]
```javascript
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]
```javascript
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):
```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:
```javascript
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:
```javascript
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).