JavaScript Array.from() 메서드란?
JavaScript의 Array.from() 메서드는 length 속성을 가진 객체나 이터러블(iterable) 객체를 새로운 배열(Array) 객체로 변환해 반환하는 정적 메서드입니다. 문자열, NodeList, Map, Set 같은 유사 배열 객체를 손쉽게 진짜 배열로 만들 수 있어 실무에서 매우 자주 활용됩니다.
문법(Syntax)
Array.from(obj, mapFunction, val)
각 매개변수의 의미는 다음과 같습니다.
- obj – 배열로 변환할 대상 객체 (length 속성을 가진 객체 또는 이터러블 객체)
- mapFunction – (선택 사항) 배열의 각 요소에 대해 호출할 맵 함수
- val – (선택 사항) mapFunction 실행 시 this로 사용할 값
예제 1: 문자열을 배열로 변환하기
가장 기본적인 사용 예로, 문자열의 각 문자를 요소로 하는 배열을 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p id="test"></p>
<script>
var arr1 = Array.from("PQRS");
var arr2 = Array.from("12345");
document.getElementById("test").innerHTML = arr1 +" and "+arr2;
</script>
</body>
출력 결과:
P,Q,R,S and 1,2,3,4,5
위 예제에서 "PQRS"는 각 문자가 개별 요소로 분리되어 ['P', 'Q', 'R', 'S']라는 배열이 되고, "12345" 역시 각 숫자 문자가 요소가 된 ['1', '2', '3', '4', '5'] 배열이 생성됩니다. 주의할 점은 결과 배열의 요소가 숫자가 아닌 문자열이라는 것입니다.
예제 2: 특수 문자를 포함한 문자열 변환
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p id="test"></p>
<script>
var arr1 = Array.from("PQRS");
var arr2 = Array.from("%$%#$$#$");
var arr3 = Array.from("12345");
document.getElementById("test").innerHTML = arr1 +", "+arr2+" and "+arr3;
</script>
</body>
출력 결과:
P,Q,R,S, %,$,%,#,$,$,#,$ and 1,2,3,4,5
특수 문자로 구성된 문자열도 동일하게 한 글자씩 분리되어 배열 요소로 변환됩니다. 즉, Array.from()은 알파벳, 숫자, 특수 문자 등 문자열의 종류와 관계없이 모든 문자를 개별 요소로 처리합니다.
마무리 및 활용 팁
Array.from()은 유사 배열 객체나 이터러블을 배열로 변환할 때 필수적인 메서드입니다. 두 번째 인자인 mapFunction을 함께 사용하면 변환과 동시에 각 요소를 가공할 수도 있습니다. 예를 들어 Array.from("12345", Number)처럼 작성하면 문자열 배열이 아닌 실제 숫자 배열 [1, 2, 3, 4, 5]를 얻을 수 있으니 참고하세요.