[JavaScript] Array.copyWithin()

Suvina·2025년 1월 8일

JavaScript

목록 보기
23/28
post-thumbnail

배열의 일부 요소를 복사해서 같은 배열 안의 다른 위치로 이동시킴

*기존 배열의 크기를 변경하지 않고 제자리에 복사한다는 점이 특징

✅ 사용법

array.copyWithin(target, start, end)
  • target: 복사된 요소를 붙여넣을 위치의 인덱스 (필수)
  • start: 복사를 시작할 위치의 인덱스 (기본값: 0)
  • end: 복사를 끝낼 위치의 인덱스 (기본값: 배열 길이) → 끝 인덱스는 포함되지 않음

예제 1: 간단한 사용법

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 0번째 인덱스부터, 3번째 인덱스의 값들 복사
console.log(arr); // [4, 5, 3, 4, 5]
  • target = 0: 복사된 요소를 0번째 인덱스에 붙여넣음.
  • start = 3: 배열의 3번째 요소(4)부터 복사를 시작함.
  • end가 생략되었으므로 배열 끝까지(5) 복사됨.

예제 2: start와 end 사용하기

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 0, 2); // 1번째 인덱스에 0~2(2는 포함 X) 복사
console.log(arr); // [1, 1, 2, 4, 5]
  • target = 1: 복사된 값을 1번째 인덱스에 붙여넣음.
  • start = 0: 0번째 인덱스부터 복사를 시작함.
  • end = 2: 2번째 인덱스 이전까지만 복사(즉, 0번째와 1번째 값만 복사).

주의사항

  • 새 배열을 생성하지 않으므로 원본 배열에 영향을 준다.
let arr = [1, 2, 3, 4, 5];

// start가 배열 길이 이상인 경우
console.log(arr.copyWithin(0, 10)); 
// 출력: [1, 2, 3, 4, 5] (변화 없음)

// end가 배열 길이 이상인 경우
console.log(arr.copyWithin(0, 1, 10)); 
// 출력: [2, 3, 4, 5, 5] (1번째부터 배열 끝까지 복사)

// start가 음수인 경우
console.log(arr.copyWithin(0, -2)); 
// 출력: [4, 5, 4, 5, 5] (뒤에서 두 번째 요소부터 복사)

// end가 음수인 경우
console.log(arr.copyWithin(0, 1, -1)); 
// 출력: [2, 3, 4, 5, 5] (1번째부터 뒤에서 두 번째 요소까지만 복사)

slice()

배열의 일부를 새로운 배열로 복사해 반환

let arr = [1, 2, 3, 4, 5];
let result = arr.slice(1, 3); // 1번째부터 3번째 전까지 복사
console.log(result); // [2, 3]
console.log(arr);    // [1, 2, 3, 4, 5] (원본 배열은 유지)

fill()

배열의 모든 요소 또는 특정 구간을 지정된 값으로 채움

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4); // 1번째부터 4번째 전까지(1, 2, 3번 인덱스) 0으로 채우기
console.log(arr); // 출력: [1, 0, 0, 0, 5]

주요 차이점 비교

profile
개인공부

0개의 댓글