[Javascript/자바스크립트] slice와 splice

slice와 splice 둘 다 배열의 메서드는 맞지만 하는 일이 약간 다르다.

slice()는 배열에서 원하는 구간의 얕은 복사본을 반환하고, splice()는 배열에 요소를 추가, 제거, 또는 교체할 때 사용된다.

slice()

배열에서 원하는 구간을 추출하여 새로운 배열(얕은 복사본)을 반환하는 함수.

slice()
slice(start)
slice(start, end)

매개 변수

start (Optional)

잘라낼 구간의 시작 인덱스.

end (Optional)

잘라낼 구간의 끝 인덱스. end는 이 구간에 포함되지 않는다.

반환 값

추출된 구간을 담은 새로운 Array.

예시

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]
const citrus = fruits.slice(1, 3);

// fruits : ["Banana", "Orange", "Lemon", "Apple", "Mango"]
// citrus : ["Orange", "Lemon"]

 

splice()

배열에서 요소를 추가, 제거, 또는 교체하는 함수로, 사용 시 원본 배열이 수정된다.

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2)
splice(start, deleteCount, item1, item2, /* …, */ itemN)

매개 변수

start

배열의 변경을 시작할 위치. 만약 음수라면, 배열의 끝애서부터 센 값이다.

deleteCount (Optional)

start에서부터 제거할 요소들의 개수.

item1, ..., itemN (Optional)

배열의 start에서부터 추가할 배열. 만약 이 값을 주지 않는다면 splice()는 배열에서 삭제만 하게 된다.

반환 값

삭제된 값을 담은 array. 만약 삭제된 값이 없다면 빈 배열 리턴.

예시

기존 요소 삭제 없이 새로운 요소 추가

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

// 인덱스 2부터 "WaterMelon", "Passionfruit" 추가
const removed = fruits.splice(2, 0, "WaterMelon", "Passionfruit");

// fruits : ["Banana", "Orange", "WaterMelon", "Passionfruit", "Lemon", "Apple", "Mango"]
// removed : []

배열 마지막에 요소 추가(push()와 비슷한 동작)

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

// 배열 끝에 "Passionfruit" 추가
const removed = fruits.splice(fruits.length, 0, "Passionfruit");

// fruits : ["Banana", "Orange", "Lemon", "Apple", "Mango", "Passionfruit"]
// removed : []

배열에서 요소 삭제

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

// 인덱스 3의 요소 삭제
const removed = fruits.splice(3, 1);

// fruits : ["Banana", "Orange", "Lemon", "Mango"]
// removed : ["Apple"]

요소 삭제 후, 다른 값 추가

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

// 인덱스 3부터 2개의 요소 삭제 후, "WaterMelon", "Passionfruit", "Tangerine" 추가
const removed = fruits.splice(3, 2, "WaterMelon", "Passionfruit", "Tangerine");

// fruits : ["Banana", "Orange", "Lemon", "WaterMelon", "Passionfruit", "Tangerine"]
// removed : ["Apple", "Mango"]

start 값으로 음수 사용

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

// 인덱스 -3 부터 2개의 요소 삭제
const removed = fruits.splice(-3, 2);

// fruits : ["Banana", "Orange", "Mango"]
// removed : ["Lemon", "Apple"]

start부터 끝까지의 요소 삭제

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

// 인덱스 2부터 끝까지 요소 삭제
const removed = fruits.splice(2);

// fruits : ["Banana", "Orange"]
// removed : ["Lemon", "Apple", "Mango"]

 

 

[참고]

• Array.prototype.slice() - Javascript | MDN
• Array.prototype.splice() - Javascript | MDN
• slice(), splice() [엄탱][배열 내장함수#5]