[Javascript/리스트 슬라이싱] slice()와 splice()의 차이점

array.slice(start[,end])

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다.

즉, 원본 배열은 바뀌지 않는다

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

 

 

start: 추출 시작점에 대한 인덱스.

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

 

end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출)

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

 

반환값

•  추출한 요소를 포함한 새로운 배열

 

 

array.splice(start[,deleteCount[,item1[,item2[,...]]]])

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

 

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

 

start: 배열의 변경을 시작할 인덱스

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

 

deleteCount: 배열에서 제거할 요소의 수 (optional)

•  deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거
• deleteCount가 0 이하 :  어떤 요소도 제거하지 않음

 

item1, item2, ... : 배열에 추가할 요소. (optional)

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

 

반환값: 제거한 요소를 담은 배열.

• 아무 값도 제거하지 않았으면 빈 배열을 반환한다.

 

 splice 예제

 하나도 제거하지 않고, 2번 인덱스에 "drum" 추가

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

   

 

하나도 제거하지 않고, 2번 인덱스에 "drum" 과 "guitar" 추가

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum", "guitar");

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

   

 

3번 인덱스에서 한 개 요소 제거

var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

   

   

2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가

var myFish = ["angel", "clown", "drum", "sturgeon"];
var removed = myFish.splice(2, 1, "trumpet");

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

   

   

0번 인덱스에서 두 개 요소 제거하고 "parrot","anemone","blue" 추가 

var myFish = ["angel", "clown", "trumpet", "sturgeon"];
var removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]

   

  

2번 인덱스에서 두 개 요소 제거

var myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]

   

   

 -2번 인덱스에서 한 개 요소 제거

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]

 

 

2번 인덱스를 포함해서 이후의 모든 요소 제거

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]

   

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

 

https://im-developer.tistory.com/103

[JS/Array] slice()와 splice()의 차이점