for in & for of 문은 어떤 것이고, 둘의 차이는 무엇일까?

for...of

for...of 명령문은 반복가능한 객체에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다 - mdn

이렇게 정의를 봤을 때는 이게 한국말이 맞나 싶을 정도로 이해가 되지 않는다.
그렇다면 예시를 한번 들어서 이해해보자

 for (const variable of iterable) {
      statement
    }
    
//variable(변화를 줄 수 있는) : 각 반복에 서로 다른 속성값이 variable에 할당된다
//iterable(반복될 수 있는) : 반복되고 열거가능(enumerable)한 속성이 있는 객체

for...of 문의 기본 형태는 이렇다.

배열 형태에서 아래와 같이 주로 사용 되는데

let iterable = [10,20,30]

for(let value of iterable) {
	console.log(value)
}
//10
//20
//30

Array 형태 외에도 String, Map, TypeArray 등 반복 가능한 객체에서는 다 사용 가능하다

 

for...in

for...in 문은 상속된 열거가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다.(Symbol로 키가 지정된 속성은 무시합니다) - mdn

이 또한 예시를 통해 이해해보자

for (const variable in object) {
	statement
}

//variable : 매번 반복마다 다른 속성이름이 변수로 지정됨
//object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체

for in은 주로 객체형태에서 사용된다

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

for(const prop in obj) {
	console.log(`obj.${prop} = ${obj[prop]}`)
}

// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

* for in은 객체의 반복을 위해 만들어 졌지만 배열의 반복을 위해서는 추천되지 않는다. 
배열에는 for...of 나 Array.prototype.forEach()를 사용하면 된다.

for...of 와 for...in의 차이

for...in

- lterable object면 모두 사용 가능

- 객체의 모든 열거가능한 속성에 대해 반복

- key를 리턴(배열의 경우에는 index)

for...of

- [Symbol.lterator] 속성을 가지는 collection만 대상으로 함

- value를 리턴

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}