[JS] Array 오브젝트의 배열 엘리먼트 복사와 Generic을 알아보자

Array.prototype.copyWithin()

범위 값을 복사해 같은 오브젝트에 설정한다.

변경된 Array 오브젝트를 반환한다.

 

파라미터는 총 3개로 1번째만 필수다.

1번째 파라미터: 복사한 값을 설정할 시작 인덱스

2번째 파라미터: 복사 시작 인덱스

3번째 파라미터: 복사 끝 인덱스 (바로 앞까지)

 

• 3번째 파라미터를 작성하지 않은 경우

복사한 값을 설정할 시작 인덱스는 1이고, 복사를 시작할 인덱스는 3이다.

즉 list의 1번째 인덱스부터 복사 값을 붙여 넣을 건데, 2번째 파라미터에서 3번째 인덱스부터 복사를 시작할 거고 어디까지 복사를 끝낼지 3번째 파라미터를 설정하지 않았기 때문에 "D"부터 끝까지 복사하게 된다.

 

따라서 D부터 끝까지 값을 복사해서 1번째 인덱스에 붙여넣는다는 말!

const list = ["A", "B", "C", "D", "E"];
const copy = list.copyWithin(1, 3);

console.log(list); // ['A', 'D', 'E', 'D', 'E']
console.log(copy); // ['A', 'D', 'E', 'D', 'E']

• 3번째 파라미터를 작성한 경우

3번째 파라미터를 작성하면 list의 0번째 인덱스부터 복사 값을 붙여 넣되 2번째 파라미터에 적힌 2번째 인덱스부터 3번째 파라미터에 적힌 4번째 인덱스 바로 앞까지가 복사된다. 즉 2번 인덱스 ~ 3번 인덱스를 복사해서 C, D가 복사되고 이게 0번째 인덱스에 붙여 넣어져 A, B가 C, D로 대체되게 된다.

const list = ["A", "B", "C", "D", "E"];
list.copyWithin(0, 2, 4);

console.log(list); // ['C', 'D', 'C', 'D', 'E']

• 2번째, 3번째 파라미터를 작성하지 않을 경우

복사할 범위가 정해지지 않을 경우에는 배열 전체가 복사 대상이 된다.

즉 1번째 파라미터대로 3번째 인덱스부터 배열 전체가 다시 붙여넣어진다.

const list = ["A", "B", "C", "D", "E"];
list.copyWithin(3);

console.log(list); // ['A', 'B', 'C', 'A', 'B']

---

Array.prototype.CopyWithin()의 특징

이 함수는 얕은 복사를 한다. 전 게시글에서 말했던 것처럼 얕은 복사를 하면 연동이 된다.

얕은 복사를 하면 같은 배열 안에서 단순히 '이동'만 하게 되는데, 어떤 자료를 삭제했다가 붙여 넣었다가 하는 게 아니라 위치만 바꿔주는 것이다 보니 처리 속도가 빠르다는 특징이 있다.

 

ES6에서 나온 TypedArray는 바이너리 데이터(0과 1로 구성된 데이터) 처리를 하는데 그 때 이 함수를 사용하면 더욱 효율적이라고 한다.

---

Generic

copyWitnin function is intentionally generic.

it does not require that its this value be an Array object.

Therefore it can be transferred to other kinds of objects for use as a method.

 

뭔 소린데

 

해석하면 copyWithin 함수는 의도적으로 일반적인 함수로 설계되어 this 값이 배열 객체일 필요가 없으며, 다른 종류의 객체에 대해서도 메서드로 사용될 수 있다고 한다. 즉 이 함수는 배열이 아닌 다른 객체(Array-like 같은 거)에서도 사용할 수 있는 일반적인 함수라는 뜻이다. 네?

 

네?

 

like 오브젝트를 작성하고, call()를 쓰면 1번째 파라미터인 like를 this로 참조하게 된다.

그런데 해당 메서드는 Array 메서드라서 like를 Array로 넘겨줘야 하는데, Array-like(Object)인 like가 넘어갔다.

const like = {0: 10, 1: 20, 2: 30, length: 3};

console.log(Array.prototype.copyWithin.call(like, 1, 0))
// {0: 10, 1: 10, 2: 20, length: 3}

변경된 Array 오브젝트를 반환해야 하는데, 반환한 값도 보면 Array-like 형태, 즉 대상 오브젝트 형태인 것을 알 수 있다.

 

copyWithin()이 Array 메서드이므로 Array 오브젝트가 처리 대상이지만,

generic은 Array 오브젝트가 아닌 Array-like, 이터러블 오브젝트를 처리할 수 있다는 뜻이다.

그리고 이럴 때 반환 시 대상 오브젝트 형태로 반환한다.

 

그렇게 어려운 개념은 아니나 다소 생소한 개념이긴 하다.