JavaScript splice() 사용 방법

splice 메서드란?

splice 메서드는 JavaScript에서 배열의 요소를 추가, 제거 또는 교체할 수 있는 메서드다.
배열의 기존 요소를 삭제하거나 새로운 요소를 추가하여 배열의 내용을 변경할 수 있음

splice 메서드 사용법

splice 메서드의 기본 사용법은 다음과 같다.

array.splice(start, deleteCount, item1, item2, ...)

• start : 변경을 시작할 인덱스 (음수일 경우 배열의 끝에서부터 계산됨)
• deleteCount : 배열에서 제거할 요소의 수 (0일 경우 아무 요소도 제거되지 않음)
• item1, item2, ... : 배열에 추가할 요소 (생략 가능함)

splice 메서드는 제거된 요소를 배열로 반환하며, 원본 배열을 직접 변경할 수 있다.

splice 메서드는 실무에서 언제 사용하는가?

2-1) 요소 제거

특정 조건을 만족하는 요소를 배열에서 제거할 때 유용하다.
예) 사용자 리스트에서 특정 사용자를 제거할 수 있다.

let userList = ['song', 'byeon', 'shin', 'kim'];
// 'kim'를 제거
let index = users.indexOf('kim');
if (index !== -1) {
  userList.splice(index, 1);
}
console.log(userList); // ['song', 'byeon', 'shin']

2-2) 요소 추가

새로운 데이터를 배열의 특정 위치에 삽입할 때 사용한다
예) 특정 순서에 따라 task 추가함

let taskList = ['TASK1', 'TASK2', 'TASK4'];
// 'TASK3'을 'TASK2'와 'TASK4' 사이에 추가
taskList.splice(2, 0, 'TASK3');
console.log(taskList); // ['TASK1', 'TASK2', 'TASK3', 'TASK4']

2-3) 요소 교체

특정 위치의 요소를 새로운 요소로 교체할 때 사용한다. 예) 사용자의 정보를 업데이트할 수 있습니다.

let userInfo = ['a', 'b', 'c'];
// 'b'를 'd'로 교체
userInfo.splice(1, 1, 'd');
console.log(userInfo); // ['a', 'd', 'c']

splice 메서드 예제

3-1) 요소 제거

기존 배열에서 특정 요소를 제거한다.

let numbers = [1,2,3,4,5];
let removed = numbers.splice(2, 1); // 인덱스 2에서 1개의 요소 제거
console.log(numbers); // [1,2,4,5]
console.log(removed); // [3]

3-2) 요소 추가

기존 배열에의 특정 위치에 새로운 요소를 추가

let numbers = [1,2,3,4];
numbers.splice(2, 0, 2.5); // 인덱스 2에서 요소를 제거하지 않고 1.5 추가
console.log(numbers); // [1, 2, 2.5, 3, 4]

3-2) 요소 교체

기존 배열에의 특정 위치에 요소를 추가 후 해당 위치의 기존 요소를 제거

let numbers = [1,2,3,4,5];
let changes = numbers.splice(1, 2, 1.5, 3.5); // 인덱스 1에서 2개의 요소를 1.5와 3.5로 교체
console.log(numbers); // [1, 1.5, 3.5, 4, 5]
console.log(changes); // [2,3]

마무리

splice메서드는 배열의 요소를 추가, 제거, 교체할 경우에 사용하기 좋은 메서드이다.
다양한 방식으로 배열을 조작할 수 있으며, 가독성 또한 좋다.