Original article: JavaScript Splice – How to Use the .splice() JS Array Method

자바스크립트의 splice() 메서드는 배열 객체에 사용할 수 있는 내장 메서드입니다. 이는 기존 요소를 삭제하거나 교체하여 배열의 내용을 변경하며, 제거된 요소가 담긴 별도의 배열을 새로 반환합니다.

이 기사에서는 splice() 메서드를 사용하여 배열 요소를 삭제, 추가, 또는 교체하는 방법에 대해 설명하겠습니다. 먼저 배열의 요소를 삭제하는 방법부터 살펴봅시다.

splice() 메서드로 배열 요소 삭제하기

다음과 같은 내용이 담긴 months라는 배열이 있다고 가정해보겠습니다. 배열 이름은 달, 월을 뜻하는 months지만 요일이 배열에 섞여있는 것을 확인할 수 있습니다.

// 월과 요일명이 혼합된 배열
let months = ["January", "February", "Monday", "Tuesday"];

splice() 메서드를 사용하여 months 메서드에서 요일 이름을 제거하는 동시에 요일만 포함된 새 배열을 만들 수 있습니다. 이렇게 말이죠.

// 요일이 담긴 배열 생성하기 
let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2); // 인덱스 2부터 배열 변경

console.log(days); // ["Monday", "Tuesday"]

splice() 메서드를 사용할 때는 start 매개변수에 꼭 값을 전달해야 하는데, 이 매개변수는 배열의 변경을 시작할 인덱스를 지정합니다. 위의 예시에서 인수로 전달된 2는 splice() 메서드가 인덱스 2에서부터 요소를 제거하기 시작할 것이라는 뜻입니다.

deleteCount라는 두 번째 매개변수에 값을 전달하면 배열에서 제거할 요소의 수를 지정할 수도 있습니다. 예를 들어, 하나의 요소만 제거하기 위해 다음과 같이 숫자 1을 두 번째 인수로 전달할 수 있습니다. (역주: 영어 원문 기사에서는 이 매개변수를 removeCount라고 표기했지만, 가장 최근 업데이트된 MDN Web Docs 설명서에 따라 splice()의 두 번째 매개변수를 deleteCount라고 지칭하겠습니다.)

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 1); // 요소 하나만 삭제

console.log(days); // ["Monday"]
console.log(months); // ["January", "February", "Tuesday"]

deleteCount 매개변수를 생략하면 splice()는 지정된 start 인덱스부터 배열의 끝까지의 모든 요소를 제거합니다.

splice()를 사용해 배열 요소 제거하고 새로 추가하기

splice() 메서드로 요소를 삭제하는 동시에 바로 새 요소를 추가할 수도 있습니다. deleteCount 매개변수 뒤에 배열에 추가할 요소를 전달하기만 하면 됩니다.

필수 매개변수와 선택적 매개변수를 모두 전달하는 경우의 문법은 다음과 같습니다.

// 필수 매개변수와 선택적 매개변수가 포함된 splice() 문법 
Array.splice(start, deleteCount, newItem, newItem, newItem, ...)

다음 예시에서는 months 배열에 "March"와 "April"을 추가하면서 "Monday"와 "Tuesday"를 제거하는 방법을 보여줍니다.

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 2, "March", "April"); // 요소 두 개를 제외하고, 다른 요소를 추가

console.log(days); // ["Monday", "Tuesday"]
console.log(months); // ["January", "February", "March", "April"]

요소를 제거하지 않고 새 배열 요소 추가하기

마지막으로 숫자 0을 deleteCount 매개변수에 전달하여 기존 요소를 삭제하지 않고도 새 요소를 추가할 수 있습니다. 요소가 제거되지 않을 경우 빈 배열이 반환되며, 경우에 따라 반환된 빈 배열을 변수에 저장해서 사용할 수 있습니다.

다음 예시에서는 기존 요소를 삭제하지 않고 "February" 요소 옆에 새 요소 "March"를 추가하는 것을 보여줍니다. 앞서 언급한 것처럼 반환되는 값이 빈 배열이므로 이를 별도로 저장하지 않아도 됩니다.

let months = ["January", "February", "Monday", "Tuesday"];
months.splice(2, 0, "March"); // 두 번째 매개변수가 0이므로 기존 요소 모두 유지

console.log(months); 
// ["January", "February", "March", "Monday", "Tuesday"]

마치며

이렇게 splice() 메서드의 사용법을 배웠습니다. 수고하셨어요!

이 기사에서 소개된 내용 중 핵심적인 두 가지를 정리해볼까요?

  1. 우선, splice() 메서드는 배열의 요소를 삭제하거나 새로 추가할 때 가장 자주 사용됩니다. 경우에 따라 언급된 예시처럼 요소가 섞인 배열을 분리할 때도 splice()를 사용할 수 있습니다.
  2. 또한 이 메서드는 제거된 요소가 담긴 새 배열을 반환하며, 반환된 배열을 자유롭게 변수에 할당할 수 있습니다. 배열에서 0개의 요소를 제거하면 splice()는 빈 배열을 반환하는데, 이런 경우에는 별도로 변수에 저장하지 않아도 됩니다.

이 기사를 읽어주셔서 감사합니다!

자바스크립트에 대해 더 알고 싶다면 제 사이트를 방문해주세요. 문자열 조작, 날짜 조작, 배열 및 객체 메서드, 알고리즘 문제 해설 등 제가 자바스크립트 프로그래밍과 관련해 작성한 100개 이상의 기사를 확인하실 수 있습니다.

꼭 한 번 확인해보세요, 감사합니다! 😉