[javascript] copyWithin(target, start, [end]) | 같은 배열에서 특정 요소들을 복사하여 배열의 일부에 덮어씌운 새로운 배열을 반환하는 메소드

Array.Prototype.copyWithin(target, start, [end])

이 메소드는 start 인덱스 부터 end 인덱스-1 까지의 요소를 복사하여 target 인덱스 지점을 기준으로 순차적으로 복사한 값을 덮어 씌운 후 새로운 배열을 반환한다.

- end 는 생략이 가능하며, 생략하는 순간 start 인덱스 부터 배열의 마지막 요소 까지 복사한다. - 빈 슬릇이 존재(희소) 하는 경우, 빈 슬릇을 그대로 복사하여 target 인덱스 지점 부터 덮어씌운다. 즉, 희소를 보존한다.

 

이렇게 보면 바로 이해가 되지 않기 때문에 예시 코드를 살펴보자

const originArray = [1,2,3,4,5]
const newArray = originArray.copyWithin(0,1,2);
console.log(newArray) // [ 2, 2, 3, 4, 5 ]


/* 그 외 */
console.log([1, 2, 3, 4, 5].copyWithin(0, 3)); // [4, 5, 3, 4, 5]
             
console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4)); // [4, 2, 3, 4, 5]
   
console.log([1, 2, 3, 4, 5].copyWithin(-2, -3, -1)); // [1, 2, 3, 3, 4]

 

 

예를 들어, 현재 원본배열이 [1,2,3,4,5] 와 같이 오름차순으로 정렬되어 있다고 가정할 때,

 

원본배열

 

target 인덱스( 0 )에 위치한 요소 1을 기준으로  start 인덱스( 1 )에 위치한 요소 2 부터 end 인덱스의 -1 지점에 위치한 요소 2 까지 복사한 후, 복사한 값을 순차적으로 target 인덱스 위치부터 붙여넣기한  새로운 배열을 반환한다.

 

copyWithin(target, start, end)

 

따라서, newArray 변수를 출력하면, [1,2,3,4,5] 가 아닌  [2,2,3,4,5] 라는 새로운 배열이 출력되는 것을 확인할 수 있다.

 

복사된 결과가 반영된 새로운 배열이 출력 된다.

 

 

참고자료

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