개요

이번 페이지에서는 배열의 요소를 제거하는 방법에 대해 정리해볼까 합니다. method 자체가 요소 제거를 목적으로한 method가 아니더라도 유용하게 사용해볼만한 방법이라 생각되면 함께 다뤄볼 예정입니다.

1. 제거

1) pop : 맨 마지막 요소 삭제

사용법 :
arr.pop()  // arr= 맨 마지막 요소를 제거할 배열

parameter 없음. 배열의 마지막 요소를 제거하고 그 요소를 return합니다. 배열이 빈값이라면 undefined를 반환합니다.

예제 1 : 배열 요소 제거
let arr = [1, 2, 3];
arr.pop() //arr = [1, 2]

예제 2 : 요소 제거하고 제거한 값 받기
let arr = [1, 2, 3]
let value = arr.pop() //arr= [1, 2], value = 3

2) shift : 맨 앞 요소 삭제

사용법 :
arr.shift()  // arr= 맨 마지막 요소를 제거할 배열

parameter 없음. 배열의 제일 처음 요소를 제거하고 그 요소를 return합니다. 배열이 빈값이라면 undefined를 반환합니다.

예제 1 : 배열 요소 제거
let arr = [1, 2, 3];
arr.shift() //arr = [2, 3]

예제 2 : 요소 제거하고 제거한 값 받기
let arr = [1, 2, 3]
let value = arr.shift() //arr= [2, 3], value = 1

unshift와 비슷한 이유로, 요소를 제거한 후 뒤에있는 요소들의 index를 당겨오는 문제 때문에 상대적 비효율성을 보여줍니다. 그래서 자료구조상 선입선출(FIFO)이 필요한 경우 Queue 자료구조를 활용하여 shift에 의한 비효율성을 줄이기도합니다.

3) splice : 중간요소 삭제

사용법 :
arr.splice(index,num)  // arr=요소를 제거할 배열, index=제거를 시작할 index, num=제거할 요소의 갯수

요소 추가에도 언급했던 method입니다. 요소를 추가할 때에는 3번째 parameter 이후에 추가할 요소를 넣어줬지만, 추가할 요소가 없다면 index(1st prameter)부터 num(2nd parameter) 만큼의 요소가 제거됩니다.

예제 1 : 배열 요소 제거
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2) //arr = [1, 4, 5]

예제 2 : 요소 제거하고 제거한 값 받기
let arr = [1, 2, 3, 4, 5]
let value = arr.shift(1, 3) //arr= [1, 5], value = [2, 3, 4]

요약

pop: 맨 뒤에 요소 삭제
shift: 맨 앞에 요소 삭제
splice: 중간에 요소 삭제

splice는 parameter를 어떻게 추가하느냐에 따라서 요소 추가, 삭제, 또는 둘다 동시에 해결할 수 있는 유용한 method인것 같습니다. 활용법을 잘 알아두면 어떤 조건의 배열변화든 어느정도 해결할 수 있을것으로 보입니다.