1. for in 루프

ES6 이전에는 for in루프를 사용했다.
for in루프는 순서 없이 객체의 모든 열거 가능한 속성을 반복하기 때문에 for of와 살짝 다르다. for in 루프은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않는다. 따라서 반복 중에는 객체의 속성을 추가, 수정, 삭제하지 않는 것이 좋다. 반복 중에 해당 속성을 거칠 것이라는 보장이 없고 수정전이나 수정 후에 거칠 것이라는 보장도 없기 때문이다.

2. for of 루프

2-1) 배열에 대한 반복

보통 배열의 각 원소에 대해 반복하려면 보통 이렇게 구현하는 방식을 사용했다.

이것은 매 반복 시 i가 fruits.length보다 작은 한 i의 값을 1씩 증가시키는 일반적인 루프이다. i가 fruits.length와 같은 값이 되는 시점에서 루프가 중지된다.

for of 루프를 사용하면 위와 동일한 결과를 얻을 수 있다.

2-2) 객체에 대한 반복

객체는 이터러블(iterable)이 아니다. 객체의 키/값 쌍에 대한 반복을 구현하기 위해서는 먼저 Object.keys()를 사용하여 객체의 모든 키를 가져온 후 키에 대해 반복을 수행하면서 값에 접근가능하다.

2. for of와 for in의 차이

간단하게 이 두 개의 차이를 이야기하자면, for in은 배열의 속성 목록을 반환하는 반면, for of는 배열의 원소 목록을 반환하는 것이다. 다음 예시를 보면 더 빠르게 이해 가능하다.

let list = [4, 5, 6];

//for ...in은 키의 목록을 반환한다.
for(let i in list){
    console.log(i); //"0", "1", "2"
}

//for ...of는 값을 반환한다.
for (let i of list){
    console.log(i);//4, 5, 6
}