[Javascript] 배열 앞, 뒤에 값 추가, 삭제하기 (1)

 

지난번에는 배열을 선언하는 방법을 알아보았습니다.

[Javascript] 배열 선언하는 2가지 방법

 

이번에는 배열의 앞과 뒤에 값을 추가하는 방법을 알아보도록 하겠습니다.

 

 

배열 값 추가, 삭제하기 (앞, 뒤, 중간)

배열에 값을 추가할 때는 위 그림과 같이 5개의 함수를 주로 사용합니다.

 

배열의 맨 앞에 값 추가 : unshift()
배열의 맨 앞 값 제거 : shift()
배열의 맨 뒤에 값 추가 : push()
배열의 맨 뒤 값 제거 : pop()
배열의 중간에 값 추가, 삭제 : splice()

 

 

---

 

 unshift() 

arr.unshift([...elementN])

배열의 맨 앞에 파라미터로 전달 받은 element들을 추가합니다.

 

파라미터

배열의 앞 부분에 추가할 elements

 

리턴 값

파라미터로 전달된 elements가 추가 된, 새로운 배열의 길이를 리턴합니다.

 

 

 예제 1 

See the Pen 배열 by anna (@hianna) on CodePen.

const length = arr.unshift('orange');

unshift() 메소드를 이용하여, 배열의 맨 앞에 'orange' element를 추가하였습니다.

unshift() 메소드는 새로운 배열의 길이인 3을 리턴하고,

arr는 ['orange', 'apple', 'banana'] 값을 가지게 되었습니다.

 

 

 예제 2 

See the Pen 배열 by anna (@hianna) on CodePen.

unshift() 메소드를 이용하여 배열의 맨 앞에 element를 여러개 추가 할 수도 있습니다.

 

 

 shift() 

arr.shift()

shift() 메소드는 배열의 가장 첫 element를 삭제하고, 삭제한 element를 리턴합니다.

 

파라미터

없음

 

리턴값

삭제한 element

 

 

 예제 

See the Pen 배열 by anna (@hianna) on CodePen.

line 3~7

let removed = arr.shift();

배열의 첫번째 원소를 삭제하였습니다.

shift() 메소드는 삭제한 원소인 'apple'을 리턴하고,

배열에서 'apple'이 삭제되고 'banana' 만 남습니다.

 

line 9~13

removed = arr.shift();

배열의 첫번째 원소를 삭제하였습니다.

shift() 메소드는 삭제한 원소인 'banana'을 리턴하고,

배열에서 'banana'가 삭제되고 이제 배열은 비었습니다.

 

line 15~18

removed = arr.shift();

비어있는(더 이상 삭제할 원소가 없는) 배열에서 shift() 메소드를 호출하여, 삭제를 시도하였습니다.

shift() 메소드는 undefined를 리턴합니다.

 

 

 push() 

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

push() 메소드는 배열의 맨 끝에 새로운 element를 추가합니다.

 

파라미터

배열의 맨 뒷 부분에 추가할 elements

 

리턴 값

파라미터로 전달된 elements가 추가 된, 새로운 배열의 길이를 리턴합니다.

 

 

 예제 1 

See the Pen 배열 by anna (@hianna) on CodePen.

const length = arr.push('orange');

arr 배열의 가장 뒤에 'orange' 원소를 추가하였습니다.

push() 메소드는 새로운 배열의 길이인 3을 리턴하고,

arr는 ['apple', 'banana', 'orange'] 값을 가지게 되었습니다.

 

 

 예제 2 

See the Pen 배열 by anna (@hianna) on CodePen.

파라미터를 여러개 전달하여, 배열의 맨 마지막에 여러개의 원소를 추가할 수도 있습니다.

 

 

 pop() 

arr.pop()

pop() 메소드는 배열의 가장 뒤 element를 삭제하고, 삭제한 element를 리턴합니다.

 

파라미터

없음

 

리턴값

삭제한 element

 

 

 예제 

See the Pen 배열 by anna (@hianna) on CodePen.

line 3~7

let removed = arr.pop();

배열의 마지막 원소를 삭제하였습니다.

pop() 메소드는 삭제한 원소인 'banana'를 리턴하고,

배열에서 'banana'가 삭제되고 'apple' 만 남습니다.

 

line 9~13

removed = arr.pop();

배열의 마지막 원소를 삭제하였습니다.

shift() 메소드는 삭제한 원소인 'apple'을 리턴하고,

배열에서 'apple'이 삭제되고 이제 배열은 비었습니다.

 

line 15~18

removed = arr.pop();

비어있는(더 이상 삭제할 원소가 없는) 배열에서 pop() 메소드를 호출하여, 삭제를 시도하였습니다.

pop() 메소드는 undefined를 리턴합니다.

 

 

---

 

배열의 맨 앞과 뒤에 unshift(), shift(), push(), pop() 메소드를 사용하여

원소를 추가 삭제 하는 방법을 알아보았습니다.

 

다음번 포스팅에서는

배열의 중간에 원소를 삽입하거나 삭제할 수 있는 splice() 함수에 대해서 정리하도록 하겠습니다.