Javascript의 for...in vs for...of 문 이해

개요

차이점

정의

구문

언제 for...in 또는 for...of를 사용해야 합니까?

예시

추가 자료

차이점

1. 정의

...에 대한:

for...in 루프 문은 Symbol 유형의 키를 제외하고 상속된 열거 가능한 속성을 포함하여 객체의 열거 가능한 속성을 임의의 순서로 반복합니다.Enumerable properties는 내부enumerable 플래그가 true로 설정된 속성입니다.
다음 속성 a,b,c는 기본적으로 열거 가능합니다.

const obj1 = {a:1, b:2};
obj1.c = 3;

기본적으로 Object.defineProperty를 사용하여 정의된 속성은 열거할 수 없습니다.

const obj2 = {};
Object.defineProperty(obj2, 'a', {
  value: 42
});

...의:

for...of 루프 문은 iterable 객체가 Array , String 와 같이 반복되도록 정의한 값을 반복합니다. 등.Array 및 Map와 같은 일부 기본 제공 유형에는 기본 반복 동작이 있지만 Object에는 없습니다.

2. 구문

...에 대한:

for (variable in object) {
  statement
}

...의:

for (variable in iterable) {
  statement
}

3. 언제 for...in 또는 for...of를 사용해야 합니까?

...에 대한:

for...in는 개체의 속성을 반복하여 키와 해당 값을 확인하려는 시나리오에서 사용할 수 있습니다.

for...in 루프 문은 개체의 열거 가능한 속성을 임의의 순서로 반복하므로 인덱스 순서가 중요한 배열에는 for..in를 사용하지 않는 것이 좋습니다. for...in가 특정 순서로 인덱스를 반환한다는 보장이 없기 때문입니다.

배열의 값을 반복하려면 숫자 인덱스(for , Array.prototype.forEach 와 함께 for...of 를 사용하는 것이 좋습니다.

...의:

반복 가능한 객체를 반복하는 데 사용됩니다.

for...of 는 String , Array , TypedArray , Map , Set , 함수의 인수 객체, DOM Collection , generators , 기타 반복 가능한 객체에 대해 반복될 수 있습니다.

2. 예시

추가 자료:

다음은 심층 탐색을 위한 리소스 목록입니다.


S.No
링크


1
for...in [MDN Docs]

2
for...of [MDN Docs]

삼
What is the difference between ( for… in ) and ( for… of ) statements? [Stackoverflow]