[js] Slice, Splice의 비교

 

💡부분 추출시에는 slice
slice(start, end+1) //배열, 문자열의 start 인덱스부터 end 인덱스까지 추출
배열 변경(삭제, 추가)시에는 Splice
splice(start, delete갯수, 추가할 요소)
둘다 2번째 없을시 start부터 끝까지 추출/제거
splice 두번째 인자 0, 세번째 요쇼 있을 때는 제거 없이 start 다음에 세번째 요소 추가

 

Slice와 Splice의 비교

Slice	Splice
원본 배열이나 문자열을 변경하지 않음. 새로운 배열이나 문자열을 반환. 부분을 추출(복사)하는 데 사용.	원본 배열을 변경. 삭제 및 추가 작업을 수행. 요소를 제거하거나 특정 위치에 새로운 요소를 삽입하는 데 사용.

 

 

Slice

• 원본 배열이나 문자열을 변경하지 않음. 즉 원본 데이터를 변경하지 않고, 새로운 배열이나 문자열 반환
• 부분 배열이나 문자열만 추출할 때 사용
• 두 개의 인덱스를 사용해 시작점, 종료점 지정
• start: 추출을 시작할 인덱스 (0부터 시작).
• end: 추출을 끝낼 인덱스 (해당 인덱스의 요소는 포함되지 않음). 이 인덱스는 선택 사항이며, 지정하지 않으면 배열 또는 문자열의 끝까지 추출합니다.

let array = [1, 2, 3, 4, 5];
let newArray = array.slice(1, 3); // [2, 3]

let string = "hello";
let newString = string.slice(1, 4); // "ell"

 

Splice

• 원본 배열을 변경 즉, splice는 원본 배열에서 요소를 제거하거나 추가
• 특정 위치에 요소를 추가하거나 제거
• 두 개 이상의 인자를 사용하여 시작점, 삭제할 개수, 추가할 요소를 지정

 

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

• start: 변경을 시작할 인덱스.
• deleteCount: 제거할 요소의 수. 이 값이 0이면 아무 요소도 제거하지 않습니다. <- 제거 없이 교체만 할때
• item1, item2, ...: 제거된 위치에 추가할 요소(선택 사항). 이 부분은 생략할 수 있습니다.

 

let array = [1, 2, 3, 4, 5];
array.splice(2, 1); //3이 제거됨
console.log(array) //[1, 2, 4, 5]

let array2 = [1, 2, 3, 4, 5];
array2.splice(2, 0, 6); 
console.log(array2) // [1, 2, 6, 3, 4, 5], 2번 인덱스에 6이 추가됨

let array3 = [1, 2, 3, 4, 5];
array3.splice(2, 2, 9, 7, 8); 
console.log(array3) //  [1, 2, 9, 7, 8, 5] 3, 4 제거 후 9, 7, 8 추가

 

n번째 인덱스부터 끝까지 추출

slice(n)을 사용하면, n번째 인덱스부터 끝까지의 요소를 추출

let array = [1, 2, 3, 4, 5];
let result = array.slice(2); // [3, 4, 5]

let string = "hello";
let resultStr = string.slice(2); // "llo"

 

n번째 인덱스부터 끝까지 제거

splice(n)을 사용하면, n번째 인덱스부터 끝까지의 모든 요소를 제거

let array = [1, 2, 3, 4, 5];
let removedElements = array.splice(2); // [3, 4, 5]

console.log(array); // [1, 2]