[JavaScript] for...in / for...of 차이

리액트를 공부하다가 for문을 통해 지출 값을 더해서 그래프를 올려야 되는데 작동이 안되서 보니 for문 문제였다. 이때 알게된 JavaScript의 for문에 대해 포스팅 하려고 한다. 

 

먼저 내 React 프로젝트에서 ExpensesChart라는 컴포넌트가 부모 컴포넌트로부터 DUMMY_EXPENSES 배열을 전달받아서 amount 즉 가격을 더한다. 근데 여기서 배열에 담긴 amount값이 더해지지 않는 문제가 생겼다.

// ExpensesChart가 props로 받는 배열
const DUMMY_EXPENSES = [
  {
    id: "e1",
    title: "Toilet Paper",
    amount: 94.12,
    date: new Date(2020, 7, 14),
  },
  { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) },
  {
    id: "e3",
    title: "Car Insurance",
    amount: 294.67,
    date: new Date(2021, 2, 28),
  },
  {
    id: "e4",
    title: "New Desk (Wooden)",
    amount: 450,
    date: new Date(2021, 5, 12),
  },
];
//

const 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();
        chartDataPoints[expenseMonth].value += expense.amount;
    }
    return <Chart dataPoints={chartDataPoints}/>
};

 

먼저 결론부터 말하자면 내가 ExpensesChart에서 props.expenses로 받는 값은 배열이다. 하지만 내가 사용한 JavaScript의 for...in 문법은 객체를 순환할 때 사용하기 때문에 값이 아닌 인덱스를 가져와서 문제가 생긴 것이다. for...in과 for...of를 살펴보자

 

1. for ... in

for ... in 은 객체를 순환할 때 사용한다.

그럼 for ... in 으로 배열을 순환하게 되면 어떤일이 발생할까?

값이 나오긴 나온다 하지만 value가 나오는게 아닌 index가 나온다. 그 이유는 JavaScript는 배열도 Object타입으로 인식하기 때문에 오류까진 안난다.

2. for ... of

for ... of 는 배열을 순환할 때 사용한다.

 

이번에도 반대로 for...of로 배열이 아닌 객체를 순회하면 어떤 일이 생길까?

TypeError: obj is not iterable // 순회가 불가능 하다는 오류를 뱉어낸다. 

이유는 for...of는 iterable객체에 대해 동작하지만 내가 선언한 obj는 유사 배열 객체(Array-like 객체)이기 때문에 Error를 뱉는다.

넌 배열이 아님미다!

* 유사 배열 객체(Array-like 객체)

유사 배열 객체 : 배열처럼 보이지만 사실 key가 숫자이고 length값을 가지고 있는 객체

 

많은 경우로 유사 배열 객체들은 iterable 객체이기도 하다. 하지만 유사 배열 객체라고해서 반드시 iterable객체라는 보장이 없고, 반대로 iterable 객체라고 해서 유사 배열 객체라는 보장또한 없다.