자바스크립트 Array 스태틱 메소드 from() 알아보기

Last Modified : 2022-08-05 / Created : 2022-08-05

2,298
View Count

주소 복사하기

자바스크립트의 배열 Array의 static 메소드 중 하나인 from()에 대하여 알아보겠습니다.

# 자바스크립트 Array 메소드 from()은?

from()은 배열에 사용하는 메소드로 대상이 되는 값을 배열로 변환해주는 매우 유용한 메소드입니다. 특히 반환할 배열의 값을 MapFunction을 사용해 순회할 수 있기 때문에 다양한 형태로 자주 사용되는 유용한 메소드라 할 수 있습니다. 우선 간단한 문법은 아래와 같습니다.

Array.from(Object, MapFunction, thisArg)

Static 메소드로 new 키워드는 사용하지 않습니다. 그리고 from()에 사용 가능한 파라미터 값은 아래와 같이 세 가지 입니다.

Object // <Required> 변환의 대상으로 array-like 사용 가능
MapFunction // <Optional> 배열로 변환할 때 사용 가능한 Map 함수
thisArg // <Optional> 맵 함수에 사용될 this 인자를 선택

이제 아래에서는 from()을 사용하여 간단한 활용 예제를 만들어 보려고 합니다. 아래 예제처럼 다양한 값들을 얻을 수 있습니다.

! 자바스크립트 Array 메소드 from() 예제보기

가장 먼저 문자열(array-like)을 사용하여 배열 값을 얻을 수 있는 예제입니다.

@ 문자열에서 배열값 얻기

const text = 'webisfree'
Array.from(text)

// Result
['w', 'e', 'b', 'i', 's', 'f', 'r', 'e', 'e']

문자열을 여러 개의 값을 가지는 배열로 변환한 예제입니다. 결과를 보니 split()을 사용해도 동일하게 구현할 수 있어보입니다.

text.split('')

// Result
['w', 'e', 'b', 'i', 's', 'f', 'r', 'e', 'e']

다음 예제는 여러 개의 배열 값을 만들기 위한 방법으로 원하는 길이의 배열을 만들때 사용 가능합니다. 만약 모두 null값을 10개 가지는 배열을 만드는 경우 아래와 같이 사용 가능합니다.

Array.from({ length: 10 }).fill(null)

// Result
Array.from({ length: 10 }).fill(null)

이처럼 배열에 length를 사용하는 경우는 array-like에서 많이 쓰입니다. 배열의 값 역시 length 프로퍼티를 가지기 때문에 이를 이용하는 코드 구현 방식입니다.

마지막 예제로 연속된 값을 가지는 방법으로도 사용할 수 있습니다. 사실 이 경우가 from()을 사용한 가장 유용한 방법이라 하겠습니다. 이번에는 mapFunction을 사용합니다.

@ 제곱값 구하기
특정 값의 제곱값을 가지는 배열을 얻기 위해서 아래와 같이 사용할 수 있습니다.

Array.from([1, 2, 3], n => n * n)

// Result
[1, 4, 9]

인자로 mapFunction을 사용할 수 있지만 .map()을 사용해도 동일한 결과를 동일합니다.

Array.from([1, 2, 3]).map(n => n * n)

// Result
[1, 4, 9]

@ 1부터 10까지 값을 가지는 배열 만들기
많이 사용되는 예제입니다. from()을 사용해서도 동일하게 구현할 수 있습니다.

Array.from({ length: 10 }, (_, i) => ++i)

여기까지 Javascript 배열 Array 메소드 중 하나인 from()에 대하여 간략하게 알아보았습니다.