자바스크립트 배열에서 요소 제거하는 방법: pop, shift, splice 완벽 정리

자바스크립트에서 배열의 요소를 제거해야 하는 상황은 크게 세 가지로 나눌 수 있습니다. 배열의 끝에서 요소를 제거하는 경우, 배열의 시작에서 요소를 제거하는 경우, 그리고 특정 위치(인덱스)의 요소를 제거하는 경우입니다. 각 상황에 맞는 메서드를 예제와 함께 살펴보겠습니다.

배열 끝에서 요소 제거하기 — pop()

배열의 마지막 요소를 제거하려면 pop() 메서드를 사용합니다. 이 메서드는 제거된 요소를 반환하므로, 필요하다면 변수에 담아 활용할 수도 있습니다.

let veggies = ["Onion", "Raddish"];
veggies.pop();
console.log(veggies);

실행 결과는 다음과 같습니다.

["Onion"]

배열 시작에서 요소 제거하기 — shift()

배열의 첫 번째 요소를 제거하려면 shift() 메서드를 사용합니다. shift() 역시 제거된 요소를 반환합니다.

let veggies = ["Onion", "Raddish"];
veggies.shift();
console.log(veggies);

실행 결과는 다음과 같습니다.

["Raddish"]

특정 위치에서 요소 제거하기 — splice()

배열 중간에 있는 특정 인덱스의 요소를 제거해야 할 때는 splice() 메서드를 사용합니다. 첫 번째 인수는 제거를 시작할 인덱스이고, 두 번째 인수는 그 위치부터 제거할 요소의 개수입니다.

let veggies = ["Onion", "Raddish", "Broccoli"];
veggies.splice(0, 1); // 인덱스 0부터 1개의 요소 제거
console.log(veggies);

실행 결과는 다음과 같습니다.

["Raddish", "Broccoli"]

splice()는 두 번째 인수를 조절해 여러 개의 요소를 한 번에 제거할 수도 있습니다. 예를 들어 veggies.splice(0, 2)처럼 작성하면 인덱스 0부터 2개의 요소가 삭제됩니다.

메서드 비교 정리

상황에 맞는 메서드를 적절히 선택하면 배열 데이터를 훨씬 깔끔하고 효율적으로 관리할 수 있습니다.