[JS] slice, splice, split 차이점 완벽 정리 (어원과 비유로 한 번에 이해하기)

자바스크립트를 공부하다 보면 이름이 비슷비슷한 slice, splice, split 때문에 머리가 아플 때가 많습니다. 오늘은 각 단어의 영어 어원과 실제 비유를 통해 평생 까먹지 않게 정리해 보겠습니다.

---

1. slice() : "피자 한 조각처럼 베어내기"

• 영단어 의미: 얇은 조각, (부분을) 베어내다.
• 비유: 식빵 묶음에서 한 조각을 꺼내도 식빵 묶음은 그대로죠? 원본을 건드리지 않는 '복사' 개념입니다.

✅ 특징

• 원본 배열/문자열: 변경되지 않음 (Immutable)
• 사용법: slice(시작인덱스, 끝인덱스) (끝 인덱스 직전까지만!)

const bread = ['🍞', '🍞', '🍞', '🍞'];
const piece = bread.slice(1, 3); 

console.log(piece); // ['🍞', '🍞'] (꺼내온 조각)
console.log(bread); // ['🍞', '🍞', '🍞', '🍞'] (원본은 그대로!)

---

2. splice() : "필름 편집하듯 도려내고 잇기"

• 영단어 의미: (밧줄·필름 등을) 꼬아서 잇다, 접합하다.
• 비유: 영화 필름의 중간을 가위로 싹둑 자르고, 그 자리에 다른 필름을 이어 붙이는 작업을 생각하세요. 원본이 **'수정'**됩니다.

✅ 특징

• 원본 배열: 직접 변경됨 (Mutable)
• 사용법: splice(시작인덱스, 삭제할갯수, 추가할요소...)
• 주의: 배열에서만 사용할 수 있습니다.

const film = ['씬#1', '씬#2', '씬#3'];
// 인덱스 1부터 1개를 삭제하고 '새로운씬' 삽입
film.splice(1, 1, '🎬'); 

console.log(film); // ['씬#1', '🎬', '씬#3'] (원본이 바뀌어버림!)

---

3. split() : "장작을 패듯 문자열 쪼개기"

• 영단어 의미: (결대로) 쪼개다, 나누다, 분열하다.
• 비유: 커다란 통나무 하나를 도끼로 쳐서 여러 개의 장작으로 만드는 과정입니다. 문자열 하나가 여러 개의 배열 요소가 됩니다.

✅ 특징

• 대상: 문자열 (배열에는 사용 불가)
• 결과값: 분리된 문자열들을 담은 새로운 배열 반환.

const log = "나무-나무-나무";
const firewood = log.split("-"); // "-"를 기준으로 쪼개라!

console.log(firewood); // ["나무", "나무", "나무"] (배열이 됨)

---

🚀 한눈에 비교하는 요약표

구분	slice	splice	split
어원	조각 (Slice of pizza)	잇다 (Connect/Join)	쪼개다 (Divide)
대상	배열, 문자열	배열 전용	문자열 전용
원본 변경	❌ 유지 (복사본 반환)	⭕ 변경 (직접 수정)	❌ 유지 (새 배열 반환)
핵심 용도	원하는 부분만 추출	요소 삭제/추가/교체	문자열을 배열로 변환

---

💡 마지막 암기 꿀팁!

1. Split의 **'t'**를 도끼 모양이라고 생각하세요. 문자열을 툭 쳐서 쪼갭니다.
2. Splice의 **'ce'**를 **Change(변경)**의 약자라고 생각하세요. 원본을 바꿉니다.
3. Slice는 우리가 흔히 쓰는 '치즈 슬라이스'를 떠올리세요. 모양 그대로 추출만 합니다.