JavaScript의 splice와 filter 비교

JavaScript에서 배열을 다룰 때 자주 사용되는 두 가지 메서드는 splice와 filter이다. 이 두 메서드는 배열을 조작하는 데 유용하지만, 목적과 사용 방법이 다르다. 이 글에서는 splice와 filter의 차이점을 비교해 보자.

splice 메서드

splice 메서드는 배열의 요소를 추가하거나 제거하여 원본 배열을 변경하는 메서드이다. 배열에서 특정 요소를 제거하거나 새 요소를 추가할 때 유용하다.

문법

arr.splice(start, deleteCount[, item1[, item2[, ...]]])

• start: 변경을 시작할 인덱스이다.
• deleteCount: 제거할 요소의 수이다.
• item1, item2, ...: 배열에 추가할 요소들이다. 이 인자는 선택 사항이다.

예시

const array = [1, 2, 3, 4, 5];
const splicedArray = array.splice(1, 2, 'a', 'b');

console.log(array);       // [1, 'a', 'b', 4, 5]
console.log(splicedArray); // [2, 3]

원본 배열을 수정한다.

---

filter 메서드

filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 이 메서드도 원본 배열을 변경하지 않는다.

문법

arr.filter(callback(element[, index[, array]])[, thisArg])

• callback: 각 요소를 테스트할 함수이다. true를 반환하면 요소를 유지하고, false를 반환하면 버린다.
  • element: 처리할 현재 요소이다.
  • index (선택 사항): 처리할 현재 요소의 인덱스이다.
  • array (선택 사항): filter를 호출한 배열이다.
• thisArg (선택 사항): callback을 실행할 때 this로 사용할 값이다.

예제

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(num => num > 2);

console.log(filteredArray); // [3, 4, 5]
console.log(array);         // [1, 2, 3, 4, 5]

---

불변성을 지키기 위해서는

불변성을 지키기 위해서는 filter를 사용해야 한다. filter 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환하기 때문에 불변성을 유지할 수 있다.

반면, splice 메서드는 원본 배열을 직접 변경하므로 불변성을 유지할 수 없다.