slice, splice, split 비교

데이터를 자르고 나누고 추출할 때, slice, splice, split 등을 찾게 된다. 이름부터 헷갈리는 함수들을 비교하면서 어떤 차이가 있는지 알아보도록 하자.

slice(start, end)

---

• 문자열과 배열에서 특정 인덱스 요소를 추출할 때 사용
• immutable(원본 배열을 변경하지 않음)
• 자른 요소를 추출하여 새로운 배열을 생성

parameter
start: 추출 시작 인덱스(포함)
end: 추출 끝 인덱스(포함되지 않음)

const array = [1, 2, 3, 4, 5];
const slicedArray = array.slice(1, 3);

console.log(slicedArray); // [2, 3]
console.log(array); // [1, 2, 3, 4, 5] 원본 배열 변경 x

splice(start, deleteCount, ...items)

---

• 배열 요소를 추출할 때 사용
• mutable(원본 배열을 변경)
• 제거한 요소를 추출하여 새로운 배열을 생성

parameter
start: 변경 시작 인덱스
deleteCount: start부터 제거할 요소의 수
...items: 제거한 자리에 추가할 새로운 요소

const array = [1, 2, 3, 4, 5];
const splicedArray = array.splice(1, 2, 'a', 'b');

console.log(splicedArray); // [2, 3]
console.log(array); // [1, 'a', 'b', 4, 5] 원본 배열 변경 o

split(separator, limit)

---

• 문자열을 특정 구분자를 기준으로 분할할 때 사용
• immutable(원본 문자열을 변경하지 않음)
• 구분된 요소들을 담은 배열을 생성

parameter
separator: 구분할 기준이 되는 문자열
limit: 구분된 요소를 담은 배열을 limit 길이만큼 자른다.

const string = "Hello, World! Hello, World! Hello, World!";
const splitString = string.split(', ',2);

console.log(splitString); //[ 'Hello', 'World! Hello' ]
console.log(string); // Hello, World! Hello, World! Hello, World!