JavaScript - 배열 원소 삭제하기, splice와 slice의 차이

splice(시작인덱스, 몇 개 지울거?, 혹시 넣을 거?)

배열 원소를 지정된 포지션에서 지울 때 splice를 사용. 시작 인덱스로부터 몇 개를 지울 건지 써줘. 

fruits = ["apple", "banana", "lemon"];

fruits.splice(1);       // 시작 인덱스만 지정하고, 몇 개를 지울지는 안 넣었을 땐
console.log(fruits);    // ["apple"] 인덱스 1부터 모든 데이터를 다 지움

fruits.splice(1, 1);    // 인덱스 1부터 1개만 지움
console.log(fruits);    // ["apple", "lemon"]


fruits.splice(1, 1, "orange", "watermelon");
console.log(fruits);    // ["apple", "orange", "watermelon", "lemon"]
                        // 인덱스 1부터 1개만 지우고, 그 자리에 오렌지, 수박 삽입

splice가 재밌는 건, 지울 줄만 아는게 아니라 넣을 줄도 안다는 것임. 3번째 인자부터는 지운 자리에 넣고 싶은 문자열을 입력하면, 위의 예시처럼 배열에 문자열이 추가됨.  splice가 한국어로는 '꼬아서 잇다' 이런 뜻이라, 지우고 이을 수 있는 메소드 인가봄.

 

slice(시작인덱스, 끝인덱스(포함x)?)

slice는 배열의 특정한 부분을 return함. 그 특정한 부분은 시작 인덱스와 끝 인덱스를 정해주면 됨. 이때, 끝 인덱스는 특정 부분에 포함되지 않으니 주의. 음수를 지정하게 되면, 배열의 끝에서부터의 길이를 나타냄. slice(-2)를 하면 배열의 마지막 2개 원소를 추출.  

const fruits = ["banana", "orange", "lemon", "apple", "mango"]

const citrus = fruits.slice(1, 3)
console.log(citrus);    // ["orange", "lemon"]
console.log(fruits);    // ["banana", "orange", "lemon", "apple", "mango"]

 

 

splice와 slice의 차이

1) splice는 배열 원본 자체를 건드리고, slice는 배열의 원본은 건드리지 않음.

2) splice는 삭제된 요소를 반환하지만, slice는 빠지고 남는 요소들이 반환됨.

const array = [1, 2, 3, 4, 5];
// 첫번째와 두번째 데이터를 지우고 싶어

// 배열 자체에서 데이터를 삭제할 때
const result = arr.splice(0, 2);       // 인덱스 0부터 2개를 삭제 
console.log(result) = [1, 2];          // 삭제된 애들이 반환됨
console.log(array) = [3, 4, 5];        // 원래 배열엔 남아있는 애들만


// 배열에서 원하는 부분만 return해서 받아오고 싶을 때
const result = arr.slice(2, 5);        // 인덱스 2부터 인덱스 5 전까지
console.log(result) = [3, 4, 5];       // 빠지고 남은 애들이 반환됨
console.log(array) = [1, 2, 3, 4, 5]   // 원래 배열은 그대로 남아있음