# 배열의 요소 추가 삭제(push, pop, unshift, shift, splice, slice)

## 1. 개요

배열의 요소를 추가하고나 삭제하는 방법에 대해 알아보자. 각각의 메서드의 특징을 잘 알고 상황에 맞게 필요한 메서드를 사용하자.

***

## 2. Array.push()

* **특징**: 배열의 끝에 하나 이상의 요소를 추가, 원본 배열을 수정
* **반환 값**: 호출한 배열의 새로운 길이
* **구문**

  ```javascript
  arr.push(element1[, ...[, elementN]])
  ```
* **매개변수**
  * `elementN`: 배열의 끝에 추가할 요소

예시를 통해 `Array.push()`메서드의 사용법을 알아보자.

```javascript
const color = ["black", "red", "white"];
const length = color.push("blue");
```

![array\_push](/files/2DnhwnvklsO0bYmXJcWN)

```javascript
const length2 = color.push("green", "yellow");
```

![array\_push2](/files/3FmlLzIRbUC2tK1qTeFi)

***

## 3. Array.pop()

* **특징**: 배열의 마지막 요소를 제거, 원본 배열을 수정
* **반환 값**: 배열에서 제거한 요소, 빈 배열에 `pop()`을 호출하면 `undefined`을 반환
* **구문**

  ```javascript
  arr.pop();
  ```

예시를 통해 `Array.pop()`메서드의 사용법을 알아보자.

```javascript
const color = ["black", "red", "white", "blue", "green", "yellow"];
const popItem = color.pop();
```

![array\_pop](/files/saerEOOUgKWDPYrz7oDJ)

***

## 4. Array.unshift()

* **특징**: 새로운 요소를 배열의 맨 앞에 추가, 원본 배열을 수정
* **반환 값**: 호출한 배열의 새로운 길이
* **구문**

  ```javascript
  arr.unshift([...elementN]);
  ```
* **매개변수**
  * `elementN`: 배열 맨 앞에 추가할 요소

예시를 통해 `Array.unshift()`메서드의 사용법을 알아보자.

```javascript
const color = ["black", "red", "white"];
const length = color.unshift("blue", "green");
```

![array\_unshift](/files/QZ9DG2htnh7ZH6wPSvDR)

***

## 5. Array.shift()

* **특징**: 배열의 첫 번째 요소를 제거, 원본 배열을 수정
* **반환 값**: 배열에서 제거한 요소, 빈 배열에 `shift()`을 호출하면 `undefined`을 반환
* **구문**

  ```javascript
  arr.shift();
  ```

예시를 통해 `Array.shift()`메서드의 사용법을 알아보자.

```javascript
const color = ["blue", "green", "black"];
const shiftItem = color.shift();
```

![array\_shift](/files/1AqtegIXsla8hiEoR2ml)

***

## 6. Array.splice()

* **특징**: 배열의 기존 요소를 삭제하거나 새 요소를 추가하여 원본 배열의 내용을 변경
* **반환 값**: 제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환
* **구문**

  ```javascript
  array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  ```
* **매개변수**
  * `start`
    * 배열의 변경을 시작할 인덱스
    * 음수인 경우 배열의 끝에서부터 요소를 세어 나감
    * -n일 경우 요소 끝의 n번째 요소를 가르키며 `array.length - n`번째 인덱스와 같음
  * `deleteCount`(Optional)
    * 배열에서 제거할 요소의 수
    * `deleteCount`를 생략하거나 값이 `array.length - start`보다 클 경우 `start`부터의 모든 요소를 제거
    * `deleteCount`값이 0이하라면 어떤 요소도 삭제하지 않지만 최소한 하나의 새로운 요소를 지정해야 함
  * `item1, item2, ...`
    * 배열에 추가할 요소
    * 아무 요소를 지정하지 않으면 삭제만 함

예시를 통해 `Array.splice()`메서드의 사용법을 알아보자.

***

### 6-1. 특정 인덱스의 요소부터 마지막 요소까지 삭제하는 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const removeItem = color.splice(3);
```

인덱스가 3인 요소(green)부터 마지막 요소(yellow)까지 삭제를 한다.

`color`배열엔 삭제한 요소를 제외한 요소들이 있고 `removeItem`배열엔 삭제한 요소들이 있다.

![array\_splice](/files/FOcpbZPqERLN2iJK0Vte)

***

### 6-2. 특정 인덱스의 요소부터 특정 수 만큼 삭제하는 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const removeItem = color.splice(3, 3);
```

