# 07-8. 배열내장 함수(shift, unshift, pop, push)

## 배열내장 함수

배열을 다룰 때 알고있으면 너무나 유용한 다양한 내장 함수들에 대하여 알아보겠습니다.

> 중요!
>
> shift, unshift, pop, push 4개 모두  \
> 중요한점은 기존의 배열(원본의 데이터를)도 수정을 한다는 것입니다.

### unshift & shift

#### unshift

`unshift` 는 **첫번째 원소에** 배열의 새 원소를 추가합니다.

```javascript
const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers);
```

결과는 다음과 같습니다.

```javascript
[5, 10, 20, 30, 40]
```

#### shift

`shift` 는 **첫번째 원소부터** 배열에서 추출해줍니다. (추출하는 과정에서 배열에서 해당 원소는 사라집니다.)

```javascript
const numbers = [10, 20, 30, 40];
const value = numbers.shift();

console.log(value);
console.log(numbers);
```

결과는 다음과 같습니다.

```javascript
10
[20, 30, 40]
```

###

### push & pop

#### push

`push`는 **마지막 원소** 배열에서  추가를 해줍니다.

```javascript
const numbers = [10, 20, 30, 40];
numbers.push(50);
console.log(numbers)
```

결과는 다음과 같습니다.

```javascript
50
```

#### pop

`pop`는 **마지막 원소부터** 배열에서 추출해줍니다. (추출하는 과정에서 배열에서 해당 원소는 사라집니다.)

```javascript
const numbers = [10, 20, 30, 40];
const value = numbers.pop();

console.log(value);
console.log(numbers);
```

결과는 다음과 같습니다.

```
40
[10, 20, 30]
```

`pop` 은 `push` 의 반대로 생각하시면 됩니다. `push` 는 배열의 맨 마지막에 새 항목을 추가하고, `pop` 은 맨 마지막 항목을 추출합니다.


---

# 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://triplexlab.gitbook.io/vanilla-js/basics/07-array/07-7-shift-pop-unshift-push.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.