티스토리 뷰
배열 메서드인 splice()와 slice() 차이점을 알기 전에 해당 메서드의 특징을 알아보자!
$ splice() 메서드
: 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경.
$ splice() 메서드 어떻게 사용하는가?
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])- 첫 번째 매개변수 : start, 배열의 변경을 시작할 인덱스.
- 두 번째 매개변수 : deleteCount, 배열에서 제거할 요소의 수, 생략하거나 배열의 길이 - start 보다 크면 start부터 모든 요소를 제거. 모든 요소가 제거되면 빈 배열이 반환.
- 세 번째 매개변수 : optional, 배열에 추가할 요소. 생략하면 요소를 제거만 함.
splice() 메서드는 반환 값으로 제거한 요소를 담은 배열을 반환한다.
$ splice() 메서드 예
// 배열의 기존 요소 삭제하기
const numbers = [1, 2, 3, 4];
console.log(numbers.splice(0,1)); // [1];
console.log(numbers); // [2,3,4];// 배열의 기존 요소 교체하기
const numbers = [1, 2, 3, 4];
console.log(numbers.splice(0,1,'문자열 추가해보기')); // [1];
console.log(numbers); // ["문자열 추가해보기", 2, 3, 4]// 배열의 새로운 요소 추가하기
const numbers = [1, 2, 3, 4];
console.log(numbers.splice(4,1,'배열의 마지막 항목에 문자열 추가해보기')); // [];
console.log(numbers); // ["문자열 추가해보기", 2, 3, 4, "배열의 마지막 항목에 문자열 추가해보기"]
$ slice() 메서드
: 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환. 즉, 원본 배열은 바뀌지 않는다.📝
$ slice() 메서드 어떻게 사용하는가?
arr.slice([begin[, end]])첫 번째 매개변수 : begin, 0을 시작으로 하는 추출 시작점의 인덱스. 음수 인덱스는 배열의 마지막 항목에서부터의 길이를 나타냄.
두 번째 매개변수 : end, optional, 배열의 항목을 추출을 종료 할 0 기준 인덱스.
음수 인덱스는 배열의 마지막에서부터의 길이를 나타냄. 예) slice(2, -1) : 세번째부터 끝에서 두번째 요소까지 추출. end 생략시 배열의 마지막까지 추출.
$ slice() 메서드 예
// 원본 배열 변경하지 않고 복사본 배열 만들어서 원하는 항목 추출하기
const numbers = [1, 2, 3, 4];
console.log(numbers.slice(2)); // [3, 4]
console.log(numbesrs); // [1, 2, 3, 4] * 원본 배열의 변경되지 않음(중요)
$ 그래서 splice()와 slice() 차이점이 뭔가요?
배열의 원본이 변경(mutable)되느냐 or 변경되지 않느냐(immutable)이다.
즉, splice()는 mutable한 배열 메서드이고, slice()는 immutable한 배열 메서드이다.
$ 하지만 더 중요하게 강조하고 싶은 것은?
원본 데이터를 변경하는 메서드를 사용하는 것을 지양하도록 하자. 원본 데이터를 변경하지 않고, 복사본을 만들어 사본을 통해 데이터를 변경하자.
slice() 메서드도 좋지만, es6에 새롭게 추가된 기능인 마침표 세 개(...)로 표시하는 펼침연산자(Spread Operator)를 통해 원본 배열을 복사하여 새로운 배열을 생성할 수 있다. slice() 메서드처럼 원본 데이터가 변경되지 않고, 가독성이 좋다.
// 펼침연산자(Spread Operator) 사용 예시
const numbers = [1, 2, 3, 4];
const copyNumbers = [...numbers];
console.log(copyNumbers); // [1,2,3,4]