[JS study] for...of _ for...in

for은 우리가 잘 아는 반복문이다. 하지만 종종 객체를 이용할 때 for 반복문 뿐만 아니라 for...of 반복문이나 for...in반복문을 종종 사용한다. 이 둘의 차이점을 비교해보도록 하자.

for...of

let arr = ["Naver", "Kakao", "Line"];
for(let i of arr){
  console.log(i);
}

// "Naver"
// "Kakao"
// "Line"

for...in

let arr = {
  1: "Naver", 
  2: "Kakao",
  3: "Line"
};
for(let i in arr){
  console.log(i);
}

// 1
// 2
// 3

for...in은 우리가 원하는 결과가 제대로 나오지 않는다. 그 이유는 for...in은 key와 value를 받을 수 있기 때문에 우리가 원하는 글자를 하나하나 받는게 아니라 index를 받는다. 따라서 for...in은 배열을 사용하는 것이 적절한 방법은 아니다.

// MDN <for...of와 for...in의 차이>의 내용을 참고하여 작성했다.

Object.prototype.obj = function () {};
Array.prototype.arr = function () {};

const 배열모음 = ["배열", "모음", "변수입니당"];
배열모음.foo = "안녕";

for (let i in 배열모음) {
  console.log(i); // 결과: 0, 1, 2, "foo", "arr", "obj"
}

for (let i of 배열모음) {
  console.log(i); // 결과: "배열", "모음", "변수입니당"
}

for...of의 경우 배열에 들어 있는 요소만 뽑을 수 있지만 for...in의 경우 원치 않은 것들을 모조리 뽑을 수 있기 때문이다.