배열 - slice & splice

JavaScript 100제에서 배열 내장 함수를 이용해서 배열 중간에 새 요소를 추가하는 문제를 풀다 보니

Python에서라면 insert 함수를 사용했을텐데 JavaScript에서는 어떤 것을 사용하면 좋을지 찾아봤습니다.

 

Slice

start 인덱스부터 end 인덱스 전까지의 복사본을 반환한다. 그리고 원본 배열은 수정하지 않는다.

array.slice(start, end)

start : 시작점

• undefined : 0번 인덱스부터 복사
• 음수인데 그 절댓값이 배열의 길이보다 클 경우               : 0번 인덱스로 인식
• 음수인데 그 절댓값이 배열의 길이보다 작거나 같을 경우 : 해당 인덱스로 인식
• 양수인데 배열의 길이보다 크거나 같을 경우                   : 빈 배열 반환
• 양수인데 배열의 길이보다 작은 경우                              : 해당 인덱스로 인식

end : 종료점

• 지정하지 않거나 배열의 길이보다 크거나 같은 경우        : 배열의 끝까지로 인식
• 양수인데 배열의 길이보다 작은 경우                              : 해당 인덱스 전까지로 인식
• 음수인데 그 절댓값이 배열의 길이보다 클 경우               : 0번 인덱스로 인식
• 음수인데 그 절댓값이 배열의 길이보다 작거나 같을 경우 : 해당 인덱스로 인식

 

 

start 와 end 모두 생략하면 배열 전체 복사하여 반환한다.

 

 

Splice

배열의 기존 요소를 삭제 또는 교체하거나 새로운 요소를 추가할 수 있다. 그리고 원본 배열 자체를 수정한다.

array.splice(start, deleteCount, items)

start : 배열의 변경을 시작할 인덱스

• 양수인 start <= 배열의 길이               : 해당 인덱스
• 양수인 start > 배열의 길이                 : 배열의 길이로 설정 => 배열의 마지막 인덱스의 값이 추가, 변경
• 음수인 start의 절댓값 <= 배열의 길이 : 배열 끝에서부터의 해당 인덱스
• 음수인 start의 절댓값 > 배열의 길이   : 인덱스가 0으로 설정

deleteCount : 배열에서 제거할 요소의 수

• 생략 또는 deleteCount >= (배열의 길이 - start) : start 부터의 모든 요소 제거
• deleteCount < (배열의 길이 - start)                  : start 부터의 deleteCount 만큼의 요소만 제거
• 0 이하의 수                                                          : 제거하지 않는다.

items : 배열에 추가할 요소

• 지정하면 해당 요소 추가
• 지정하지 않으면 위에서 정한 요소들만 제거

 

아래처럼 splice 함수를 변수에 저장하면 해당 변수에는 삭제된 요소들이 저장된다.

const arr = [200, 100, 300];

const arr1 = arr.splice(1, 2, 250, 350);

console.log(arr);
console.log(arr1);

// arr  출력 값 : [200, 250, 350]
// arr1 출력 값 : [100, 300]

 

 

 

 

<참고 자료>

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

 

https://im-developer.tistory.com/103

[JS/Array] slice()와 splice()의 차이점