자바스크립트 - 배열의 연속되는 요소들을 특정 인덱스에 복사하기 (copyWithin() 함수)

예를 들어, [1, 2, 3]라는 배열에서 뒤에 2,3 요소들을 앞에 1부터 덮어쓰고 싶을 때 copyWithin() 함수를 사용하면 된다.

 

copyWithin() 함수는 다음과 같이 사용 가능하다.

copyWithin(붙여넣기 시작 인덱스)	예: copyWithin(2);
copyWithin(붙여넣기 시작 인덱스, 복사 시작 인덱스)	예: copyWithin(0, 1);
copyWithin(붙여넣기 시작 인덱스, 복사 시작 인덱스, 복사 종료 인덱스)	예: copyWithin(3, 1, 2);

 

 

이해가 안 될 수 있으니 예제를 보자.

 

 

예제: copyWithin(2)

const arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(2)); // [1, 2, 1, 2, 3]

copyWithin() 함수 호출 시, 위와 같이 인수가 한 개면, 그 인수는 붙여넣기 시작 인덱스를 의미한다.

그리고 암묵적으로 복사 시작 인덱스는 0으로 간주한다.

즉, copyWithin(2)는 copyWithin(2, 0)와 동일하다.

 

copyWithin(2) 함수 호출 시, 배열의 인덱스 0의 요소부터 마지막 요소를 => 배열의 인덱스 2를 시작으로 차례대로 붙여 넣는다.

 

         1, 2, 3

         v  v  v

1, 2, 3, 4, 5

========

1, 2, 1, 2, 3

 

 

 

예제: copyWithin(-2)

const arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(-2)); // [1, 2, 3, 1, 2]

위와 같이 copyWithin() 함수는 인수를 음수로 받을 수 있다.

 

인수 -1 => 배열의 마지막 인덱스.

인수 -2 => 배열의 두 번째 마지막 인덱스.

인수 -3 => 배열의 세 번째 마지막 인덱스.

등등 음수는 이렇게 사용된다.

 

이번 예제의 뜻은 배열의 첫 요소부터 끝 요소(가능하면)까지 붙여 넣을 것이고 그 시작점은 배열의 두 번째 마지막 인덱스이다.

 

 

              1, 2

              v  v

1, 2, 3, 4, 5

========

1, 2, 3, 1, 2

 

 

 

예제: copyWithin(0, 2)

const arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(0, 2)); // [3, 4, 5, 4, 5]

copyWith(0, 2)의 작동 원리.

인수 0 => 인덱스 0부터 붙여 넣기.

인수 2 => 붙여넣기 할 때 인덱스 2의 요소부터 마지막 요소까지 붙여넣기.

 

즉, 인덱스 2의 요소인 3부터 마지막 요소 5까지 붙여 넣을 건데 붙여넣기 시작점은 인덱스 0이다.

 

3, 4, 5

v  v  v

1, 2, 3, 4, 5

========

3, 4, 5, 4, 5

 

 

 

주의할 점은 어떠한 배열에 copyWithin() 함수 사용 시, 그 배열의 변경된 요소들은 변경된 채 유지된다.

아래 예제를 보자.

 

 

예제: copyWithin(0, 2) 호출 이후 배열의 변화

const arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(0, 2)); // [3, 4, 5, 4, 5]
console.log(arr); // [3, 4, 5, 4, 5]

기존 arr 배열의 값은 [1, 2, 3, 4, 5]다.

copyWithin() 함수 사용 이후에 배열 값을 출력하면 기존 arr 배열 값이 아닌 copyWithin()로 변경된 배열 값이 출력된다.

 

 

예제: copyWithin(0, 4)

const arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(0, 4)); // [5, 2, 3, 4, 5]

이 예제에서 배열에 copyWithin(0, 4) 함수를 실행할 경우, 결괏값은 [5, 2, 3, 4, 5]이다,

배열의 첫 요소만 5로 바뀌는 이유는 기존 배열에서 5가 마지막 요소 값이기 때문에 인덱스 0 요소에 5를 붙여놓고 copyWithin() 함수는 종료한다.

 

 

 

예제: copyWithin(2, 0, 2)

const arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(2, 0, 2)); // [1, 2, 1, 2, 5]

이번 예제엔 copyWithin() 함수 안에 (붙여넣기 시작 인덱스, 복사 시작 인덱스, 복사 종료 인덱스) 셋 다 있다.

그 말은 인덱스 0의 요소부터 인덱스 1의 요소까지의 요소들을 인덱스 2를 시작으로 붙여 넣는다.

(복사 종료 인덱스의 요소는 붙여넣기에서 제외.)

 

         1, 2

         v  v

1, 2, 3, 4, 5

========

1, 2, 1, 2, 5