JavaScript 이터러블과 유사 배열 객체 변환: Spread Syntax vs. Array.from

Sat, 09 May 2026 13:28:43 +0000

배경

ES6 이후 이터러블(iterable)이나 유사 배열 객체(array-like object)를 실제 배열로 변환하는 상황은 매우 흔합니다. 대표적으로 [...iterable](전개 구문, Spread Syntax)과 Array.from() 메서드를 사용합니다. 두 방식은 대부분의 경우 동일하게 동작하는 것처럼 보이지만, 동작 원리와 지원 범위에 명확한 차이가 있어 상황에 맞게 선택해야 합니다.

핵심 차이점

두 방식의 가장 큰 차이는 변환할 수 있는 소스 객체의 타입입니다.

전개 구문 ([...iterable]) 오직 이터러블 프로토콜을 따르는, 즉 Symbol.iterator 속성을 가진 객체에만 사용할 수 있습니다. NodeList가 이터러블인 최신 브라우저 환경에서는 문제없이 동작하지만, 그렇지 않은 환경에서는 TypeError가 발생합니다.

Nodelist on HandsLog

JavaScript 이터러블과 유사 배열 객체 변환: Spread Syntax vs. Array.from

배경

핵심 차이점