🙆🏻‍♀️ [JS] for ...in & for ...of 🙆🏻‍♀️

ES6에 추가된 for ...in 과 for ...of!
헌데 쓸 때 마다 헷갈려서 아예 블로그에 남기고자 한다.

for ...in

for ...in문은 객체의 열거 가능한 속성들을 반복할 수 있도록 해준다.

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

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

const arr = ['a', 'b', 'c'];

for (let item in arr) { 
  console.log(item, arr[item]); // 0 a, 1 b, 2 c
} 

자바스크립트에서 배열도 객체이기 때문에 for ...in 사용이 가능하다.
하지만 for ...in문은 순서를 보장하지 않기 때문에 배열의 반복시에는 다음에 나올 for ...of문을 사용하는 것이 좋다.

for ...of

for ...of문은 반복 가능한 객체(iterable)을 반복할 수 있도록 해준다.
배열, Map, Set, String, arguments 객체 등이 해당된다.
실제로 나는 Map을 사용하여 서버 정보를 저장하고 반복할 때, for ...of를 사용했다.

arguments를 최근에 알게 됐다. (머쓱 머쓱...ㅠㅠ)
매개변수들의 배열 형태의 객체이다.
하지만 실제 배열이 아니기 때문에 배열의 메서드를 사용하고 싶다면, Rest Parameters를 사용해야 한다.

const arr = ["a", "b", "c"];

for (let item of arr) {
  console.log(item); // a, b, c
}

반복 가능한 객체이기 때문에 일반적인 객체에서는 사용할 수 없다.

for ...in은 객체의 속성을 확인할 때, for ...of는 반복 가능한 객체(쉽게 배열)를 반복할 때 사용한다고 알아두자.

for ...in - JavaScript | MDN
for ...of - JavaScript | MDN