slice()와 splice()

slice()

arr.slice([begin[, end]])

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

begin : 0을 시작으로 하는 추출 시작점에 대한 인덱스

• undefined인 경우 : 0번 인덱스부터 slice
• 음수 인덱스인 경우 : 배열 끝에서부터의 길이. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출한다.
• 배열의 길이와 같거나 길이보다 큰 경우 : 빈 배열을 반환

end : 추출을 종료 할 0 기준 인덱스. slice는 end인덱스를 제외하고 추출한다.
=>slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 , 3을 인덱스로 하는 요소) 추출

• 생략되었을 경우 : 배열 끝까지(arr.length) 추출
• 음수 인덱스인 경우 : 배열의 끝에서부터의 길이를 나타낸다. slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출.
• 배열의 길이와 같거나 길이보다 큰 경우 : silce()는 배열의 끝까지(arr.length) 추출.

반환값: 추출한 요소를 포함한 새로운 배열.

code

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

//2번 인덱스부터 끝까지 출력 
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

//2번 인덱스부터 4-1인 3번 인덱스까지 출력
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

//1번 인덱스부터 4번인덱스까지 출력
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

//배열끝에서 마지막 2개 엘리먼트 출력
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

//2번 인덱스부터 추출 시작하여 끝에서부터 -1번째인 'elephant'전까지 추출하므로 'duck'까지 출력  
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

let arr= ["나는","철수","입니다"];
arr.splice(1,0,"대한민국","소방관")
//아무것도 지우지 않고 추가됨
console.log(arr);//["나는","대한민국","소방관","철수","입니다"]

splice()

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

• splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 원본 배열 자체를 수정하는 것입니다!

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

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

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

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

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

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

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

• 하나의 요소만 제거한 경우 길이가 1인 배열을 반환
• 아무값도 제거하지 않으면 빈 배열을 반환한다.

code

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

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

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

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

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

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

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

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

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

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

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

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

✅정리

• slice메소드는 원본배열은 바뀌지 않고, 추출 시작 인덱스와 종료할 인덱스를 지정하여 추출한 요소를 포함한 새로운 배열로 반환한다.
• splice메소드는 원본배열 자체를 수정하며, 변경을 시작할 인덱스와 배열에서 제거할 요소의 수를 정하여 추가하고(추가는 생략 가능) 제거한 요소를 담은 배열을 반환한다.