JavaScript splice 용도 정리

JavaScript splice 메서드란 무엇인가

JavaScript의 splice() 메서드는 배열의 요소를 추가하거나 삭제하거나 교체할 수 있게 해주는 매우 강력한 내장 함수입니다. 이 메서드는 원본 배열 자체를 직접 변경하는 mutable한 특성을 가지며, 특히 배열을 다루는 다양한 상황에서 없어서는 안 될 필수 도구로 자리 잡았습니다.

splice()는 다음과 같은 기본 구조를 가집니다:

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

• start: 변경을 시작할 배열 인덱스(0부터 시작).
• deleteCount: 제거할 요소 개수.
• item1, item2, ...: 삽입할 새로운 요소들(선택 사항).

즉, 배열의 특정 위치에서 요소를 삭제하거나, 삭제와 동시에 새로운 요소를 삽입하거나, 단순 삽입 또는 삭제 작업을 수행할 수 있습니다.

JavaScript splice의 주요 용도

1. 배열 요소 삭제

splice()를 사용하면 배열의 특정 인덱스에서 원하는 수만큼 요소를 제거할 수 있습니다.

let fruits = ['사과', '바나나', '포도', '딸기'];
fruits.splice(1, 2);
console.log(fruits); // ['사과', '딸기']

• 1: 인덱스 1부터 시작(즉, '바나나').
• 2: 2개 요소('바나나', '포도')를 삭제.

배열 요소를 효율적으로 삭제할 때는 splice를 적극 활용해야 한다는 점을 기억해야 합니다.

배열 요소 삭제 핵심 요약

• 시작 인덱스를 정확히 지정해야 원하는 데이터가 삭제된다.
• 삭제 개수를 생략하면 해당 인덱스부터 끝까지 삭제된다.

반응형

2. 배열 요소 추가

splice()를 이용해 배열의 중간, 시작, 끝 어느 위치든 원하는 요소를 추가할 수 있습니다.

let colors = ['빨강', '파랑', '노랑'];
colors.splice(1, 0, '초록');
console.log(colors); // ['빨강', '초록', '파랑', '노랑']

• 1: 인덱스 1에 삽입.
• 0: 삭제 없이 삽입만 진행.
• '초록': 삽입할 새로운 요소.

splice를 이용하면 기존 배열을 복제하거나 재구성하지 않고도 쉽게 데이터를 삽입할 수 있다.

배열 요소 추가 핵심 요약

• 삭제 개수를 0으로 설정하면 삭제 없이 삽입만 가능하다.
• 여러 개의 요소를 한 번에 삽입할 수도 있다.

반응형

3. 배열 요소 교체

삭제와 동시에 새로운 요소를 삽입하여 기존 데이터를 쉽게 교체할 수 있습니다.

let animals = ['고양이', '강아지', '토끼'];
animals.splice(1, 1, '햄스터');
console.log(animals); // ['고양이', '햄스터', '토끼']

• 인덱스 1에 있는 '강아지'를 삭제하고 '햄스터'를 삽입.

배열 데이터를 업데이트할 때 splice는 빠르고 깔끔한 방법을 제공한다.

배열 요소 교체 핵심 요약

• 삭제 수만큼 요소를 삽입하면 자연스럽게 대체된다.
• 교체 시 배열 길이의 변화가 없을 수 있다.

반응형

4. 특정 구간 제거 및 복원

대량의 데이터 중 특정 부분만 삭제하거나 복원해야 할 때 유용하게 사용됩니다.

let numbers = [1, 2, 3, 4, 5, 6];
let removed = numbers.splice(2, 3);
console.log(numbers); // [1, 2, 6]
console.log(removed); // [3, 4, 5]

• 반환값으로 삭제된 요소들이 별도 배열로 제공된다.
• 원본 배열에서는 해당 요소들이 제거된다.

대규모 데이터 처리에도 splice는 꼭 필요한 도구이다.

특정 구간 제거 핵심 요약

• 반환 배열을 통해 삭제된 데이터를 별도로 관리할 수 있다.
• 원본 배열은 삭제 작업 후 자동으로 재정렬된다.

반응형

JavaScript splice 메서드 사용 시 주의사항

1. 원본 배열 변경 주의

splice()는 원본 배열을 직접 변경합니다. 복제본을 따로 생성하고 작업하지 않으면 원치 않는 부작용이 생길 수 있습니다.

let original = ['A', 'B', 'C'];
let copy = [...original];
copy.splice(1, 1);
console.log(original); // ['A', 'B', 'C']
console.log(copy); // ['A', 'C']

원본 배열을 보존해야 하는 경우 spread 문법을 이용해 복사한 후 작업해야 한다.

원본 배열 변경 주의 핵심 요약

• 복사본을 만들어 안전하게 작업하는 습관이 중요하다.
• 불변성을 지키는 코딩 습관은 유지보수성을 높인다.

2. 대체 메서드와의 비교

splice()는 매우 유용하지만 상황에 따라 slice(), filter(), map()과 같은 메서드가 더 적합할 수도 있습니다.

• slice(): 원본 배열을 변형하지 않고 복사본을 만듬.
• filter(): 조건에 맞는 요소만 추출.
• map(): 배열을 변형하지만 원본을 보존.

문맥에 따라 올바른 배열 메서드를 선택하는 것이 최적의 코드 품질을 보장한다.

대체 메서드 비교 핵심 요약

• 필요에 따라 splice와 slice를 구분하여 사용해야 한다.
• 원본 유지 vs 수정 여부를 명확히 이해하는 것이 중요하다.

반응형

JavaScript splice 실전 예제 모음

1. 특정 값 제거

let cars = ['현대', '기아', '쉐보레', 'BMW'];
let index = cars.indexOf('기아');
if (index !== -1) {
  cars.splice(index, 1);
}
console.log(cars); // ['현대', '쉐보레', 'BMW']

2. 조건부 요소 제거

let scores = [45, 89, 72, 38, 100];
scores.forEach((score, idx) => {
  if (score < 50) {
    scores.splice(idx, 1);
  }
});
console.log(scores); // 예기치 않은 결과 발생 가능성 있음

• 주의: 반복문 중 splice를 쓰면 인덱스가 꼬일 수 있음.
• 대안: 거꾸로 순회하거나 filter를 사용.

3. 중간에 다수 요소 삽입

let alphabets = ['A', 'D', 'E'];
alphabets.splice(1, 0, 'B', 'C');
console.log(alphabets); // ['A', 'B', 'C', 'D', 'E']

다양한 상황에 맞춰 splice를 활용하면 복잡한 배열 조작도 손쉽게 처리할 수 있다.

반응형

결론

JavaScript의 splice() 메서드는 삭제, 삽입, 교체를 모두 다룰 수 있는 강력한 기능을 제공합니다. 특히 다음과 같은 상황에서 가장 빛을 발합니다.

• 데이터 조작이 빈번한 애플리케이션.
• 배열의 일부분만 동적으로 수정할 필요가 있을 때.
• 특정 조건을 만족하는 데이터 필터링 및 재구성.

splice는 단순한 배열 조작 도구를 넘어서, 자바스크립트 전반의 데이터 처리 효율성을 높이는 핵심적인 메커니즘이라 할 수 있다.