1. from(), of()

이터러블 오브젝트 혹은 Array-like 오브젝트를 Array오브젝트로 변환하는 함수입니다.

//1. Array-like Object
const ArrayLikeObj = {0: "test1", 1:"test2", length:2}
const result1 = Array.from(ArrayLikeObj);
console.log(result1);//["test1", "test2"]

//2. Iterable Object
/*
<li class="sports">축구</li>
<li class="sports">농구</li>
*/
const nodes = document.querySelectorAll(".sports");
const show = (node) =>console.log(node.textContent);
Array.from(nodes).forEach(show);//축구\\n 농구

두 번째 파라미터에 함수를 작성하면 Array오브젝트에 추가 될 각각의 요소가 추가되기전 두 번째 파라미터로 받은 로직을 수행후 반환되는 값을 배열에 반환합니다.

const like = {0:"zero", 1:"one", length:2};
const change = (value) => value+"변경적용";

console.log(Array.from(like, change));
//[zero변경적용, one변경적용]

세 번째 파라미터에는 this 바인딩 컴포넌트에 들어갈 컨텍스트를 파라미터로 넣어줄 수 있습니다.
추가된 컨텍스트는 호출된 함수에서 this로 참조할 수 있습니다.

const like = {0:"zero", 1:"one", length:2};
const change = function(value){return value+"변경적용" +this.book};
const obj = {book: "책책책"};
console.log(Array.from(like, change, obj));
//[zero변경적용책책책, one변경적용책책책]

of()

파라미터 값을 배열로 변환하여 반환하는 함수로 파라미터에 변환 대상 값을 작성합니다. 물론 콤마로 구분해 다수 작성도 가능합니다.

const result = Array.of(1, 2, 3);
console.log(result);
console.log(Array.of());

2. 배열 엘리먼트 복사, copyWithin()

오브젝트내의 범위 값을 복사하여 설정하는 함수로 1개의 필수 파라미터와 2개의 옵션 파라미터를 받습니다. 두 번째 파라미터의 인덱스부터 복사하여 첫 번째 인덱스부터 순서대로 설정합니다(대체) 여기서 세 번째 파라미터가 있따면 복사할 끝 인덱스를 의미하는것으로 이 파라미터가 없다면 2번째 파라미터인덱스부터 끝까지를 의미하고 파라미터가 있다면 해당 인덱스 까지를 의미합니다.

즉, .copyWithin(1,3,5) 라고 한다면 3번 인덱스부터 5번 인덱스 직전까지 복사하여 1번인덱스의 위치부터 순서대로 대체하는 것입니다.

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

[실행 결과]

[A,D,E,D,E]

여기서 세 번째 인덱스를 작성했을 경우와 2,3번째 인덱스를 모두 작성하지 않았을 때의 코드도 살펴보겠습니다

const copy = list.copyWithin(0, 2, 4);

⇒ 2번째부터 4번째까지([C,D])를 0번째 인덱스부터 대체한다는 의미로 아래 이미지와 같이 대체됩니다.
const copy2 = list2.copyWithin(2);

⇒ 2, 3번째 파라미터가 둘 다 없을경우 배열 전체를 복사한다는 의미가되어 1번째 파라미터위치부터 대체를 한다는 의미가 됩니다. 이때 복사할 엘리먼트 수가 대체할 엘리먼트 수보다 많을 경우 매치되는 인덱스만 값을 대체하고 남는 것 ([D,E])는 대체하지 않습니다.

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

const list2 = ["A","B","C","D","E"];
const copy2 = list2.copyWithin(2);
console.log(list2);
console.log(copy2);

[실행 결과]

[C,D,C,D,E]

[A,B,A,B,C]