너! 배열이 되어라! - Array.from() 메서드 사용하기

Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다.

(※ 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미합니다.)

// 1. 문자열을 배열로 만드는 예시
console.log(Array.from("Hello"));
// [ 'H', 'e', 'l', 'l', 'o' ]

// 2. 유사 배열 객체를 배열로 만드는 예시
console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 }));
// [ '찬민', '희진', '태인' ]

// 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시
const funcA = (...arguments) => {
    return Array.from(arguments)
}

console.log(funcA(1,2,3,4,5));
// [ 1, 2, 3, 4, 5 ]

Array.from() 의 첫 번째 인자는 배열로 만들 이터러블한 객체가 되며, 두 번째 인자는 생성한 배열의 모든 원소에 대해 수행할 맵핑 함수입니다. (Array.map() 이라고 생각하시면 됩니다.)

 

한번 Array.from()과 반복문을 활용해 1부터 31까지의 수를 원소로 갖는 배열을 생성해 보겠습니다.

// 맵핑 함수의 첫 번째 인자 언더스코어(_) 는 특별한 인자가 아니라,
// 불필요한 인자의 공간을 채우기 위한 용도입니다.

const arr = Array.from(Array(31), (_, index) => index + 1);

console.log(arr);

const arr = [];

for (let i = 1; i <= 31; i++) {
  arr.push(i);
}

console.log(arr);

만약 Array.from()을 사용하지 않는다면 아래처럼 고전적인(?) 반복문을 사용해야 할 텐데요, 취향에 따라 다르겠지만 저는 Array.from()을 통해 배열을 생성하는 방식이 더 깔끔해 보이네요! 😄

 

 

다만 한 가지 단점이 있다면, Array.from()은 ES6에 새로 추가된 문법이므로 구세대 브라우저를 지원하기 위한 폴리필이 필요합니다.

다만 "그 브라우저" 가 2022년 6월까지 시한부 선고를 받았으니, 아마 제가 취업할때 쯤이면 폴리필을 덜 신경써도 될 것 같네요!! (행복!!)