[JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체)

What

배열을 선언하는 방법에는 여러 가지가 있다. const arr = [1, 2, 3] 처럼 변수에 배열을 담는 가장 일반적인 방식도 있고, Array(1, 2, 3) 처럼 생성자를 이용해서 배열을 생성하는 방식도 있다.

* Array(10)처럼 인자에 한 개만 넣을 경우에는 배열의 length를 의미하고, Array(1, 2, 3)처럼 두 개 이상일 경우 배열의 값을 의미한다.

 

Array.from()은 어떤 특정한 규칙을 갖는 값을 배열로 선언할 때 혹은 유사 배열 객체나 이터러블 객체를 새로운 배열로 선언하고자 할 때 사용한다. 또한, 문자를 한 글자씩 배열로 만들고자 할 때도 유용하게 사용된다.

 

How

문자열을 한 글자씩 떼서 배열로 선언하고 싶을 때

const str = '안녕하세요';
const arr = Array.from(str);
console.log(arr); // ['안', '녕', '하', '세', '요'];

문자열을 특정 문자를 기준으로 배열로 만들고 싶을 때는 split() 메서드를 사용하는 것이 좋지만, 한 문자씩 분리해서 배열로 만들고 싶을 때는 Array.from(String)을 사용하는 게 좋다. (위 코드와 같은 결과를 얻을 수 있다.)

 

배열 선언과 동시에 배열의 값들을 매핑해서 생성하고 싶을 때

const arr = Array.from(Array(10), (el, idx) => {
    return idx * 3;
})
console.log(arr); // [0, 3, 6, 9, 12, 15, 18, 21, 24, 27]

Array.from()은 첫 번째 인자로 배열을, 두 번째 인자로 map() 콜백 함수를 가진다. 위 코드에서는 Array(10)으로 length가 10인 배열을 생성해주었고 map() 함수를 이용해서 배열의 값을 인덱스 * 3의 값들로 채워주었다.

 

Array(10)의 자리에는 따로 선언된 배열을 넣어줘도 되고, 유사 배열 객체를 넣어줘도 된다.

여기서 유사 배열 객체란, HTMLCollection과 같이 배열과 닮았지만 배열이 아닌 객체를 말하는데 {0: 'a', 1: 'b', 2: 'c', length: 3} 이런 식의 배열로 선언된 객체들을 유사 배열 객체라고 한다.

 

유사 배열 객체를 일반 배열로 전환하고 싶을 때

const items = document.getElementId('wrap').children; // 유사 배열 객체
const itemArr = Array.from(items, (el) => {return el}); // 배열로 전환

유사 배열 객체는 for~of로 순회할 수 없고 map()과 같은 배열 메서드를 사용할 수 없다. 따라서, 유사 배열 객체를 일반 배열로 변환하여 사용하는 방법이 필요하며, 이때 사용하는 게 Array.from()이다. (스프레드 연산자를 사용해도 된다.)

 

참고로, 유사 배열 객체를 배열로 변환하지 않고, 반복문을 쓰고 싶다면 'for~of'문을 사용하면 된다. for~of문은 이터러블 객체 내부의 각 요소를 순서대로 순회할 수 있는 반복문으로 이터러블한 속성만 있으면 유사 배열 객체도 반복 가능하다.

* 유사 배열 객체를 심도있게 이해하기 위해서는 이터러블/이터레이터에 대한 개념 공부가 필요하다.

 

유사 배열 객체의 종류에는 HTMLCollection, NodeList, Arguments, 문자열이 있다. 만약, 배열처럼 생긴 것에 배열 메서드를 사용했을 때 오류가 뜬다면 유사 배열 객체이지 않을까 의심해본 뒤 Array.from()을 통해 배열로 만들어주자.

 

1. Array.from(Array, map());
2. Array.from('가나다') // ['가', '나', '다'];
3. Array.from(유사배열객체, el => {return el}) // 유사 배열 객체를 배열로 생성