JS, slice와 splice

[ slice ]

slice는 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용

인자로 시작 인덱스(index), 종료 인덱스(index)를 받으며

시작 인덱스부터 종료 인덱스의 전까지 값을 복사하여 반환함(원본 배열은 바뀌지 않음)

즉 시작 인덱스가 가리키는 값은 포함하지만, 종료 인덱스가 가리키는 값은 포함하지 않는 다는 것

 

 -값을 넣는다면 뒤에서 부터 셈

시작 인덱스만 적는다면 시작 인덱스부터 배열의 마지막 인덱스까지 반환함

시작 인덱스도 인자로 주지 않으면 처음 값부터 마지막 값까지 전체를 복제

 

nums = Array(20).fill().map((_, i) => i)
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.slice(-4)		//[ 16, 17, 18, 19 ]

nums.slice(5, 10)	//[5, 6, 7, 8, 9]

nums.slice(10)		//[10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.slice()
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

 

[ splice ]

배열로 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체하는데 사용

인자로 시작 인덱스(index), 몇개의 값을 삭제할지, 추가할 값을 가변 인자를 받으며

삭제된 값을 담고 있는 배열을 반환함. 즉 빼온 값은 기존의 배열에서 삭제됨

그렇기에 데이터의 불변성(immutability)이 보장되어야 하는 프로그램을 작성할 때 주의해야 함

 

첫번째 인자만 넘기면 해당 인덱스가 가리키는 값을 포함해서 마지막 값까지 삭제가 됨

 

nums = Array(20).fill().map((_, i) => i)
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.splice(5, 3)	// [5, 6, 7]
nums
// [0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

원본 배열로 부터 3개의 값이 빠져나감

 

nums.splice(5, 0, -5, -6, -7)	// []
nums
// [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

삭제된 값이 없어 빈 배열이 반환되고, 추가한 값이 원본배열에 그대로 추가됨

 

nums.splice(10, 2, -10, -11)	//[10, 11]
nums
// [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, -10, -11, 12, 13, 14, 15, 16, 17, 18, 19]

 

nums.splice(15)	//[15, 16, 17, 18, 19]
nums
// [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, -10, -11, 12, 13, 14]