for in vs for of

for …in 반복문

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있으며 모든 객체에서 사용이 가능하다.
자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있다.
그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있다.
이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않는다.
키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 사용할 수 있다.

for(variable in object) { ... }
variable : 매번 반복마다 다른 속성이름이 변수(variable)로 지정
object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체

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

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

여기서 만약 for of를 쓰게 된다면 어떤 결과가 나올까?

보는 바와 같이 TypeError로 나온다.

이로 인하여 for in 반복문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하지 않음을 알 수 있다.

for …in의 사용

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

속성의 삭제, 추가, 수정

for..in 문은 임의의 순서로 객체의 속성들에 대해 반복합니다.
만약 한 반복으로 속성이 수정된 후에 방문하는 경우, 반복문에서의 그 값은 나중의 값으로 정해집니다. 방문하기 전에 삭제된 속성에 대해서는 이후에 방문하지 않습니다. 반복이 발생하는 객체에 추가된 속성은 방문하거나 반복에서 생략할 수 있습니다.

일반적으로 현재 방문 중인 속성 외에는 반복하는 동안 객체의 속성을 추가, 수정, 제거하지 않는 것이 가장 좋습니다. 추가된 속성을 방문할 것인지, 수정된 속성(현재의 속성 제외)을 수정 이전 혹은 이후에 방문할 것인지, 삭제된 속성을 삭제 이전에 방문할 것인지에 대해서는 보장할 수 없습니다.

for …of 반복문

for of 반복문은 반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

for (variable of iterable) {
statement
}
variable : 각 반복에 서로 다른 속성값
iterable : 반복되는 열거가능한 속성이 있는 객체

Array에 대해 반복 :

let iterable = [10, 20, 30];

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

String에 대해 반복 :

let iterable = "apple";

for (let value of iterable) {
  console.log(value); // "a", "p", "p", "l", "e"
}

TypedArray에 대해 반복:

let iterable = new intArray([0x00, 0xaa]);

for (let value of iterable) {
  console.log(value); // 0, 170
}

Map에 대해 반복 :

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry); // [a, 1], [b, 2], [c, 3]
}

for (let [key, value] of iterable) {
  console.log(value); // 1, 2, 3
}

Set에 대해 반복 :

let iterable = new Set([1, 1, 2, 2, 3, 3]);

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

for in 반복문과 for of 반복문의 차이점

for in 반복문

객체의 순환하는데 사용한다.
객체에 대해서 for in을 사용하면 객체의 프로퍼티를 확인할 수 있다.

for of 반복문

반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복한다.
순서가 중요한 경우 for of를 사용해야 한다.

var iterable = [3, 5, 7];

for (var key in iterable) {
  console.log(key); // 0, 1, 2
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}