slice와 splice 차이점

🌵slice와 splice를 아직까지 헷갈리기에 다시한번 정리하면서 내머리속으로 넣어보려고한다!!!

slice

slice() 메서드는 어떤 배열의 start부터 end전까지의 복사본을 새로운 배열 객체로 반환한다.
즉, 원본 배열은 수정되지 않는다

✍🏻start: 시작점에 대한 인덱스

• undefined인 경우 0부터 slic 한다.
• 음수를 지정한 경우 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다.
• 배열의 길이와 같거나 큰 수를 지정한 경우 빈배열을 반환한다.

✍🏻end : 추출을 종료할 기준 인덱스

• 지정하지 않을 경우 배열의 끝까지 slice 한다.
• 음수를 지정한 경우 배열의 끝에서부터의 길이를 나타낸다. slice(2,-1)를 하면 세번째부터 끝에서 두번째 요소까지 추출한다.
• 배열의 길이와 같거나 큰 수를 지정한 경우 배열의 끝까지 추출한다.

예시 코드를 보면 ▼

let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)

console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]

첫번째 인자에 음수가 들어가는 경우 코드를 보면 ▼

let nums = [1,2,3,4,5]
let nums_new = nums.slice(-2)

console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 4, 5 ]

음수가 들어갈 경우 끝에서부터 해당하는 숫자만큼의 요소를 배열에 담아 리턴하게 된다.

splice

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 즉, 이 메서드는 원본 배열 자체를 수정한다.

✍🏻start : 배열의 변경을 시작할 index

• 음수를 지정한 경우 배열의 끝에서부터의 길이를 나타낸다.
• 배열의 길이보다 큰 수를 지정한 경우 실제 시작 인덱스는 배열의 길이로 설정
• 절댓값이 배열의 길이보다 큰 경우 0으로 세팅

✍🏻delete : 배열에서 제거할 요소의 수

• 생략 또는 값이 array.length -start보다 큰 경우 start로 부터의 모든 요소를 제거
• 0이하의 수를 지정하면 어떤 요소도 제거되지 않는다.

✍🏻 item : 추가하고 싶은 요소

• 지정하지 않은 경우 splice()는 요소 제거만 수행한다.

예시 코드 ▼

let num = [1,2,3,4,5];
num.splice(2,1,10);

console.log(num); // [ 1, 2, 10, 4, 5 ]

🍭splice는 의외로 일상생활 속의 기능에 자주 쓰인다.
보통 댓글 삭제 기능을 구현할때 splice메서드를 많이 활용한다고 한다 :)