배열에 원소를 추가 및 제거하는 네 가지 방법, unshift(), push(), shift(), pop()

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 배열에 원소를 추가 및 제거하는 네 가지 메소드에 대해서 알아보도록 하겠습니다.

알아볼 메소드는 unshift(), push(), shift(), pop() 메소드 들 입니다.

이들의 역할을 그림을 통해서 직관적으로 알아보도록 하겠습니다.

[ item1, item2, item3 ] 과 같은 배열이 있다고 생각해 봅시다.

이 배열에서 원소를 맨 앞에 추가하거나, 맨뒤의 원소를 제거하려면 어떤 메소드를 사용하면 좋을까요?

위의 그림과 같이 맨 앞의 원소를 추가하는 메소드는 unshift 메소드이고, 맨 뒤에 원소를 추가하는 메소드는 push 메소드 입니다.

원소를 제거하는 경우에는 제거 대상이 맨 앞의 원소일 경우 shift, 맨 뒤의 원소일 경우에는 pop 메소드를 사용합니다.

1. arr.unshift() 

arr.unshift([element1[, ...[, elementN]]])

unshift() 메소드의 표현식입니다.

파라메터 elementN 은 배열의 맨 앞에 추가할 요소들 입니다.

메소드의 리턴값은 메소드를 통해 원소가 추가된 배열의 length 값입니다.

예제를 통해 살펴보겠습니다.

var arr = [1, 2, 3, 4, 5];
 
arr.unshift(-1, 0);
// 7
 
console.log(arr);
//(7) [-1, 0, 1, 2, 3, 4, 5]

첫 번째 줄에서 arr 배열을 선언, 할당하였습니다. ( [1, 2, 3, 4, 5] )

그리고 3 번째 줄에서 unshift 메소드를 사용하였습니다. 메소드의 인자로 -1과 0을 주어 arr 배열의 맨 앞에 -1, 0 을 추가했습니다.

* 메소드의 리턴값은 배열의 길이 입니다. (arr.length = 7)

arr 를 콘솔에 찍어보니 원래 배열에서 -1, 0 이 추가된 것을 알 수 있습니다.

2. arr.push()

arr.push(element1, ..., elementN)

push() 메소드의 표현식입니다.

메소드의 파라메터 elementN 은 배열의 맨 뒤에 추가할 요소들 입니다.

메소드의 리턴값은 push() 메소드의 호출 이후 변경된 배열의 length 값입니다.

간단한 예제를 통해 살펴보겠습니다.

var arr = [1, 2, 3, 4, 5];
 
arr.push(7, 8, 9);
// 8
 
console.log(arr);
//(8) [1, 2, 3, 4, 5, 7, 8, 9]

위 코드의 세 번째 줄에서 push 메소드를 사용하여 arr 배열의 맨 마지막에 7, 8, 9 원소를 추가했습니다.

메소드의 리턴값은 변경된 배열의 lenght 값이므로 8 입니다. (4 번째 줄)

콘솔에 arr 를 찍어보면 원래의 arr 의 맨 뒤에 push() 메소드의 인자로 들어온 7, 8, 9 가 추가된 것을 알 수 있습니다.

3. arr.shift()

arr.shift()

shift() 메소드의 표현식입니다.

파라메터를 받지 않습니다.

shift() 메소드는 배열의 맨 앞 원소를 제거합니다.

* 파라메터로 어떤 값이 들어와도 맨 앞 원소 하나만 제거합니다.

메소드의 리턴값은 제거된 원소입니다.

* 만약 배열의 length 가 0 이라면 undefined 를 리턴합니다.

간단한 예제를 통해 살펴보도록 하겠습니다.

var arr = [1, 2, 3, 4, 5];
 
arr.shift();
//1
 
console.log(arr);
//(4) [2, 3, 4, 5]

위 코드의 세 번째 줄에서 shift 메소드를 사용했습니다.

리턴값은 제거된 원소이므로 원래 arr 배열의 맨 앞 원소인 1이 반환됩니다.

콘솔에 arr 를 찍어보면 원래 배열에서 맨 앞의 원소(1) 가 제거된 것을 알 수 있습니다.

4. arr.pop()

arr.pop()

pop() 메소드의 표현식입니다.

shift() 와 마찬가지로 파라메터를 받지 않으며, pop() 은 맨 마지막 원소를 하나 제거합니다.

메소드의 리턴값은 제거된 원소입니다.

* 빈 배열에 pop() 을 호출하면 undefined 가 리턴됩니다.

예제를 통해 살펴보겠습니다.

var arr = [1, 2, 3, 4, 5];
 
arr.pop();
//5
 
console.log(arr);
//(4) [1, 2, 3, 4]

코드의 세 번째 줄에서 pop() 메소드를 호출하였습니다.

이는 제거된 원소를 리턴하므로 5가 반환됩니다.

콘솔에 arr 를 찍어보면 마지막 원소가 제거된 것을 알 수 있습니다.

여기까지...

배열의 맨 앞이나 마지막에 원소를 추가 / 제거하는 메소드들에 대해서 알아보았습니다.

메소드의 리턴값은 변형된 배열이 아니라 length 값이나 제거된 값이라는 점에 주의해 주시면 메소드를 사용하는데 도움이 될 것이라 생각합니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)