Extend-w1D3-JS) slice() splice() : 배열 자르기 등 변경 메서드

배열을 자르는 slice()와 splice() 함수의 차이점을 알아보자.

arr.slice() 메서드 ( 반환만 )

arr.slice( start_idx, end_idx )

두 인자로 받은 '시작 인덱스' 부터 '종료 인덱스' 까지의 값을 배열에서 복사하여 새 배열로 반환. = 사실상 자르기

arr = [2,3,4,5,6]
arr.slice(2,3) // [4,5] 반환

---
arr = [2,3,4,5,6]  
arr.slice() // [2,3,4,5,6] 반환

arr.splice() 메서드 ( 갱신 및 반환 )

다목적 메서드임

• 배열로부터 특정 범위 삭제하여 갱신저장 + 삭제범위 반환
• 새로운 값 추가
• 기존 값 대체

arr.splice( start_idx, 삭제할item 수, 추가할item )

용례1. 배열에서 특정범위 제거갱신 및 제거범위 배열 반환받기

arr = [1,2,3,4,5,6]

removed_arr = arr.splice(0,3)

console.log(arr) // [4,5,6]
console.log(removed_arr) // [1,2,3]

용례2. 온전히 값 추가

arr = [0,1,2,3,4,5,6]
removed_arr = arr.splice(3,0, -5,-6,-7)

console.log(removed_arr) // [] 출력,  두번째 삭제 개수 인자가 0이므로
console.log(arr) // [0,1,2,-5,-6,-7,3,4,5,6] 출력, 3을 시작 인덱스로 -5,-6,-7 추가되었기 때문

용례3. 첫번째 인자(시작 인덱스)만 넘기기 :
해당 시작 인덱스로부터 마지막 인덱스의 범위까지 삭제하여 배열 갱신하며, 삭제된 범위 배열 반환

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

removed_arr = arr.splice(3)

console.log(removed_arr) // [4,5] 출력
console.log(arr) // [1,2,3]  출력