Array.from은 JavaScript의 Array 생성용 정적 메서드로, 배열 비슷한 객체(array-like)나 반복 가능한(iterable) 객체를 실제 배열(Array)로 변환합니다. ES6(ES2015)에 도입되었습니다. 기본 형태 Array.from(arrayLike[, mapFn[, thisArg]]) 주요 동작 - arrayLike: 길이(length) 속성이 있는 객체(예: arguments, {length: 3} 같은 객체) 또는 이터러블(예: 문자열, Set, Map, NodeList 등)을 받습니다. - 반환값: 새로운 Array 인스턴스. 원본과는 별개의 얕은 복사(shallow copy)를 만듭니다. - 선택적 mapFn: 각 요소에 대해 호출되는 함수(첫번째 인수는 요소값, 두번째 인수는 인덱스). 이 함수가 있으면 변환된 요소들로 새 배열을 만듭니다. - 선택적 thisArg: mapFn 내부에서 사용할 this 값을 지정합니다. - 입력이 null 또는 undefined이면 TypeError가 발생합니다. mapFn이 함수가 아니면 TypeError가 발생합니다. 실용 예 - 문자열을 문자 배열로: Array.from('hello') // ['h','e','l','l','o'] - Set을 배열로 변환: Array.from(new Set([1,2,2,3])) // [1,2,3] - NodeList -> 배열(예: document.querySelectorAll 결과): Array.from(document.querySelectorAll('div')).map(el => el.textContent) - mapFn 사용: Array.from([1,2,3], x => x * 2) // [2,4,6] - 길이 속성만 있는 객체로 배열 생성: Array.from({ length: 5 }, (_, i) => i) // [0,1,2,3,4] 비교: 스프레드 연산자(...)와의 차이 - 스프레드는 이터러블에만 동작합니다. Array.from은 이터러블뿐 아니라 length가 있는 비동글 이터러블(예: arguments, {length: n})도 처리합니다. - Array.from은 바로 map 함수를 인수로 받아 한 단계 내에서 매핑을 수행할 수 있습니다. 요약 Array.from은 다양한 형태의 배열 비슷한 데이터(문자열, NodeList, arguments, Set 등)를 실제 배열로 변환하고 선택적으로 각 요소를 즉시 변환할 수 있게 해주는 유용한 ES6 표준 메서드입니다.
