for...of
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
for...of 명령문은반복가능한 객체 (Array,Map,Set,String,TypedArray,arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.
시도해 보기
const array1 = ["a", "b", "c"];for (const element of array1) { console.log(element);}// Expected output: "a"// Expected output: "b"// Expected output: "c"구문
예제
Array에 대해 반복
js
let iterable = [10, 20, 30];for (let value of iterable) { console.log(value);}// 10// 20// 30let 대신const도 사용할 수 있습니다, 블록 내부 변수를 수정하지 않는 경우.
js
let iterable = [10, 20, 30];for (const value of iterable) { console.log(value);}// 10// 20// 30String에 대해 반복
js
let iterable = "boo";for (let value of iterable) { console.log(value);}// "b"// "o"// "o"TypedArray에 대해 반복
js
let iterable = new Uint8Array([0x00, 0xff]);for (let value of iterable) { console.log(value);}// 0// 255Map에 대해 반복
js
let iterable = new Map([ ["a", 1], ["b", 2], ["c", 3],]);for (let entry of iterable) { console.log(entry);}// [a, 1]// [b, 2]// [c, 3]for (let [key, value] of iterable) { console.log(value);}// 1// 2// 3Set에 대해 반복
js
let iterable = new Set([1, 1, 2, 2, 3, 3]);for (let value of iterable) { console.log(value);}// 1// 2// 3DOM 컬렉션에 대해 반복
NodeList 같은 DOM 컬렉션에 대해 반복: 다음 예는 article의 직계 자손인 paragraph에read 클래스를 추가합니다:
js
// 주의: 이는 NodeList.prototype[Symbol.iterator]가// 구현된 플랫폼에서만 작동합니다let articleParagraphs = document.querySelectorAll("article > p");for (let paragraph of articleParagraphs) { paragraph.classList.add("read");}생성기에 대해 반복
생성기에 대해서도 반복할 수 있습니다:
js
function* fibonacci() { // 생성기 함수 let [prev, curr] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; }}for (let n of fibonacci()) { console.log(n); // 1000에서 수열을 자름 if (n >= 1000) { break; }}다른 반복가능 객체에 대해 반복
iterable 프로토콜을 명시해서 구현하는 객체에 대해서도 반복할 수 있습니다:
js
var iterable = { [Symbol.iterator]() { return { i: 0, next() { if (this.i < 3) { return { value: this.i++, done: false }; } return { value: undefined, done: true }; }, }; },};for (var value of iterable) { console.log(value);}// 0// 1// 2for...of와for...in의 차이
for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다.
for...of 구문은컬렉션 전용입니다. 모든 객체보다는,[Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.
다음 예는for...of 루프와for...in 루프의 차이를 보입니다.
js
Object.prototype.objCustom = function () {};Array.prototype.arrCustom = function () {};let iterable = [3, 5, 7];iterable.foo = "hello";for (let i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"}for (let i of iterable) { console.log(i); // logs 3, 5, 7}명세서
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-for-in-and-for-of-statements |
브라우저 호환성
같이 보기
- for each...in - 비슷한 문이지만, 속성 이름 자체보다는 객체의 속성값을 반복합니다 (사라짐).
Array.prototype.forEach()- Map.prototype.forEach()