Array.prototype.copyWithin()

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

Array.prototype.copyWithin() - JavaScript | MDN

https://www.w3schools.com/jsref/jsref_copywithin.asp

JavaScript Array copyWithin() Method

copyWithin() 메서드는 좀 특이한 메서드이다.

배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환한다.

이 때, 크기(배열의 길이)를 수정하지 않고 반환한다.

설명만 들어서는 이해가 잘 가지 않는데, 실제 예제를 보면 조금 이해가 빠르게 된다.

해당함수도 배열 원 데이터를 건드리므로 잘 못쓰면 원데이터가 소실된다는 위험성이 있다.

조심해서 사용해야한다.

 

먼저 구문은 다음과 같다.

arr.copyWithin(target[, start[, end]])

 

매개변수 target은 복사한 값을 넣을 위치를 가리키는 0 기반 인덱스이다. 음수는 배열의 끝부터 계산한다. 이 값이 arr.length보다 크거나 같으면 아무것도 복사하지 않는다.

쉽게 이야기하면 target은 이 배열에 붙여넣을 때 붙여넣는 시작점을 말하는 것이다. 0 기반이니 첫번째가 0이고, 두번째가 1이다.

매개변수 start와 end는 복사해서 붙여넣을 때 지금의 배열 어디서부터 어디까지 복사할 것인지를 말한다. 조금 헷갈리기 쉬운 것이, target이 붙여넣을 시작지점이고, start와 end가 복사할 대상의 시작과 끝을 말한다는 것이다. end는 더 조심해야하는데, end값을 포함해서 복사하는 것이 아니라 그 앞까지 복사한다는 것이다. 때문에, .copyWithin(0, 3, 3) 는 복사를 하나도 안한 것이 된다. 이것도 둘다 0기반이므로 조심해야한다.

 

다음 예제들로 심플하게 이해할 수 있을 것 같다.

let arr_test = [
{id : 1  , name : '설아' , team : '우주소녀'},
{id : 2  , name : '선의' , team : '우주소녀'},
{id : 3  , name : '보나' , team : '우주소녀'},
{id : 4  , name : '엑시' , team : '우주소녀'},
{id : 5  , name : '수빈' , team : '우주소녀'},
{id : 6  , name : '루다' , team : '우주소녀'},
{id : 7  , name : '다원' , team : '우주소녀'},
{id : 8  , name : '은서' , team : '우주소녀'},
{id : 9  , name : '성소' , team : '우주소녀'},
{id : 10 , name : '미기' , team : '우주소녀'},
{id : 11 , name : '여름' , team : '우주소녀'},
{id : 12 , name : '다영' , team : '우주소녀'},
{id : 13 , name : '연정' , team : '우주소녀'}
];
arr_test.copyWithin(0, 3, 4); // 3+1번째 요소를 4-1 까지 복사해서 0+1번째부터 붙여넣는다.
console.log(arr_test);
//Array [Object { id: 4, name: "엑시", team: "우주소녀" }, Object { id: 2, name: "선의", team: "우주소녀" }, Object { id: 3, name: "보나", team: "우주소녀" }, Object { id: 4, name: "엑시", team: "우주소녀" }, Object { id: 5, name: "수빈", team: "우주소녀" }, Object { id: 6, name: "루다", team: "우주소녀" }, Object { id: 7, name: "다원", team: "우주소녀" }, Object { id: 8, name: "은서", team: "우주소녀" }, Object { id: 9, name: "성소", team: "우주소녀" }, Object { id: 10, name: "미기", team: "우주소녀" }, Object { id: 11, name: "여름", team: "우주소녀" }, Object { id: 12, name: "다영", team: "우주소녀" }, Object { id: 13, name: "연정", team: "우주소녀" }]