[JS] for 반복문: for..in 과 for..of의 차이

 

udemy에서 리액트 강의를 들으면서 미니 프로젝트를 만드는 중에 위 같은 오류가 발생했다

ExpenseChart 컴포넌트에 무슨 문제가 있다고 하는 거 같은데 전혀 모르겠어서 결국 강의를 켰고

for문을 사용하는 데 문제가 있다는 걸 알게 되었다

 

//ExpensesChart.js

import Chart from "../Chart/Chart";

function ExpensesChart(props) {
  const chartDataPoints = [
    { label: "Jan", value: 0 },
    { label: "Feb", value: 0 },
    { label: "Mar", value: 0 },
    { label: "Apr", value: 0 },
    { label: "May", value: 0 },
    { label: "Jun", value: 0 },
    { label: "Jul", value: 0 },
    { label: "Aug", value: 0 },
    { label: "Sep", value: 0 },
    { label: "Oct", value: 0 },
    { label: "Nov", value: 0 },
    { label: "Dec", value: 0 },
  ];

  for (const expense in props.expenses) {
    const expenseMonth = expense.date.getMonth(); //starting at 0 => January => 0
    chartDataPoints[expenseMonth].value += expense.amount;
  }
  return <Chart dataPoints={chartDataPoints} />;
}

export default ExpensesChart;

위 코드는 문제를 일으킨 ExpensesChart 컴포넌트인데 강사님 말로는 여기서 for..in이 아니고 for..of 문을 써야한다고 했다

근데 나는 이 둘의 차이점을 전혀 모르고 있었고... 여러 자료들을 찾아 보았다

 

 

 

간단하게 결론부터 말하면 

for..in 은 객체의 반복에 사용하면 되고
for..of 는 배열의 반복에 사용하면 된다

 

 

물론 for..in을 배열의 반복에 사용할 수 있지만 for of를 사용했을 때와 결과가 다르다는 것을 알 수 있다

array = [하나, 둘 , 셋]

for(const key in array){
  console.log(key)
}

//0, 1, 2

array = [하나, 둘 , 셋]

for(const value in array){
  console.log(value)
}

//하나, 둘, 셋

for in은 객체의 key 또는 index 값이 필요할 때 사용하고 for of는 배열의 값이 필요할 때 사용해야 한다

 

 

그리고 내가 자주 참고하는 '모던 자바스크립트 튜토리얼'의 배열 - 반복문 파트를 보면 이런 말이 있다

그런데 for..in은 다음과 같은 특징을 지니기 때문에 배열에 for..in을 사용하면 문제가 발생하므로 되도록 다른 반복문을 사용하시길 바랍니다.

1. for..in 반복문은 모든 프로퍼티를 대상으로 순회합니다. 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함됩니다.
2. 브라우저나 기타 호스트 환경에서 쓰이는 객체 중, 배열과 유사한 형태를 보이는 ‘유사 배열(array-like)’ 객체가 있습니다. 유사 배열 객체엔 배열처럼 length 프로퍼티도 있고 요소마다 인덱스도 붙어 있죠. 그런데 여기에 더하여 유사 배열 객체엔 배열과는 달리 키가 숫자형이 아닌 프로퍼티와 메서드가 있을 수 있습니다. 유사 배열 객체와 for..in을 함께 사용하면 이 모든 것을 대상으로 순회가 이뤄집니다. 따라서 ‘필요 없는’ 프로퍼티들이 문제를 일으킬 가능성이 생깁니다.
3. for..in 반복문은 배열이 아니라 객체와 함께 사용할 때 최적화되어 있어서 배열에 사용하면 객체에 사용하는 것 대비 10~100배 정도 느립니다. for..in 반복문의 속도가 대체로 빠른 편이기 때문에 병목 지점에서만 문제가 되긴 합니다만, for..in 반복문을 사용할 땐 이런 차이를 알고 적절한 곳에 사용하시길 바랍니다.

그러니 배열엔 되도록 for..in를 쓰지 마세요.

 

앞으로 배열엔 for..of를 쓰겠습니다

 

https://ko.javascript.info/array

배열