코딩테스트 연습을 하다가 배열의 n번째 인덱스부터 n번째 인덱스까지 자르는 것이 나왔고 머릿 속에 slice와 splice가 먼저 떠올랐는데... 차이를 명확하게 인지하지 못하고 사용하고 있는 것 같아서 정리하고자 한다.
둘 중에 되는 걸로 하니... 거의 그냥 찍은 것이나 마찬가지였다..!(그래도 맞췄으니 괜찮아! 라는 위로는 나에게 전혀 도움이 되지 않는다!!)
slice
splice와 p하나 차이이긴 하지만, 다른 큰 차이가 많다. 먼저 slice를 사용하는 방법부터 알아보자.
const arr = ["영","일", "이", "삼"];
arr.slice(start, end);배열에 사용하는 메서드이며, start는 시작하는 인덱스이고 end는 끝나는 지점인데 end를 제외한 그 앞까지 요소만 추출한다. start와 end가 음수인 경우에는, 끝에서부터 인덱스를 계산한다.
-1이면 끝에서 2번 째 인덱스까지를 말한다.
const arr = ["영","일", "이", "삼"];
// ["일", "이"]
console.log(arr.slice(1, 3));
// ["영","일", "이"]
console.log(arr.slice(0, -1));또한, slice를 사용할 경우 원본에는 영향을 주지 않는다. 즉, 원본 배열은 그대로 남아 있고, 추출한 요소를 담은 복사된 배열을 반환한다.
splice
slice에서 p가 추가된 메서드...쓰는 방법과 차이점을 알아보자. splice는 기존의 요소를 삭제, 교체, 새 요소를 추가하여 배열을 바꿀 수 있다. 기존의 요소에서 볼 수 있듯이... slice와 가장 큰 차이점은 원본을 건드린다는 것이다. splice는 원본을 변경한다.
const arr = ["영","일", "이", "삼"];
arr.splice(start, end, item1, item2, .....);배열에 사용하는 메서드이며, start는 배열에 변경이 시작되는 인덱스이고, end는 배열에서 제거할 요소의 수, 세 번째 인자부터는 배열에 새로 추가할 요소를 말한다. 세 번째 인자를 지정 안 할 시, 별 다른 변화는 없다.
말로 하니 받아들이기가 상당히 어렵다. 예제로 살펴보자.
const arr = ["영","일", "이", "삼","사","오"];
const arr1 = arr.splice(1, 3);
// ["영","사","오"]
console.log(arr);
// ['일', '이', '삼']
console.log(arr1);콘솔을 살펴보면 알 수 있듯이, splice 이후에 원본의 배열에도 변화가 생기기 때문에 원본인 arr은 인덱스 1,3까지가 제거된 배열이 반환됐고, splice의 값을 할당 받은 arr1은 인덱스 1,3까지 자른 배열이 반환되었다.
그럼 자르고 추가하기는 어떻게 할까?
const arr = ["영","일", "이", "삼","사","오"];
const arr1 = arr.splice(1, 3, "추가1","추가2");
// ["영", "추가1", "추가2","사","오"]
console.log(arr);
// ['일', '이', '삼']
console.log(arr1);콘솔 값에서 알 수 있듯이, 먼저 splice는 원본인 arr에는 인덱스 1부터 3까지 잘리고 잘린 위치에 splice의 세 번째 인자부터 추가할 "추가1", "추가2"가 자리를 메꾸었다.
그리고 arr1에는 1부터 3까지 잘린 요소들이 들어갔다.