인덱스가 3인 요소(green)부터 3개의 요소를 삭제한다.

`color`배열엔 삭제한 요소를 제외한 요소들이 있고 `removeItem`배열엔 삭제한 요소들이 있다.

![array\_splice2](/files/bpTUYKiQT9rGC57ZrYqp)

***

### 6-3. 특정 인덱스의 요소부터 특정 수 만큼 삭제한 후 다른 새로운 요소를 추가하는 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const removeItem = color.splice(2, 2, "gray", "orange");
```

1. 인덱스가 2인 요소(white)부터 2개의 요소를 삭제한다.
2. 삭제된 자리에 새로운 요소 2개(gray, orange)를 추가한다.

`color`배열엔 삭제한 요소를 제외한 요소과 새롭게 추가된 요소들이 있고 `removeItem`배열엔 삭제한 요소들이 있다.

![array\_splice3](/files/UcWOMNtarXSFOiMxC619)

***

### 6-4. 어떤한 요소도 삭제하기 않고 특정 인덱스 이후에 새로운 요소를 추가하는 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const removeItem = color.splice(4, 0, "gray", "orange");
```

인덱스가 4인 요소(blue) 이전에 새로운 요소 2개(gray, orange)를 추가한다.

`color`배열엔 기존 요소에 새롭운 요소가 추가되어 있고 `removeItem`배열은 삭제된 요소가 없으니 빈 배열이다.

![array\_splice4](/files/T9ltfQjMK8GtXiyqk366)

이때 주의해야 할 점은 `start` 이후에 새로운 값이 추가되는 것이 아니라 `start` 이전에 새로운 값이 추가되는 것이다.

***

## 7. Array.slice()

