[Dseok의 코딩스터디] JavaScript slice() vs splice() 차이점 한방에 끝내기

📌 slice() vs splice() 차이점

JavaScript에서 slice()와 splice()는 둘 다 배열을 조작하는 메서드이지만, 기능과 원본 배열에 미치는 영향이 다릅니다.

✅ slice()

• 배열에서 특정 부분을 추출하여 새로운 배열을 반환
• 원본 배열은 변경되지 않음 (immutable)
• array.slice(start, end) → start부터 end 직전까지의 요소를 가져옴

✅ splice()

• 배열에서 특정 요소를 제거하거나 새로운 요소를 추가 가능
• 원본 배열이 변경됨 (mutable)
• array.splice(start, deleteCount, item1, item2, ...) → start 위치에서 deleteCount개의 요소 제거 후 새로운 요소 추가 가능

📌 slice() vs splice() 차이점 예제 5가지

1️⃣ 원본 배열 유지 여부

const arr = ["A", "B", "C", "D", "E"];

const slicedArr = arr.slice(1, 4);
console.log(slicedArr); // ["B", "C", "D"]
console.log(arr); // ["A", "B", "C", "D", "E"] (변경 없음)

arr.splice(1, 3);
console.log(arr); // ["A", "E"] (원본 변경됨)

✅ 설명: slice()는 원본 배열을 변경하지 않지만, splice()는 원본 배열을 직접 변경함.

 

2️⃣ 배열 일부 복사 vs 제거

const numbers = [1, 2, 3, 4, 5];

const copiedNumbers = numbers.slice(0, 3);
console.log(copiedNumbers); // [1, 2, 3] (복사)

numbers.splice(0, 3);
console.log(numbers); // [4, 5] (제거됨)

✅ 설명: slice()는 선택한 요소를 복사하고, splice()는 선택한 요소를 제거함.

 

3️⃣ 요소 추가 기능 (splice()만 가능)

const colors = ["Red", "Blue", "Green"];
colors.splice(1, 0, "Yellow");
console.log(colors); // ["Red", "Yellow", "Blue", "Green"]

✅ 설명: splice()는 기존 요소를 삭제하지 않고 중간에 새 요소를 삽입할 수도 있음.

 

4️⃣ 마지막 요소 가져오기 (slice 활용)

const fruits = ["Apple", "Banana", "Cherry", "Grapes"];
const lastTwo = fruits.slice(-2);
console.log(lastTwo); // ["Cherry", "Grapes"]

✅ 설명: slice(-2)를 사용하면 배열의 마지막 두 개 요소를 가져올 수 있음.

 

5️⃣ 특정 위치의 요소 대체 (splice() 활용)

const days = ["Monday", "Tuesday", "Thursday", "Friday"];
days.splice(2, 0, "Wednesday");
console.log(days); // ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]

✅ 설명: splice()는 특정 위치에 새 요소를 삽입하여 배열을 수정할 수 있음.

 

📌 slice() vs splice() 핵심 정리 🎯

메서드원본 배열 변경기능

slice()	❌ 변경되지 않음	배열에서 특정 부분을 복사하여 새로운 배열 반환
splice()	✅ 변경됨	요소를 제거, 추가 또는 교체 가능

🚀 이제 slice()와 splice()의 차이를 이해하고 적절하게 활용해 보세요! 😊