slice()와 splice()의 차이점

slice(), splice() 메서드는 상당히 비슷한 쓰임새를 가지고 있다.

하지만, 둘은 차이점이 분명 존재한다.

 

 

splice

새로운 배열을 반환하는 동시에 원래 배열을 수정한다.

제거된 요소를 포함할 수 있고, 새로 삽입된 요소들 또한 포함할 수 있다.

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

=> 1. start(필수):

변경을 시작할 index 번호.

이 index부터 요소가 제거되거나 새로운 요소가 삽입되게 된다.

음수 값을 사용하면 배열의 끝에서부터 역방향으로 계산하게 된다.

 

=> 2. deleteCount(옵션):

제거할 요소의 갯수.

생략하면 start index부터 배열의 끝까지 모든 요소가 제거되게 된다.

 

=> item1, item2, ...(옵션):

배열에 삽입될 요소들이다.

start index 이후부터 삽입된다.

생략하면 삽입되지 않는다.

 

- 예시문제:

// 1.
const people = ["김지나", "이하늘", "지우리"];

people.splice(1,1,"이지승","이민아");
// ["김지나", "이지승", "이민아", "지우리"]
// 기존의 people 배열 수정


// 2.
const jobs = ["변호사", "개발자", "의사", "디자이너", "제빵사"];

jobs.splice(2, 2);
// ["변호사", "개발자", "제빵사"]


// 3.
const nums = [1, 2, 3, 4, 5, 6, 7, 8];

nums.splice(-4, 2, 9, 10);
// [1, 2, 3, 4, 9, 10, 7, 8]

slice()

새로운 배열을 반환하지만 원래 배열을 수정하지 않는다.

array.slice(start, end)

=> 1. start(필수):

추출을 시작할 index 번호, 만약 생략될시 0으로 간주.

 

=> 2. end(옵션):

추출을 종료할 index 번호. 종료 index는 추출에 포함되지 않는다.(end 바로 이전 index까지)

만약 생략될시 배열의 끝까지 추출하게 된다.

 

이 둘 다 음수 값을 사용하면 배열의 끝에서부터 역방향으로 계산하게 된다.

 

- 예시문제:

const arr = [1, 2, 3, 4, 5, 6];

arr.slice(2, 4); // [3, 4]
arr.slice(2); // [3, 4, 5, 6]
arr.slice(-3, 5); // [4, 5]