자바스크립트 for in 문, for of 문

for...in

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)

 

문법

for (variable in object) { ... }

 

variable

    매번 반복마다 다른 속성이름(Value name)이 변수(Variable)로 지정됩니다.

object

    반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

 

for / in  반복문은 열거 가능한 속성에 대해서만 반복한다.

객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복한다. 

for / in 은 특정 순서에 따라 인덱스를 반환하는 것을 보장 할 수 없다.

따라서 방문의 순서가 중요한 배열의 반복시에는 for 반복문, Array.prototype.forEach(), for...of 를 사용하자.

 

for...in 을 사용하는 이유

배열의 반복에는 추천되지 않고, 이 반복의 경우엔 Array.prototype.forEach(), for...of 가 있다.

for / in 은 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용하면 좋다.

 

See the Pen for/in-1 by Kim dong hun (@Kmentor) on CodePen.

 

See the Pen for/in-2 by Kim dong hun (@Kmentor) on CodePen.

 

---

for...of

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

문법

for (variable of object) { ... }

 

variable

    각 반복에 서로 다른 속성값이 variable에 할당.

object

    반복되는 열거가능(enumerable)한 속성이 있는 객체.

 

예제

Array에 대해 반복

See the Pen Array by Kim dong hun (@Kmentor) on CodePen.

String에 대해 반복

 

See the Pen String by Kim dong hun (@Kmentor) on CodePen.

TypedArray에 대해 반복

 

See the Pen TypedArray by Kim dong hun (@Kmentor) on CodePen.

Map에 대해 반복

See the Pen Map by Kim dong hun (@Kmentor) on CodePen.

Set에 대해 반복

See the Pen Set by Kim dong hun (@Kmentor) on CodePen.

생성기에 대해 반복

See the Pen 생성기 by Kim dong hun (@Kmentor) on CodePen.

 

---

 

for...of 와 for...in의 차이

 

See the Pen for/in-for/of by Kim dong hun (@Kmentor) on CodePen.

 

---

 

for...in MDN

for...in - JavaScript | MDN

프로토타입 이해하기