* **특징**: 어떤 배열의 `begin`부터 `end`까지(`end` 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.
* **반환 값**: 추출한 요소를 포함한 새로운 배열
* **구문**

  ```javascript
  arr.slice([begin[, end]])
  ```
* **매개변수**
  * `begin`(Optional)
    * 추출 시작점에 대한 인덱스
    * 음수일 경우 배열의 끝에서부터의 길이, `slice(-2)`는 배열에서 마지막 두 개의 엘리먼트를 추출
    * `undefined`인 경우 0번 인덱스부터 추출
    * 배열의 길이와 같거나 큰 경우 빈 배열을 반환
  * `end`(Optional)
    * 추출을 종료 할 인덱스
    * `end` 인덱스를 제외하고 추출, `slice(2, 4)`는 두번째부터 세번째 요소까지 추출
    * 음수일 경우 배열의 끝에서부터 길이, `slice(2, -1)`는 세번째부터 끝에서 두번째 요소까지 추출
    * 생략되거나 배열의 길이와 같거나 크다면 배열의 마지막 요소까지 추출

예시를 통해 `Array.slice()`메서드의 사용법을 알아보자.

항상 알아두어야 할 것은 `Array.slice()`메서드는 원본 배열을 바꾸지 않는다는 것이다.

***

### 7-1. 매개변수가 모두 생략된 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const newColor = color.slice();
```

`begin`, `end`가 모두 생략된 경우에는 0번 인덱스부터 배열의 끝까지의 요소를 추출한다.

![array\_slice1](/files/ZAOSjWRsdiPS0Edu2BAK)

***

### 7-2. begin이 undefined인 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const newColor = color.slice(undefined, 4);
```

* `begin`이 `undefined`이므로 0번 인덱스부터 추출을 시작한다.
* `end`가 4이므로 4번 인덱스 앞(green)까지 추출한다.

![array\_slice2](/files/yYzbBrKOQr18INJ2q47e)

***

### 7-3. begin이 배열의 길이와 같거나 큰 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const newColor1 = color.slice(color.length);
const newColor2 = color.slice(color.length + 1);
```

위의 `newColor1`, `newColor2` 모두 빈 배열을 반환한다.

![array\_slice3](/files/YJK7Lx5EzsqVzPkoNAq9)

***

### 7-4. end가 생략되거나 배열의 길이와 같거나 큰 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const newColor1 = color.slice(2);
const newColor2 = color.slice(2, color.length);
```

`end`가 생략되거나 배열의 길이와 같거나 큰 경우에는 배열의 마지막 요소까지 추출한다.

![array\_slice4](/files/2p1AA3kq4eOVZeGtrMv1)

***

### 7-5. begin에 해당하는 요소부터 end의 앞까지의 요소를 추출하는 경우

```javascript
const color = ["blue", "black", "white", "green", "blue", "red", "yellow"];
const newColor = color.slice(2, 5);
```

* `begin`이 2이므로 세번째의 요소부터 추출을 시작한다.
* `end`가 5이므로 다섯번째 요소까지 추출한다.

![array\_slice5](/files/xDaTizXsxPRzj0lepsbh)

***

## 8. Array.concat()

* **특징**: 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환, 원본 배열을 변경하지 않음
* **반환 값**: 추가된 새로운 배열
* **구문**

  ```javascript
  array.concat([value1[, value2[, ...[, valueN]]]])
  ```

예시를 통해 `Array.slice()`메서드의 사용법을 알아보자.

***

### 8-1. 배열 두 개 이어붙이기

```javascript
const color1 = ["blue", "black", "white"];
const color2 = ["green", "blue", "red"];
const newColor = color1.concat(color2);
```

![array\_concat1](/files/DhR9vQU3PGPJZDnWUNO6)

***

### 8-2. 배열 세 개 이어붙이기

```javascript
const num1 = [1, 2];
const num2 = [3, 4];
const num3 = [5, 6];
const newNum = num1.concat(num2, num3);
```

![array\_concat2](/files/c6uogIRAqwd35fXuAONq)

***

### 8-3. 배열에 값 이어붙이기

```javascript
const color1 = ["blue", "black"];
const color2 = ["green", "blue"];
const newColor = color1.concat("gray", color2, "yellow");
```

![array\_concat3](/files/SHXGHCdEYGggWBqZFcPA)

***

## 9. 정리하기

1. 배열에 새로운 요소를 추가하는 메서드
   * Array.push()
   * Array.unshift()
   * Array.splice()
   * Array.concat()
2. 배열에 요소를 제거하는 메서드
   * Array.pop()
   * Array.shift()
   * Array.splice()
   * Array.slice(): 해당 메서드는 원본 배열을 바꾸지 않아 엄밀히 말하면 배열에 요소를 제거하진 않지만 제거된 요소를 제외한 나머지 요소를 가지는 배열을 반환하기 때문에 해당 범주에 넣었다.
3. 원본 배열을 바꾸는 메서드
   * Array.push()
   * Array.pop()
   * Array.unshift()
   * Array.shift()
   * Array.splice()
4. 원본 배열을 바꾸지 않는 메서드
   * Array.slice()
   * Array.concat()

***

## 10. Conclusion

> 이번 챕터에서 정리한 많은 메서드 중 개인적으로 가장 많이 사용하고 있는 메서드는 `Array.push()`메서드이다. 그 외의 메서드는 필요할 때만 구글에 검색을 하여 사용하곤 했다. 하지만 항상 헷갈리던 메서드가 있었다. 바로 `Array.splice()`메서드와 `Array.slice()`메서드이다. 가장 큰 이유는 두 메서드의 이름이 비슷해서지 않을까 싶다. 이번 기회에 해당 메서드의 쓰임에 대해 정확히 이해하고 필요한 상황에 맞게 메서드를 적절히 사용하자.\
> 나름 정리한 내용은 아래와 같다.
>
> > `Array.splice()`메서드: 요소를 제거하거나 제거된 자리에 다른 요소를 추가\
> > `Array.slice()`메서드: 원본배열을 수정하기 않으면서 원하는 요소를 추출

***

## 참고

[MDN - Array.prototype.push()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push)\
[MDN - Array.prototype.pop()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)\
[MDN - Array.prototype.unshift()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)\
[MDN - Array.prototype.shift()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)\
[MDN - Array.prototype.splice()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)\
[MDN - Array.prototype.slice()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)\
[MDN - Array.prototype.concat()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

***

📅 2022-08-14


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://noah-dev.gitbook.io/til/javascript/arraymethod/addremove.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.