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

배경 ES6 이후 이터러블(iterable)이나 유사 배열 객체(array-like object)를 실제 배열로 변환하는 상황은 매우 흔합니다. 대표적으로 [...iterable](전개 구문, Spread Syntax)과 Array.from() 메서드를 사용합니다. 두 방식은 대부분의 경우 동일하게 동작하는 것처럼 보이지만, 동작 원리와 지원 범위에 명확한 차이가 있어 상황에 맞게 선택해야 합니다. 핵심 차이점 두 방식의 가장 큰 차이는 변환할 수 있는 소스 객체의 타입입니다. 전개 구문 ([...iterable]) 오직 이터러블 프로토콜을 따르는, 즉 Symbol.iterator 속성을 가진 객체에만 사용할 수 있습니다. NodeList가 이터러블인 최신 브라우저 환경에서는 문제없이 동작하지만, 그렇지 않은 환경에서는 TypeError가 발생합니다. ...

May 9, 2026

JavaScript Array.prototype.map 개념과 사용법 정리

개념/배경 Array.prototype.map은 배열의 각 요소에 대해 콜백을 호출해 변환된 결과로 새 배열을 만드는 메서드임 원본 배열 불변 유지, 동일 길이의 새 배열 생성이 핵심 특징임 기본 문법 const newArray = array.map((element, index, array) => { return element; }); element 현재 요소 index 현재 인덱스 array 원본 배열 참조 콜백은 요소 수만큼 호출되고, 콜백의 반환값이 새 배열의 같은 위치에 배치됨 사용 예시 숫자 배열 변환 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10] 객체 배열에서 특정 속성 추출 ...

November 15, 2025