for... in 과 for...of의 차이

배열과 객체를 배우다 보니 for in과 for of의 정확한 차이에 대하여 알고 싶어졌다. 정리하고 넘어가자!

for... in 
for...of

둘다 반복문으로 사용된다. 하지만 차이점은 하나는 객체를 탐색하고 하나는 배열 요소를 탐색한다는 점이다.

for...in(객체 순환)

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

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

위 예시와 같이 객체의 형식일때 주로 쓴다. 만약 객체가 아닌 배열에 사용하면 어떻게 될까?

var arr = [1, 2, 3];

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

JavaScript에선 배열도 Object 타입으로 인식하기 때문에 결과가 나오긴 나온다.
다만 일치하는 값은 아니고 해당 배열의 index가 출력되는 걸 확인할 수 있었다.

for...of(배열 순환)

var arr = [1, 2, 3];

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

for...of 는 배열을 순환할 때 사용된다.
배열이 아닌 객체에 사용한다면 위와 마찬가지로 출력이 되는지 확인해보자.

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

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

에러가 뜨게 된다. ()
따라서 객체와 배열을 구분해서 맞춤으로 써주는것이 좋지만 선호도의 차이가 있을 수 있다고 한다.

왜냐하면 객체에서 for...of 문을 쓰는것은 오류가 나지 않기 때문에 for in을 쓸 경우 배열이나 객체의 순서를 보장해 주지 않는 단점이 싫다면 for of를 쓰기도 한다!

그렇다면 for of를 객체에서는 어떤식으로 써야 하느냐

객체에서 for...of를 사용하여 순환하는 법

var obj = {
  a: 1,
  b: 2,
  c: 3
};
const ofObj = Object.keys(obj)//obj의 key값을 불러와서 배열처럼 사용

for (var item of ofObj) {
  console.log(item) // a, b, c
}

위 예제를 보면 변수 ofObj 안에 객체의 key 값을 넣어 배열처럼 불러와 사용할 수 있다. 이런식으로 key값이 들어간 변수만 만들어서 적용 시킨다면 for...of도 객체에서 사용할 수 있다.