TIL) 자바스크립트 splice 와 slice 차이 쉬운 설명

 

splice 와 slice 차이 =>
splice는 원본 배열을 변경하고, slice는 원본 배열은 변경하지 않는다. 

 

 

 

• 배열의 중간에 요소를 추가하거나 제거하기 .splice(_, _, _)

push, pop, unshift, shift 매서드와 마찬가지로 모두 원본 배열을 직접 변경하는 매서드이다.

 

매개변수는 3개 갖는다. 

✔️ start: 원본 배열의 요소를 제거하기 시작할 인덱스. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. 

 음수인 경우, 배열의 끝에서의 인덱스를 나타낸다. (-1: 마지막 요소, -n: 마지막에서 n번째 요소) 필수매개변수

✔️ deleteCount: 제거할 요소의 개수, 0인경우 제거되지 않는다. 옵션매개변수

✔️ items: 제거한 위치에 삽입할 요소. 옵션매개변수

 

 

const arr = [1,2,3,4];
const result = arr.splice(1,2,20,30); 
// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20과 30을 삽입한다. 
console.log(result); // [2,3] // 제거한 요소
console.log(arr); // [1,20,30,4] // 아하 splice 매서드는 원본 배열을 직접 변경하네!

 

 

---

• 인수로 전달된 범위의 요소들을 복사해서 배열로 반환하기 .slice(_, _)

slice는 원본 배열은 변경하지 않는다. 

 

매개변수는 2개 갖는다.

✔️ start: 복사를 시작할 인덱스. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. (-2: 배열의 마지막 두 개 요소 복사해서 배열로 반환)

✔️ end: 복사를 종료할 인덱스. 이 인덱스는 복사 안되고, 바로 앞까지 복사된다. 생략시 끝까지 옵션매개변수

 

 

const arr = [1,2,3];

arr.slice(1,2); // [2] // arr[1]부터 arr[2]미만까지 복사해서 반환
console.log(arr); // [1,2,3] // 원본 배열은 변경하지 않는다.