머릿 속이 복잡할 때 나에게 다가온 자바스크립트 배열.

하여튼 여러모로 코딩이든 생각이든 정리는 바로바로하고 살자는 교훈을 준 slice()와 splice()에 대해 정리해보자!
js에서 문자열 또는 일부분 잘라내거나 추출할 때 사용하는 친구들이다.

첫번째, 배열을 잘라보자.
배열의 일부분을 잘라내어 새로이 리턴할 때는 slice()를 사용한다.

slice()

slice(start[, end])

slice 함수는 잘라낼 배열의 시작 index 그리고 end index 를 받아, 그 사이의 원소들을 새로운 배열로 만들어서 return 한다. 이때, 원본 배열은 변경되지 않는다.

parameter

start
추출할 배열의 시작점인 index.

end
추출을 종료할 기준인 index.
이때, end index의 직전까지의 요소만 추출된다.

return

반환값
추출한 요소를 포함한 새로운 배열을 말한다.

ex)

//예
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(a.slice(2,5))
→ [3, 4, 5]

배열의 a[2] ~a[5] (a[5]는 미포함)까지 추출해, 새 배열을 리턴한다.

//예) index가 1개
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(a.slice(3))
→ [4, 5, 6, 7, 8, 9]

두번째 parameter인 end값이 입력되지 않는다면, start index인 a[3]부터 배열의 끝까지 추출해 새 배열을 리턴한다.

//예) index가 음수인 경우
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(a.slice(-3)
→ [7, 8, 9]

index에 음수를 지정한 경우, 배열의 끝에서부터의 길이를 나타낸다. a.slice(-3) a배열의 뒤에서 3번째부터 배열의 끝까지 추출해 새 배열을 리턴한다.

이외에 undefined인 경우 0부터 slice, 배열의 길이와 같거나 큰 수를 지정한 경우 배열의 끝까지 추출해 새 배열을 리턴한다.

-------------------

두번째, 배열을 자르고 붙이고 바꾸고 다해보자!
splice()는 원본 배열을 수정할 수 있다.

splice()

splice(start[, deleteCount[,item1[, item2[, ...]]]])

splice() 함수는 start, deleteCount, items원소 목록을 파라미터로 입력 받습니다.
splice() 함수는 start index부터 deleteCount만큼의 원소를 삭제하고,
뒤 이어 오는 items를 start index 위치에 추가합니다.

parameter

start
배열의 변경을 시작할 시작점인 index.

deleteCount
배열에서 제거할 요소의 수.
delteCount가 입력되지 않으면, start index이후의 모든 값이 삭제된다.
0 이하라면 어떤 요소도 제거하지 않는다. 이 때, 최소한 하나의 새로운 요소를 지정해야 한다.

items
배열에 추가할 요소.

return

반환값
제거한 요소를 담은 배열을 말한다.

//예) 제거하지 않고, 요소 추가하기
let a = [1, 2, 3]

console.log(a.splice(0, 0, 'a', 'b')
→['a', 'b', 1, 2, 3]

console.log(a.splice(1, 0, 'a', 'b')
→[1, 'a', 'b', 2, 3]

배열의 값을 삭제하지 않고 요소만 추가할 경우에는 splice() 안에 첫번째 파라미터로 추가할 값이 들어갈 index를 지정하고 두번째 파라미터는 0(삭제할 것이 없음)으로 지정하고, 다음으로 추가할 값을 차례로 입력하면 된다.

ex)

//예) 추가하지 않고, 삭제하기
let a = [1, 2, 3, 4, 5]

console.log(a.splice(0, 2)
→[3, 4, 5]

console.log(a.splice(1, 2)
→[1, 4, 5]

배열의 값을 추가하지 않고 삭제만 하는 경우에는 splice() 안에 첫번째 파라미터로 삭제할 값의 시작 index를 지정하고, 두번째 파라미터는 삭제할 원소의 수를 지정한다. 추가할 값이 없으므로, 다음 파라미터는 지정하지 않는다. splice(삭제 시작점 index, 삭제할 원소 수)

예) 전체 원소 삭제
let a = [1, 2, 3, 4, 5]

console.log(a.splice(0))
→

배열 전체의 원소를 삭제하고 싶다면 start index를 0으로 지정하고 , 나머지 파라미터는 입력하지 않는다.

예) index 1 이후의 모든 원소 삭제
let a = [1, 2, 3, 4, 5]

console.log(a.splice(1))
→[1]

특정 index 이후의 원소를 삭제하고 싶다면 start index를 지정하고, 나머지 파라미터는 입력하지 않는다.

예) 삭제와 추가 동시에 하기
let a = [1, '철수', 2, '영희', 3]

console.log(a.splice(1, 1, '바보', '천재')
→[1, '바보', '천재', 2, '영희', 3]

index 1부터 1개의 요소를 삭제하였고, index 1 부터 '바보', '천재'를 추가했다.

예) 값 변경하기
let a = ['a', 1, 'c', 'd']

console.log(a.splice(1,1,'b)
→['a', 'b', 'c', 'd']

하나의 값을 삭제하고 그 위치에 새로운 원소 1개를 추가하여 값을 변경한 것 같은 효과를 주었다.