[JS] Array 오브젝트의 from(), of()를 알아보자

Array.from()

첫 번째 파라미터의 오브젝트를 Array 오브젝트로 변환한다.

알고리즘 문제를 풀 때 문자열을 배열로 만들려면 이렇게 하나보네? 하고 암 생각 없이 따라 썼던 메서드다.

 

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

1번째 파라미터: 변화 대상, 이터러블 오브젝트

2번째 파라미터: 전개할 때마다 호출할 함수

3번째 파라미터: 호출된 함수에서 this로 참조할 오브젝트

 

아래 코드처럼 Array-like 오브젝트 like를 배열 오브젝트로 변환해 반환했다.

문자열의 경우 문자 단위로 분리해 배열로 반환한다.

const like = {0: "zero", 1: "one", length: 2};
const list = Array.from(like);

console.log(list) // ['zero', 'one']
console.log(Array.from("ABC")) // ['A', 'B', 'C']

 

Argument 오브젝트도 Array-like다.

function args() {
    return Array.from(arguments)
};

console.log(args(1, 2, 3)) // [1, 2, 3]

 

쓸 일이 있을진 모르겠지만 Node List에서도 가능하다.

Array.from(nodes)를 실행하면 [축구, 농구]가 되는데, 여기서 순차적으로 원소를 파라미터로 화살표 함수 show를 실행 시킨다. 축구의 텍스트 콘텐트만 나오면 축구, 다음으로는 농구가 콘솔에 찍히게 된다.

// <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); 

// 축구
// 농구

 

콜백 함수를 호출할 수도 있다.

배열로 만들면 ['zero', 'one']이 될텐데 콜백 함수로 여기의 원소를 value로 치환해 하나씩 꺼내 "변경"과 더해 출력한다.

const like = {0: "zero", 1: "one", length: 2};

console.log(Array.from(like, value => {
    return value + "변경";
}));

// ['zero변경', 'one변경']

 

3번째 파라미터에 this로 참조할 오브젝트를 넣으면 아래와 같이 진행된다.

배열로 만들면 [10, 20]인 상태에서 위 예시와 똑같이 원소를 value로 치환해 this.plus와 더해준다. 이 때 콜백 함수로 3번째 파라미터를 this로 참조해 70이라는 값을 가져와 더해주면 80, 90이 나오게 된다.

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

console.log(Array.from(like, function(value) {
    return value + this.plus;
}, {plus: 70}));

// [80, 90]

---

Array.of()

파라미터 값을 배열로 변환해 반환한다.

파라미터에 변환 대상 값을 작성하며 콤마로 구분해 다수를 작성할 수 있다.

 

아래와 같이 작성하며 파라미터로 아무 것도 입력하지 않으면 빈 배열을 반환한다.

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