[JS] 배열(splice, slice) 자르기

배열 자르기 ✂️

• splice() : 배열 원본 자체를 건드리고 삭제된 요소를 반환(잘라내기)
• slice() : 배열 원본 건드리지 않고 원하는 부분만 리턴(복붙)
• splice()와 slice() 차이

1. splice() : 배열 원본 자체를 건드리고 삭제된 요소를 반환(잘라내기)

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

1-1. 시작 인덱스만 지정한 경우

const fruits = ["apple", "banana", "lemon"];
const new_fruits = fruits.splice(1);

console.log(new_fruits);
console.log(fruits);

->
["banana", "lemon"]; // 삭제된 요소를 반환(잘라내기)
["apple"]; // 인덱스 1부터 모든 데이터를 다 지움

1-2. 시작 인덱스와 삭제 개수를 지정한 경우

const fruits = ["apple", "banana", "lemon"];
const new_fruits = fruits.splice(1, 1);

console.log(new_fruits);
console.log(fruits);

->
["banana"];
["apple", "lemon"]; // 인덱스 1부터 1개만 지움

1-3. 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

const fruits = ["apple", "banana", "lemon"];
const new_fruits = fruits.splice(1, 1, "orange", "watermelon");

console.log(new_fruits);
console.log(fruits);

->
["banana"];
["apple", "orange", "watermelon", "lemon"]; // 인덱스 1부터 1개만 지운후 그 자리에 오렌지, 수박 삽입

2. slice() : 배열 원본 건드리지 않고 원하는 부분만 리턴(복붙)

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

console.log(citrus);
console.log(fruits);

->
["orange", "watermelon"];
["apple", "orange", "watermelon", "lemon", "mango", "banana"];

3. splice()와 slice() 차이

• splice()는 배열 원본 자체를 건드리고, slice()는 배열의 원본을 건드리지 않는다
• splice()의 두번째 인자는 count의 개념으로 생각할것!(첫번째 인자 부터 몇개를 삭제할지!)
• slice()는 시작 인덱스 부터 끝 인덱스 전!까지 가져옴!

0번째, 1번째 인덱스를 지우고 싶을때!

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

// splice() : 배열 자체에서 데이터를 삭제할 때
const result = arr.splice(0, 2); // 인덱스 0부터 2개를 삭제
console.log(result) = [1, 2]; // 삭제된 요소를 반환
consile.log(arr) = [3, 4, 5]; // 기존 배열엔 남은 요소만 존재

// slice() : 배열에서 원하는 부분만 return
const result = arr.slice(2, 5); // 인덱스 2부터 인덱스 5 전까지
console.log(result) = [3, 4, 5];
console.log(arr) = [1, 2, 3, 4, 5]; // 기존 배열은 그대로 남아있음