JavaScript - 배열 추가, 삭제 방법(push, pop, splice)

GARY·2022년 5월 12일

배열에 항목을 추가, 삭제 하는 함수를 알아보자.

배열 추가 : Array.push(), Array.unshift(), Array.splice()

배열 삭제 : Array.pop(), Array.shift(), Array.splice()

* 배열 추가

1> push() : 배열의 끝에 요소 추가

var arr = ['짱구', '철수', '유리'];

arr.push('맹구');
// arr = ['짱구', '철수', '유리', '맹구']

2> unshift() : 배열의 앞쪽에 요소를 추가

var arr = ['짱구', '철수', '유리'];

arr.unshift('맹구');
// arr = ['맹구', '짱구', '철수', '유리']

3> splice() : index의 위치에 요소를 추가(하나 이상의 요소 추가)

splice("위치", 0, ["요소1", "요소2" ... ])

var arr = ['짱구', '철수', '유리'];

arr.splice(2, 0, '맹구'); //index 2(유리)의 위치에 맹구 추가
// arr = ['짱구', '철수', '맹구', '유리']

arr.splice(4, 0, '훈이', '짱아'); //index 4(끝)의 위치에 훈이 짱아 주가
// arr = ['짱구', '철수', '맹구', '유리', '훈이', '짱아']

* 배열 삭제

1> pop() : 배열의 마지막 요소를 제거

var arr = ['짱구', '철수', '유리', '맹구', '짱아'];

arr.pop();
// arr = ['짱구', '철수', '유리', '맹구']

var popped = arr.pop(); // 제거한 요소를 반환 받을 수 있음
// popped = '맹구'

2> shift() : 배열의 첫번째 요소를 제거

var arr = ['짱구', '철수', '유리', '맹구', '짱아'];

arr.shift();
// arr = ['철수', '유리', '맹구', '짱아']

var shifted = arr.shift(); // 제거한 요소를 반환 받을 수 있음
// shifted = '철수'

3> splice() : index부터 n개의 요소를 제거

splice(index, n)

var arr = ['짱구', '철수', '유리', '맹구', '짱아'];

arr.splice(2, 1); // index 2 부터 1개의 요소('유리')를 제거
// arr = ['짱구', '철수', '맹구', '짱아']

arr.splice(1, 2); // index 1 부터 2개의 요소('철수', '맹구')를 제거
// arr = ['짱구', '짱아']

var removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음
// removed = '짱아'

4> delete : 요소는 그대로 존재하고 값만 삭제

var arr = ['짱구', '철수', '유리', '맹구', '짱아'];

delete arr[1];
// arr = ['짱구', undefined, '유리', '맹구', '짱아']

* 함수를 사용하지 않고 추가, 삭제

var arr = ['짱구', '철수', '유리'];

arr[arr.length] = '맹구'; // 배열의 끝에 요소를 추가 
// arr = ['짱구', '철수', '유리', '맹구']

arr.length = arr.length - 1; // 배열의 크기를 하나 줄인다
// arr = ['짱구', '철수', '유리']


arr[5] = '훈이'; // index 5 에 요소를 추가, 빈요소([3],[4])는 undefined
// arr = ['짱구', '철수', '유리', undefined, undefined, '훈이']