JavaScript for..in 과 for..of (iteration 문법)

JavaScript Iteration 문법

Iteration 문법이란? 반복문법을 의미합니다.

오늘은 JavaScript의 대표적인 반복문인 for..in과 for.. of의 차이점에 특징에 관해서 설명해 볼게요!

---

for...in

for...in은 열거 가능한 속성(key)을 순회하는 데 사용됩니다.

배열(Array)에도 순회하는데 사용이 가능합니다.

또한 객체(Object)의 속성에 접근할 때에도 사용됩니다.

 

그리고

 

for...in은 객체나 배열의 모든 열거 가능한 속성 이름을 반복합니다.

배열(Array)인 경우에는 인덱스(index)를 순회합니다. - 숫자형(key)을 순회

 

예시)

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key);  // "a", "b", "c"
}

실행 결과

배열로 사용했을 때의 예시)

const arr = [10, 20, 30];
for (let index in arr) {
  console.log(index);  // "0", "1", "2" (인덱스를 출력)
}

실행 결과 - 배열

for... in을 사용할 때 주의할 점

• for... in은 배열을 순회할때 index 를 출력합니다.
• 배열의 요소 값을 순회하려면, 해당 index를 사용하여 접근해야 합니다.
• 배열(Array)에서는 for ... in 보다는 for ... of 가 더 적절합니다.

---

for... of

for... of는 배열(Array), 문자열(String), Map, Set 등 반복 가능한 객체의 요소들을 순회하는 데 사용됩니다.

배열의 값을 순회하는데 가장 최적화되어있어요.

 

for...in과는 다르게 반복 가능한 객체의 값(value)을 순회합니다!

 

예시)

const arr = [10, 20, 30];
for (let value of arr) {
  console.log(value);  // "10", "20", "30"
}

실행 결과

 

문자열(String) 예시

const str = "Hello";
for (let char of str) {
  console.log(char);  // "H", "e", "l", "l", "o"
}

실행 결과 - 문자열(String)

for... of를 사용할 때 주의할 점

• for... of는 배열의 값에 바로 접근이 가능합니다.
• 배열(Array)을 다룰 때 주로 사용합니다.
• 객체는(Object)는 기본적으로 iterable(반복이 가능) 하지 않습니다.
• 객체에는 for... of를 사용할 수 없어요!
• 대신 배열(Array), Map, Set 같은 반복 가능한 자료 구조에서 사용됩니다.

---

정리

for...in

객체의 속성(key)을 순회할 때 주로 사용합니다. 배열(Array)을 사용할 경우 index를 순회합니다.

 

for... of

배열(Array), 문자열(String), Map, Set 등의 값을 순회할 때 사용합니다.