[ES6] 배열 메소드 : copyWithin(), fill()

ES6에서는 배열 복사를 위한 2개의 메소드, copyWithin()과 fill()이 추가되었습니다. 개인적으로는 딱히 필요한 상황이 없었던 것 같지만, 일단 필요에 의해서 추가되었을 테니 나중을 위해서 정리를 해봅니다.

 

1. Array.prototype.copyWithin()

• copyWithin() 메소드는 배열의 일부를 복사하여, 지정된 위치에 덮어쓰고 해당 배열을 반환합니다.
• 배열의 길이는 변경되지 않습니다.
• copyWithin() 메소드는 원본 배열을 변경시킵니다.

[문법]

arr.copyWithin(target, start, end);

JavaScript

 

Parameter	Description
target	(필수) 복사한 엘리먼트 붙여 넣을 위치의 인덱스
start	(옵션) 복사를 시작할 위치의 인덱스 (default: 0)
end	(옵션) 복사를 끝낼 위치의 인덱스 (default: arr.length) * end에 해당하는 요소는 복사에서 제외됩니다.

* 음수인 경우 인덱스를 배열 끝에서부터 계산합니다. (arr.length+end로 계산하면 됩니다.)

[예제]

위의 파라미터 설명은 다소 혼란스러울 수 있으므로 예제로 살펴보겠습니다.

먼저 기본적인 사용법은 다음과 같습니다.

var arr = ['a', 'b', 'c', 'd', 'e'];

// 2번째 index부터 처음부터 끝까지 (default)의 엘리먼트를 복사합니다.
// 배열 길이를 넘어가는 부분은 무시됩니다.
console.log(arr.copyWithin(2)); // ["a", "b", "a", "b", "c"]

// 원본 배열이 변경됩니다.
console.log(arr); // ["a", "b", "a", "b", "c"]

JavaScript

 

좀 더 다양한 parameter에 따른 사용 예는 다음과 같습니다.

 

// 1. 2번째 index (30)부터 복사한 값을 넣어줍니다. 
//    복사의 시작점은 첫번째 index (20)  
var arr = [10, 20, 30, 40, 50].copyWithin(2, 1);
console.log(arr); // [10, 20, 20, 30, 40]

// 2. 2번째 index (30)부터 복사한 값을 넣어줍니다. 
//    복사의 시작점은 첫번째 index (20)  
//    복사의 끝은 2번째 index (30) 까지 -> end 직전의 값까지 복사
var arr = [10, 20, 30, 40, 50].copyWithin(2, 1, 3);
console.log(arr); // [10, 20, 20, 30, 50]

var arr = [10, 20, 30, 40, 50].copyWithin(0, 2, 4);
console.log(arr); // [30, 40, 30, 40, 50]

// 3. end-1 값이 start 보다 작으므로 아무 동작을 하지 않습니다.
var arr = [10, 20, 30, 40, 50].copyWithin(0, 3, 2);
console.log(arr); // [10, 20, 30, 40, 50]

// 3. index가 음수인 경우 arr.length + index로 계산합니다.
// array.copyWithin(-2, -3, -1) == array.copyWithin(3, 2, 4)
var arr = [10, 20, 30, 40, 50].copyWithin(-2, -3, -1);
console.log(arr); // [10, 20, 30, 30, 40]

JavaScript

 

2. Array.prototype.filI()

• filI() 메서드는 배열의 지정된 영역을 정적인 하나의 값으로 덮어씁니다.
• fill() 메서드는 원본 배열을 변경합니다.

[문법]

arr.fill(value, start, end);

JavaScript

 

Parameter	Description
value	(필수) 배열을 채워 넣을 값
start	(옵션) 채워넣기 위치의 시작 인덱스 (default: 0)
end	(옵션) 채워 넣기를 끝낼 위치의 인덱스 (default: arr.length) * end에 해당하는 요소는 채워 넣기에서 제외됩니다. * 음수인 경우 인덱스를 배열 끝에서부터 계산합니다. (length+end)

 

copywithin은 일정 구간의 배열 값을 지정된 위치에 복사해서 넣어주는 반면, fill의 경우는 하나의 값을 지정된 영역에 반복해서 입력합니다.

[예제]

fill을 사용하는 다양한 case에 대한 예제입니다.

const array1 = [1, 2, 3, 4];

// index1 ~ 2 (3-1)에 해당하는 구간을 0으로 채워줍니다.
console.log(array1.fill(0, 1, 3)); // [1, 0, 0, 4]

// index 1부터 끝까지를 5로 채워줍니다.
console.log(array1.fill(5, 1)); // [1, 5, 5, 5]

// 전체 구간을 6으로 채워줍니다.
console.log(array1.fill(6)); // [6, 6, 6, 6]

// 원본 배열 (array) 역시 변경됩니다. 
console.log(array1); // [6, 6, 6, 6]

JavaScript

 

값을 Object로 넣는 경우에는 다소 특이한 모습을 보여줍니다. 즉, 객체 자체가 값이 아닌 reference로 반복 입력되어 배열 중 하나의 객체의 값을 변경하면 모든 객체 값이 변경됩니다.

var arr = Array(3).fill({name: '철수'}); 
console.log(arr); // [{name:"철수"}, {name:"철수"}, {name:"철수"}]
arr[0].name = '영희'; 
console.log(arr); // [{name:"영희"}, {name:"영희"}, {name:"영희"}]

JavaScript

 

이번 글에서 다룬 메소드는 사실 크게 필요한 메소드인지는 잘 모르겠습니다. 개인적으로 아직 두 개의 메소드를 사용할만한 상황이 떠오르지를 않네요. ^^;