[Javascript/Array] slice, splice (배열 자르기, 배열 복사, 얕은 복사)

📚 slice, splice

• 자바스크립트 Array.prototype
• slice 는 배열을 얕은 복사 해서 새로운 배열로 반환
• splice 는 배열의 기존 요소를 추가, 변경, 삭제해 원본 배열을 변경

---

📗 slice

기존 배열에서 새로운 배열로 깊은 복사

• 배열.slice( start[,end ] )

• 반환 타입은 배열

• start 을 지정하지 않으면 인덱스 0 부터 시작

• end 는 종료할 인덱스로 end 전까지 복사함

• end 를 지정하지 않으면 배열의 길이가 됨 (길이보다 큰 수가 와도 배열의 길이)

• 배열의 복사 1

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var arrSlice = arr.slice(); // 0 부터 arr.length 전 까지 얕은 복사

console.log(arrSlice);

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

• 배열의 복사 2

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var arrSlice1 = arr.slice(1);
var arrSlice2 = arr.slice(1, 0);
var arrSlice3 = arr.slice(1, -1);
var arrSlice4 = arr.slice(-2);

console.log(arrSlice1);
console.log(arrSlice2);
console.log(arrSlice3);
console.log(arrSlice4);

[ 2, 3, 4, 5, 6, 7, 8, 9 ]
[]
[ 2, 3, 4, 5, 6, 7, 8 ]
[ 8, 9 ]

• 배열의 복사 3

  참조형을 요소로 가지는 배열의 경우 얕은 복사로 인해 대참사가 발생할 수 있음

var arr = [{ a: 'A', b: 'B' }, [1, 2, 3]];

var arrSlice = arr.slice(); // [{ a: 'A', b: 'B' }, [1, 2, 3]]

arr[0].a = 'AA'; // arr -> [{ a: 'AA', b: 'B' }, [1, 2, 3]] ?
arrSlice[1].push(4); // arrSlice -> [{ a: 'A', b: 'B' }, [1, 2, 3, 4]] ?

console.log(arr);
console.log(arrSlice);

[ { a: 'AA', b: 'B' }, [ 1, 2, 3, 4 ] ]
[ { a: 'AA', b: 'B' }, [ 1, 2, 3, 4 ] ]

---

📒 splice

배열의 기존 요소를 변경하는 메서드

• 배열.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• 반환 타입은 배열로 제거한 요소가 있다면 반환

• start는 배열의 변경을 시작할 인덱스

• deleteCount는 배열에서 제거할 요소의 수, 0 이면 삭제하지 않음

• item1, item2, item3, ... 아이템들은 배열에 추가할 요소

• 배열에서 특정 위치의 요소 또는 요소들을 삭제

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var arrSplice1 = arr.splice(1, 1); // 인덱스 1의 요소를 삭제
var arrSplice2 = arr.splice(1, 3); // 인덱스 1부터 3개를 삭제
var arrSplice3 = arr.splice(0); // 모두 삭제

console.log(arr);
console.log(arrSplice1);
console.log(arrSplice2);
console.log(arrSplice3);

[]
[ 2 ]
[ 3, 4, 5 ]
[ 1, 6, 7, 8, 9 ]

• 배열에서 특정 위치에 요소 또는 요소들을 추가

  삭제한 요소가 없다면 빈 배열을 반환

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var arrSplice1 = arr.splice(1, 0, '추가1');
var arrSplice2 = arr.splice(3, 0, '추가2', '추가3', { add: '추가4' });

console.log(arr);
console.log(arrSplice1);
console.log(arrSplice2);

[ 1, '추가1', 2, '추가2', '추가3', { add: '추가4' }, 3, 4, 5, 6, 7, 8, 9 ]
[]
[]

---