[Javascript] split(), splice(), slice() 비교

split, splice, slice는 JavaScript에서 문자열과 배열을 다룰 때 자주 사용하는 메서드이다.

 

메서드	적용 대상	기능	반환값	원본 변경 여부
split	문자열	문자열을 지정한 구분자를 기준으로 분할하여 배열로 반환	새로운 배열	원본 변경 없음
splice	배열	배열에서 요소를 추가, 삭제, 변경하는 데 사용	변경된 배열 (삭제된 요소)	원본 배열 변경
slice	배열/문자열	배열 또는 문자열의 일부를 추출하여 새로운 배열 또는 문자열을 반환	새로운 배열 또는 문자열	원본 변경 없음

1. split (문자열에서 사용)

let str = "apple,banana,orange";
let arr = str.split(",");  // 구분자를 기준으로 문자열을 배열로 분리
console.log(arr);  // ["apple", "banana", "orange"]

• 기능: 문자열을 구분자로 분할하여 배열로 반환.
• 원본 변경 없음: str은 변경되지 않고, 새로운 배열이 반환됩니다.

 

2. splice (배열에서 사용)

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 6, 7);  // 인덱스 2부터 1개의 요소를 삭제하고 6, 7을 추가
console.log(arr);  // [1, 2, 6, 7, 4, 5]

• 기능: 배열에서 요소를 추가하거나 삭제할 수 있습니다. 첫 번째 인자는 시작 인덱스, 두 번째 인자는 삭제할 요소의 수입니다. 그 뒤에는 삽입할 요소들을 지정할 수 있습니다.
• 원본 변경: arr 배열 자체가 변경됩니다.

 

3. slice (배열 및 문자열에서 사용)

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);  // 인덱스 1부터 4 전까지의 요소를 추출
console.log(newArr);  // [2, 3, 4]
console.log(arr);     // [1, 2, 3, 4, 5] (원본은 변경되지 않음)

let str = "Hello, world!";
let newStr = str.slice(0, 5);  // 인덱스 0부터 5 전까지의 부분 문자열을 추출
console.log(newStr);  // "Hello"

• 기능: 배열 또는 문자열에서 지정한 범위의 일부를 추출하여 새로운 배열이나 문자열을 반환.
• 원본 변경 없음: arr와 str은 변경되지 않고, 새로운 배열 또는 문자열이 반환됩니다.

 

요약

• split: 문자열을 구분자를 기준으로 분리하여 배열을 반환.
• splice: 배열에서 요소를 추가, 삭제, 변경하며 원본 배열을 수정.
• slice: 배열 또는 문자열에서 지정된 범위의 일부를 추출하여 새로운 배열 또는 문자열을 반환하며 원본은 변경되지 않음.