자바스크립트 for in, for of 차이점

자바스크립트에서 for...in과 for...of는 모두 반복문(loop)을 위해 사용되는 구문입니다. 이들은 컬렉션의 요소를 순회하기 위해 사용되지만, 사용되는 컬렉션의 종류와 반복되는 방식에서 차이가 있습니다.

 

for in 반복문

for in 반복문은 객체의 모든 열거 가능한(enumerable) 속성에 대해 반복하고자 할 때 사용됩니다. 이 구문은 객체의 키(key)를 순회하는 데 주로 사용됩니다.

 

const person = { name: 'John', age: 30 };

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

 

이 코드는 person 객체의 모든 속성을 순회하고, 각 속성의 키와 값을 출력합니다.

 

 

for of 반복문

for of 반복문은 [Symbol.iterator] 속성을 가진 모든 컬렉션에 대해 반복하고자 할 때 사용됩니다. 이 구문은 배열, 문자열, Map, Set 등 iterable 객체의 요소를 순회하는 데 사용됩니다.

 

const array = [10, 20, 30];

for (let value of array) {
  console.log(value);
}

 

 

for in과 for of의 차이점

for in 반복문은 객체의 모든 열거 가능한 속성을 순회합니다. 배열에서 사용할 경우, 배열의 인덱스를 순회합니다. 배열에 추가적인 속성을 추가한 경우, 이 속성들도 순회 대상이 됩니다.

 

const array = [10, 20, 30];
array.myProperty = 'Hello';

for (const index in array) {
  console.log(index); // "0", "1", "2", "myProperty"
}

 

이 코드에서 for in은 배열의 각 요소의 인덱스와 배열에 추가된 myProperty 속성을 순회합니다. 배열의 각 요소의 값이 아닌, 배열의 속성에 해당하는 인덱스를 순회한다는 점에 주목해야 합니다.

 

 

for of 반복문은 반복 가능한 객체(예: 배열, 문자열, Map, Set 등)의 값을 순회합니다. 배열의 경우, for of는 배열의 요소 값을 직접 순회합니다.

 

const array = [10, 20, 30];
array.myProperty = 'Hello';

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

 

이 코드에서 for of는 배열의 요소 값(10, 20, 30)만을 출력하고, 배열에 추가적으로 정의된 myProperty 속성은 순회하지 않습니다.

 

for in은 객체 프로퍼티와 그 값으로 작업해야 할 때 유용하며, for of는 배열, 문자열, Set 또는 Map과 같은 이터러블의 값을 반복하는 데 유용합니다.

 

 

출처

• for...of / mdn web docs
• Difference between ( for... in ) and ( for... of ) statements? / stack overflow
• The Difference Between (for…in) and (for…of) in JavaScript / Medium