[JavaScript] for in, for of 반복문 차이

1. for ...in 문

• 객체의 열거 가능한 속성(프로퍼티)에 대해 순회(반복)
• 객체의 key 값에 접근 가능, value 값에는 직접 접근 불가능
• 모든 객체에서 사용 가능

 for ...in 문은 객체의 열거 가능한 속성(프로퍼티)에 대해 반복합니다. 열거 가능하다는 것은 enumerable 속성을 가지고 있다는 것을 의미합니다. keys는 열거 가능한 속성이고, valueOf는 열거 불가능한 속성이기 때문에 객체의 key 값에는 접근할 수 있지만, value 값에는 직접 접근할 수 없습니다. key값을 이용해 간접적으로 접근하는 것은 가능합니다. 예를 들어, 객체의 속성을 출력하거나 속성에 대한 작업을 수행할 때, for ...in 문을 사용할 수 있습니다.

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

for (let prop in obj) {
  console.log(prop); // 출력: "a", "b", "c"
  console.log(obj[prop]); // 출력: 1, 2, 3
}

 

1-2. for ...in 문 사용 시 주의점

• 순서가 보장되지 않습니다.
• 프로토타입으로 상속받은 속성까지 열거합니다.
• length 연산자를 사용할 수 없습니다.
• value 값이 string이라 연산이 불가능합니다.

 이처럼 for in 문은 주의점이 많기 때문에 가급적 사용을 지양하는 것이 좋습니다.

 

 

 

2. for ...of 문

• 반복 가능한, iterable 속성이 있는 객체를 순회(반복)
• 배열, 문자열, Map, Set 등이 해당됨, Object(객체)는 해당 X)

※ for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for ...of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다. (직접 명시 가능).

 

 for ...of 문은 iterable 객체(배열, 문자열, Set, Map 등)의 각 요소에 대해 반복합니다. for ...in 문과 달리, for ...of 문은 [Symbol.iterator] 속성을 가지는 것들만 대상으로 하기 때문에 객체에서 for of 문을 사용하면 TypeError를 반환합니다. 예를 들어, 배열의 요소를 순회하거나 문자열의 각 문자에 작업을 수행할 때 for ...of 문을 사용할 수 있습니다.

 

const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value); // 출력: 1, 2, 3
}

const str = "Hello";

for (let char of str) {
  console.log(char); // 출력: "H", "e", "l", "l", "o"
}

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

for (let prop in obj) {
  console.log(prop); // TypeError: object is not iterable 
}

 

 

 

3. for... in 문 vs for ...of 문

	for ... in	for ... of
대상	iterable한 모든 object	[Symbol.iterable] 속성을 가지는 collection ex) 배열, Map, Set, String, arguments 등
리턴	프로퍼티, key(배열의 경우 index)	value