[JS] Array.from 의 두번째 인자는 map 과 유사한 함수다.

생각보다 자주 사용되고 있는 Array.from 이라는 메소드에 대해서 알아보고 보다 다양한 상황에서 활용할 수 있는 능력을 키우기 위해서 이번 포스팅을 준비하였다. 

 

기본 사용과 개념 | 순회 가능 혹은 유사 배열 객체를 Array 인스턴스로 생성

우선 Array.from 은 Array 생성자 함수에 바로 접근이 가능한 정적 메소드이다. 그리고 해당 메소드를 사용하면 순회 가능한 객체나 유사 배열 객체를 Array 인스턴스로 생성할 수 있다.

 

예를 들어, hello 라는 문자열이 있으면, 해당 문자열은 실제 배열은 아니지만, 내부적으로는 배열과 유사한 형태를 지니기 때문에 유사배열객체로서 순회가 가능하다. 따라서 Array.from 의 인자로 해당 문자열을 전달하게 되면, Array 인스턴스로  새롭게 탈바꿈된(얕게 복사된) 배열을 반환받을 수 있다.

const iterable = 'hello';
const array = Array.from(iterable);
console.log(array); // 출력: ["h", "e", "l", "l", "o"]

 

실제로 isPrototypeOf 메소드를 사용하여 해당 Array 인스턴스와 hello 문자열이 Array 프로토타입 체인에 존재하는지 확인 해보면 다음과 같은 결과를 확인할 수 있다.

const iterable = 'hello';
const array = Array.from(iterable);

console.log(Array.prototype.isPrototypeOf(iterable)) // false 
console.log(Array.prototype.isPrototypeOf(array)) // true

 

즉, 기존 hello 은 Array 생성자 함수의 프로토 타입  체인에 존재하지 않는 유사배열객체로 인식되며(유사 배열이므로 순회가 가능하다), Array.from 메소드를 통해 생성된 array 의 경우에는 Array 생성자 함수의 프로토타입 체인에 존재한다는 사실을 확신시할 수 있다.

 

두 번째 인자로 map 함수를 호출 할 수 있다.

Array.from 의 놀라운 기능 중 하나는 두 번째 인자로 콜백함수를 전달하면 마치 map 메소드와 같은 동작을 한다는 것이다. 이게 가능한 이유는 Array.from 으로 생성된 인스턴스가 배열 형태라는 당연한 사실 때문이다.

 

아까 전에 사용했던 hello 문자열을 사용하여 map 함수를 호출해보면 다음 결과를 확인할 수 있다.

const iterable = 'hello';
const array = Array.from(iterable, (char,index)=> char+index);

console.log(array) // ['h0', 'e1', 'l2', 'l3', 'o4']

 

다만 실제 map 함수의 경우에는 (element, index, self) 와 같이 세 번째 인자로 전체 배열이 존재하지만, Array.from 의 두 번째 인자로 전달하는 함수의 경우에는 self 가 존재하지 않는다는 차이점이 있다. 그것을 제외하고는 아주 동일한 동작을 수행한다.

 

첫 번째 인자로 {length : n} 을 전달하면 n 개 만큼 배열이 생성된다.

Array.from 메소드의 첫 번째 인자로 {length: 5} 와 같이 전달하면, 예시의 경우에는 [undefind, undefind, undefind, undefind, undefind]  와 같이 undefined 가 할당된 배열이 생성된다. 

 

여기서 만일 5개의 요소가 모두 false 로 가득찬 배열이 되기를 원한다면, 다음과 같이 fill 메소드를 활용하면 된다.

Array.from({length:5}).fill(false) // [false, false, false, false, false]

 

Set 객체로 중복이 제거된 객체를 배열로 반환할 때

Array.from의 인자로 Set 으로 생성된 순회가능객체를 전달하면, 실제 배열로 반환할 수 있다. 예를 들어 [1,2,2,5,5,6] 이라는 배열이 있다고 가정해보자.

 

해당 배열을 Set의 인자로 전달하면, 중복이 제거된 순회가능한 객체로 변환하여 반환한다.

const arr = [1,2,2,5,5,6] 

const iterableObject = new Set(arr)
console.log(iterableObject) // {1, 2, 5, 6}

 

그리고 이를 Array.from 의 첫 번째 인자로 전달하면, 배열로 변환하여 반환한다.

const arr = [1,2,2,5,5,6] 

const iterableObject = new Set(arr)
const array = Array.from(iterableObject)

console.log(array) // [1, 2, 5, 6]

 

마무리

오늘은 Array.from 메소드에 대해서 간략하게 알아보는 시간을 가져보았는데, 어떤 도구나 마찬가지 겠지만, 활용하고자 하면 다방면으로 활용이 가능한 메소드라고 생각이 된다. 지금 살펴본 내용들은 간단하면서도 자주 사용되는 방식이고, 그 외에도 목적에 따라서 다양한 메소드와 결합하여 사용할 수 있을 것 같다.

 

그 외에 다양한 활용법에 대한 링크

Array.from() - JavaScript | MDN