for in문과 for of문의 차이(사용 목적과 안전함)

프로그래머스에서 문제를 풀면서
배열에서는 for in문이 for of문의 역할을 그대로 해줄 수 있는데
왜 두가지로 구분되어 있는지 궁금했다.

먼저 두가지의 정의는 아래와 같다.

for in문 : 객체의 속성(key)을 반복하며 순회할때 사용하는 문법.

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

for (let prop in obj) {
  console.log(prop); // a, b, c
}

여기서 말하는 객체는 정말 {} <---이 객체를 말한다.
물론 for in 문은 모든 속성의 객체에 사용할 수 있지만, 예를 들어 배열의 경우 for in 문을 사용해버리면 배열의
요소 뿐만 아니라 length, indexOf, push, pop, forEach 과 같은 메소드들도 모두 가져오게 된다고 한다. 따라서 hasOwnProperty()를 추가로 사용해서 배열의 요소인지 확인해줘야 한다.

따라서, for in문은 객체에만 사용하고 나머지 반복 가능한 객체(string, array, map 등)에는 객체의 값 만을
순회하는 for of 문을 따로 사용해주면서 사용 목적에 따른 구분을 해주고, 또 에러를 방지 할 수 있다.

for of문 : 반복 가능한(interable)한 객체의 값(value)를 반복하며 순회할때 사용하는 문법.

const obj = [1,2,3];

for (let prop of obj) {
  console.log(prop); // 1, 2, 3
}

결론 :

• 객체의 key를 반복 순회 하려면 for in 문!
• String, Array 같은 반복 가능한 객체의 value를 반복 순회 하려면 for of 문!

빡통식 정리 :

• { } <--중괄호 있으면 for in 문 사용! (for of문은 아예 사용이 불가)
• 문자열, 배열의 요소를 반복하고 싶다 -> for of 문 사용!