[JS] for ...of와 for ...in의 차이점

반복을 하는 for문

for문은 반복문이라는 것은 모두 다 알고 있으리라 믿는다. 아시다시피 for문은 이런식으로 사용할 수가 있겠다.

for 반복문

const onea = "onea";

for (let i = 0; i < onea.length; i++) {
  console.log(onea[i]);
}

// 결과

// "o"
// "n"
// "e"
// "a"

사실 이 for문 하나로도 충분할 수 있겠다. 그러나 좀 더 우아하게 할 수 있는 게 없을지 생각해본다.

그래 있다! 그것은 for ...of와 for ...in문이다.

for of와 for in

for ... of

const 오브의반복 = "forof";

for (let i of 오브의반복) {
  console.log(i);
}

// 결과

// "f"
// "o"
// "r"
// "o"
// "f"

for ... in

const 인의반복 = "forin";

for (let i in 인의반복) {
  console.log(i);
}

// 결과

// "0"
// "1"
// "2"
// "3"
// "4"

그런데 심상치 않은 결과가 나왔다. 똑같이 글자를 하나씩 뱉어줄 줄 알았는데, for...of문은 잘 나온 반면 for...in문은 이상한 게 나와버렸다.
왜일까...
문자열을 변수로 하지 말고 해당 반복문 2개를 알맞게 쓰기 위해 이렇게 다시 예시를 들어보자.

for ... of의 쓰임

const 오브는배열 = ["오브", "는", "배열"];

for (let i of 오브는배열) {
  console.log(i);
}

// 결과

// "오브"
// "는"
// "배열"

for ... in의 쓰임

const 인은객체 = {
  원: "인",
  투: "은",
  쓰리: "객체",
};

for (let i in 인은객체) {
  console.log(i);
}

// 결과

// "원"
// "투"
// "쓰리"

const 인은객체 = {
  원: "인",
  투: "은",
  쓰리: "객체",
};

for (let i in 인은객체) {
  console.log(인은객체[i]);
}

// 결과

// "인"
// "은"
// "객체"

그러하다. for ...in은 객체의 key값과 value값을 받을 수 있기 때문에 앞서 보여줬던 문자열을 변수로한 예시에서 해당 글자 하나하나가 아닌 그 글자들의 순서 "0", "1", "2", "3", "4"가 반환된 것이다.
이렇듯 for ...in문에서는 배열을 사용하는 것이 적절한 방법이 아니라고 할 수 있겠다.

왜냐면 아래와 같은 상황을 초래할 수 있기 때문이다.

for ...of와 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의 경우 원치 않은 것들을 모조리 뽑을 수 있기 때문이다.