for ~ in과 for ~ of

1. 개요

대부분의 프로그래밍 언어에는 반복문을 구현하는 대표적인 방법으로 for과 while이 존재합니다. Javascript에서의 반복문을 나타내는 방법은 for, while, for ~ in, for ~ of, map, forEach, reduce 등 매우 다양하게 존재합니다. 이렇게 다양한 방법 중에서 for ~ in과 for ~ of에 대해서 정리하고자 합니다.

2. for

for ~ in과 for ~ of는 각각 ES5, ES6에 등장한 최신 문법입니다. 그렇다면, 이들이 기존의 for문을 대체할 수 있는 이유는 무엇인지에 대해서 간단하게 살펴보도록 하겠습니다. 먼저, for을 통해 객체의 속성을 순회하는 코드는 다음과 같습니다.

const obj = { a: 'A', b: 'B', c: 'C' };

const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  console.log(key, obj[key]);
}

이번에는 for ~ in을 사용하였을 때의 코드를 살펴보겠습니다.

const obj = { a: 'A', b: 'B', c: 'C' };

for (const key in obj) {
  console.log(key, obj[key]);
}

위에 나타낸 코드를 비교해보면 for ~ in을 사용하였을 때의 코드가 훨씬 간소화된 것을 확인할 수 있습니다.

3. for ~ in

for ~ in은 객체의 열거 가능한 속성들을 순회할 수 있도록 해줍니다. 객체의 key는 열거 가능한 속성이고, value는 열거 불가능한 속성[1]이므로 for ~ in을 통해 객체의 key에는 접근할 수 있으나, value에는 접근할 수 없습니다.

const obj = { a: 'A', b: 'B', c: 'C' };
for (const key in obj) {
  console.log(key, obj[key]);
}

a A
b B
c C

Javascript에서의 거의 모든 객체는 Object의 인스턴스[2]이므로 for ~ in은 객체 뿐만 아니라 배열에도 사용할 수 있으며, 이 경우 임시 변수에는 index가 담깁니다.

const arr = ['a', 'b', 'c'];
for (const i in arr) {
  console.log(i, arr[i]);
}

0 a
1 b
2 c

단, 배열의 경우 forEach, for ~ of가 이미 존재하기 때문에 for ~ in을 통한 반복은 추천하지 않고 있으며[3], 순서가 보장되지 않으므로 속성의 순서가 중요시 되어야 하는 경우에는 사용하지 않는 것이 좋습니다. 이는 실질적으로 디버깅을 위해 사용될 수 있으며, 특정 key의 존재 여부를 확인하는 용도로 사용할 수 있습니다.

4. for ~ of

for ~ of는 [Symbol.iterator] 속성이 있는 객체를 순회할 수 있도록 해주며, Array, Map, Set, arguments 등이 이에 해당합니다.

const arr = ['a', 'b', 'c'];
for (const value of arr) {
  console.log(value);
}

a A
b B
c C

단, Object는 반복 가능한 객체가 아니므로 for ~ of를 통해 순회하는 경우 TypeError가 발생합니다. for ~ of는 ES6에 추가된 새로운 Collection 반복 구문이며, 이를 사용하기 위해서는 해당 객체가 [Symbol.iterator] 속성을 가지고 있어야 하나, 경우에 따라서는 이를 직접 명시할 수도 있다고 합니다.

const obj = { a: 'A', b: 'B', c: 'C' };
for (const key of obj) {
  console.log(key);
}

TypeError: obj is not iterable

5. 최종 정리

for ~ in은 열거 가능한 객체의 key를 순회하고, for ~ of는 반복 가능한 모든 객체의 value를 순회하는데 사용합니다[4].

6. 참고 자료

"" 개의 결과를 찾았습니다.

    ""에 대한 결과를 찾을 수 없습니다.