자바스크립트 배열의 원소 제거하기: pop()와 shift() 메서드

배열에 원소를 제거하는 것은 자바스크립트 코딩할 때 매우 빈번하게 필요한 작업이죠?

이번 포스팅에서는 자바스크립트 배열의 원소를 제거하는 다양한 방법에 대해서 간단히 정리해보겠습니다.

pop() 메서드

자바스크립트 배열에 원소를 제거하는 방법 중에서 가장 널리 알려진 방법은 뭐니뭐니 해도 배열의 pop() 메서드일 것 같은데요.

예를 들어, pop() 메서드로 과일 이름을 담은 배열로 부터 원소를 제거해보겠습니다.

const fruits = ["Apple", "Banana", "Coconut"];
fruits.pop(); // 'Coconut'
console.log(fruits); // ['Apple', 'Banana']

pop() 메서드는 배열에서 마지막 원소를 제거한 후에, 제거된 원소를 결과로 반환합니다.

shift() 메서드

반대로 배열의 첫 번째 원소를 제거하고 싶을 때는 shift() 메서드를 사용합니다.

const fruits = ["Apple", "Banana", "Coconut"];
fruits.shift(); // 'Apple'
console.log(fruits); // ['Banana', 'Coconut']

pop() 메서드와 동일하게 shift() 메서드도 배열로 부터 제거된 원소를 반환합니다.

여기에 꼭 기억해두셔야 할 pop()와 shift() 메서드의 가장 중요한 공통점이 있는데요. 바로 별도로 사본 배열 생성한 후 원소를 제거하는 것이 아니라, 원본 배열로 부터 바로 원소를 제거한다는 것입니다. 그러므로 원본 배열에 변경을 가해서는 안 되는 경우에는, 메서드를 호출하기 전에 반드시 배열을 복제해놔야 겠습니다.

const fruits = ["Apple", "Banana", "Coconut"];
const clonedFruits = [].concat(fruits);
clonedFruits.pop(); // 'Coconut'
clonedFruits.shift(); // 'Apple'
console.log(fruits); // ['Apple', 'Banana', 'Coconut']
console.log(clonedFruits); // ['Banana']

pop() 메서드와 shift() 메서드는 성능 측면에서 중요한 차이점이 있는데요. pop() 메서드는 시간 복잡도는 O(1)이기 때문에 배열의 크기에 관계없이 상수 시간이 소모가 됩니다. 반면에 shift() 메서드는 맨 앞에 있는 값을 제거한 후에 기존에 배열에 있던 모든 요소를 한 자리씩 왼쪽으로 이동시켜야 하기 때문에 시간 복잡도가 O(n)입니다. 따라서 배열에 저장되어 있는 값의 개수가 많을수록, 그에 비례하여 시간이 오래 걸리게 됩니다.

성능에 민감한 프로그램을 작성하시거나 크기가 아주 큰 배열을 다루는 상황에서는 이러한 성능 차이를 반드시 고려되야겠습니다.

splice() 메서드

그럼, 배열의 중간에 원소를 제거하고 싶을 때는 어떻게 해야 할까요? 이 때는 바로 splice()라는 배열의 다목적 메서드를 활용할 수 있습니다. (slice()가 아니고 splice()이오니 주의 바랍니다.)

splice() 메서드는 첫 번째 인자로 시작 인덱스(index), 두 번째 인자로 몇개의 값을 삭제할지, 그리고 세 번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환하는데요. 단순히 배열에 원소를 제거할 때는 제거할 위치를 첫 번째 인자로 넘기고, 두 번째 인자로는 한 개의 값을 삭제하길 원하므로 항상 1을 넘겨주면 됩니다.

그럼 배열의 인덱스 1, 즉 두 번째 위치의 원소를 제거해보겠습니다.

const fruits = ["Apple", "Banana", "Coconut"];
fruits.splice(1, 1); // ['Banana']
console.log(fruits); // ['Apple', 'Coconut']

splice() 함수의 호출 결과로 삭제된 두 번째 원소가 담간 배열이 반환되는 것을 볼 수 있습니다.

자바스크립트 배열의 slice()와 splice() 메서드에 대한 좀 더 자세한 설명은 관련 포스팅를 참고바랍니다.

filter() 메서드

배열에서 특정 조건에 해당하는 원소만 제거하고 싶을 때는 배열의 filter() 메서드가 많이 사용됩니다.

예를 들어, 글자 수가 5개 이하인 원소를 배열에 제거해보겠습니다. filter() 메서드는 인자로 넘어온 함수에 부합하는 원소만 배열에 남기므로, 삭제할 때는 반대로 조건을 걸어줘야 합니다.

const fruits = ["Apple", "Banana", "Coconut"];
const filteredFruits = fruits.filter((fruit) => fruit.length > 5);
console.log(filteredFruits); // ['Banana', 'Coconut']

Apple을 5개의 글자로 이루어졌기 때문에 배열에서 제거되는 것을 볼 수 있습니다.

spread 연산자

ES6부터는 배열을 다룰 때, spread 또는 전개 연산자로고 불리는 ... 기호가 많이 사용되는데요. Destructuring 문법을 통해서 배열의 처음에 몇 개의 원소를 제외한 나머지 원소만 ... 기호가 붙어있는 변수에 할당할 수 있습니다.

const fruits = ["Apple", "Banana", "Coconut"];
const [_, ...restFruits] = fruits;
console.log(restFruits); // ['Banana', 'Coconut']

마치면서

지금까지 예제를 통해 자바스크립트 배열에 원소를 제거하는 대표적인 4가지 방법에 대해서 살펴보았습니다. 상황에 맞게 적절한 방법을 선택하셔서 보다 효율적으로 자바스크립트 배열을 다루실 수 있으셨으면 좋겠습니다. 자바스크립트 배열에 원소 추가하는 방법에 대해서는 별도 포스팅을 통해 다루겠습니다.