[Javascript] for ... in, for ... of 차이 비교

for ... in / for ... of는 ES6에서 추가된 문법이다.

자주 헷갈려서 정리하고자 한다.

 

둘의 공통점은 반복문으로 사용된다는 것이며

차이점은 for ... in은 객체를 순환할 때, for ... of는 배열을 순환할 때 사용된다는 것이다.

 

for ... in - 객체 순환

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

for (const item in obj) {
  console.log(item) // a, b, c
}

위의 예시처럼 for ... in을 사용하면 객체의 프로퍼티를 순환할 수 있다.

 

만약 for ... in을 사용하여 배열을 순환하려고하면 어떻게 될까?

const arr = [1, 2, 3];

for (const item in arr) {
  console.log(item) // 0, 1, 2
}

JS에서는 배열도 객체로 취급하므로 순환할 수 있다. 객체의 프로퍼티를 순환하므로 값이 아닌 index 값이 나오게 된다.

 

for ... of - 배열 순환

const arr = [1, 2, 3];

for (const item of arr) {
  console.log(item); // 1, 2, 3
}

for ... of를 사용하면 배열을 순환할 수 있다.

 

만약 for ... of를 사용해서 객체를 순환하려고 하면 어떻게 될까?

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

for (const item of obj) {
  console.log(item) // Uncaught TypeError: obj is not iterable
}

순환할 수 없다는 메세지를 내뱉으며 에러가 발생한다.

 

---

이렇게 정리하더라도 사실 헷갈리기는 한다. 쉽게 외우려면 for ... in 에서 배열을 순회하면 값이 아닌 index(객체의 프로퍼티)를 순환한다. 이렇게 외우면 조금 더 쉽게(?) 외울 수 있을 것 같다.

 

 

사실 위의 설명은 단순히 직관적으로만 for ... in, for ... of를 설명한 것입니다.

조금 더 근본적인 차이를 가지고 있는데 추후에 포스팅하도록 하겠습니다.

 

읽어주셔서 감사합니다.