꼭 해야할것 같아서 정리하는 slice vs splice!
slice()메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
- 여기서 중요한것은 얕은 복사를 하여 원본 배열이 바뀌지 않는다는것!
Array.slice(start[,end])
arr = ['a', 'b', 'c', 'd','e']- start는 시작점에 대한 인덱스
arr.slice(1) // [ 'b', 'c', 'd', 'e' ]- start가 만약 없을경우 0부터 slice
arr.slice() // [ 'a', 'b', 'c', 'd', 'e' ]- start가 음수일 경우 배열의 끝에서부터 잘라낸다
arr.slice(-3) // [ 'c', 'd', 'e' ]- start가 배열의 길이보다 같거나 큰수를 지정한 경우엔 빈 배열을 반환
arr.slice(5) // []- end는 종료점의 인덱스다. 여기서 end의 인덱스는 반환하지 않고 그 전까지만 반환한다
arr.slice(2, 4) // [ 'c', 'd' ]- 위와 같이 end를 지정하지 않았을경우 배열의 끝까지 반환한다
- end를 지정한 경우 끝에서부터의 길이를 나타낸다
arr.slice(1,-1) // [ 'b', 'c', 'd' ]- 배열의 길이와 같거나 큰 수일 경우 배열의 끝까지 반환한다
arr.slice(2, 7) // [ 'c', 'd', 'e' ]
splice()메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
- 배열의 기존 요소를 삭제/교체/추가 하며 원본 배열 자체를 수정한다 ⛔️
Array.splice(start,[,deleteCount[,item1[,item2[,item3[, ...]]]]])
- start는 배열의 삭제/교체/추가를 시작할 인덱스
arr.splice(1) // [ 'b', 'c', 'd', 'e' ]
arr // [ 'a' ]- start가 음수인경우 배열의 끝부터 요소를 변경한다
arr.splice(-2) // [ 'd', 'e' ]
arr // [ 'a', 'b', 'c' ]- start가 배열의 길이보다 큰 경우
arr.splice(6)// []
arr // [ 'a', 'b', 'c', 'd', 'e' ]- deleteCount는 배열에서 몇개의 요소를 제거 할지 정한다
arr.splice(1, 2)// [ 'b', 'c' ]
arr // [ 'a', 'd', 'e' ]- deleteCount가 생략일 경우 위의 경우들과 같이 모든 요소를 제거한다
arr.splice(1) // [ 'b', 'c', 'd', 'e' ]
arr // [ 'a' ]- deleteCount가 음수일 경우, 어떤 요소도 제거 안된다
arr.splice(1, -3)// []
arr // [ 'a', 'b', 'c', 'd', 'e' ]- item 1, 2 ... 가 없을경우 삭제만 한다
- item 1, 2 ... 는 배열에 추가할 요소
arr.splice(1, 1, 'hi')// [ 'b' ]
arr // [ 'a', 'hi', 'c', 'd', 'e' ]
arr.splice(1, 0, 'hi')// []
arr // [ 'a', 'hi', 'b', 'c', 'd', 'e' ]
Front-end Developer 👩💻