[#. JavaScript] slice() vs splice() 차이점을 알아보자

 

 

 

 

 

slice() vs splice()

배열을 다룰 때 자주 사용하는 함수 slice(), splice()에 대해 알아보자

 

 

 

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

 

 

 

 

① slice()

=조각(명사)

begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다 
원본 배열은 수정되지 않는다

 

 

ex)
var arr1 = arr.slice(3, 5); // [4, 5]
var arr2 = arr.slice(undefined, 5); // [1, 2, 3, 4, 5]
var arr3 = arr.slice(-3); // [8, 9, 10]
var arr4 = arr.slice(-3, 9); // [8, 9]
var arr5 = arr.slice(10); // []
var arr6 = arr.slice(4); // [5, 6, 7, 8, 9, 10]
var arr7 = arr.slice(undefined); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr8 = arr.slice(5, -4); // [6]
var arr9 = arr.slice(2, 15); // [3, 4, 5, 6, 7, 8, 9, 10]

 

 

* slice()한 배열을 반환한다
기존 배열은 바뀌지 않음, 새로운 변수에 넣어야 한다
slice(start, end) end index에 해당하는 값은 포함하지 않는다
=> var a = [1, 2, 3, 4]
var b = a.slice(1, 3)   

console.log(b)  // [2, 3]

 

 

 

 

 

 

② splice()

=잇다(동사)

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다
이 함수는 원본 배열 자체를 수정한다

 

 

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(10, 2, 'a', 'b', 'c');
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]
console.log(arr1); // [11, 12]

 

 

splice()한 배열을 새로운 변수에 담았을 경우

slice()한 것과 똑같이 잘라낸 값을 가져온다

그러나, splice()했을 때 원본 배열은 바뀐다

 

var data = [1, 2, 3]
var sl = data.slice(0, 1)	// [1]
var sp = data.splice(0, 1)	// [1]

console.log(data)	// [2, 3]

 

 

 

* splice()한 요소를 제거한 배열을 반환한다

기존 배열이 바뀜
아무 값도 넣지 않으면 빈 배열을 반환한다

=> var c = [1, 2, 3]

var d = c.splice() 

console.log(d)   // []