for...of 명령문반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

구문

for (variable of iterable) {
  statement
}
variable
각 반복에 서로 다른 속성값이 variable에 할당됩니다.
iterable
반복되는 열거가능(enumerable)한 속성이 있는 객체.

예제

Array에 대해 반복:

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

let 대신 const도 사용할 수 있습니다, 블록 내부 변수를 수정하지 않는 경우.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

String에 대해 반복:

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

TypedArray에 대해 반복:

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

Map에 대해 반복:

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
// 3

Set에 대해 반복:

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

DOM 컬렉션에 대해 반복

NodeList 같은 DOM 컬렉션에 대해 반복: 다음 예는 article의 직계 자손인 paragraph에 read 클래스를 추가합니다:

// 주의: 이는 NodeList.prototype[Symbol.iterator]가
// 구현된 플랫폼에서만 작동합니다
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

생성기에 대해 반복

생성기에 대해서도 반복할 수 있습니다:

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 프로토콜을 명시해서 구현하는 객체에 대해서도 반복할 수 있습니다:

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
// 2

for...offor...in의 차이

for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다.

for...of 구문은 컬렉션 전용입니다, 모든 객체보다는. [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.

다음 예는 for...of 루프와 for...in 루프의 차이를 보입니다.

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
}

명세

명세 상태 설명
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Standard 초기 정의.
ECMAScript Latest Draft (ECMA-262)
The definition of 'for...of statement' in that specification.
Draft  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
for...ofChrome Full support 38Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes Prior to Firefox 51, using the for...of loop construct with the const keyword threw a SyntaxError ("missing = in const declaration").
IE No support NoOpera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Prior to Firefox 51, using the for...of loop construct with the const keyword threw a SyntaxError ("missing = in const declaration").
Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support Yes
async iteratorsChrome Full support 63Edge ? Firefox Full support 57IE No support NoOpera Full support 50Safari ? WebView Android Full support 63Chrome Android Full support 63Edge Mobile ? Firefox Android Full support 57Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support Yesnodejs ?
Closing iteratorsChrome Full support 51Edge Full support YesFirefox Full support 53IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 53Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, Netaras, ligeek
최종 변경자: alattalatta,