for...in
vs. for...of
자바스크립트의 for...in
문과 for...of
문은 둘 다 반복문이고 비슷해 보이지만 서로 다른 용도와 동작 방식을 가지고 있습니다. for...in
문과 for...of
문의 차이점에 대해 알아보겠습니다.
같이 보기
for...in
문과 for...of
문의 차이점
자바스크립트의 for...in
문과 for...of
문은 둘 다 반복문이고 비슷해 보이지만 서로 다른 용도와 동작 방식을 가지고 있습니다.
다음은 for...in
문과 for...of
문의 차이점을 표로 요약한 것입니다.
구분 | for...in 문 |
for...of 문 |
---|---|---|
사용 목적 | 객체의 열거 가능한 속성을 순회 | 순회 가능한(iterable) 객체의 요소를 순회 |
반복 대상 | 객체의 속성(프로퍼티) | 순회 가능한(iterable) 객체의 요소 |
변수 할당 | 객체의 속성 키가 변수에 할당 | 실제 값이 변수에 할당 |
프로토타입 체인 | 프로토타입 체인의 속성 포함 (주의 요함) | 프로토타입 체인의 속성은 제외 |
배열 순회 | 가능하지만 권장되지 않음 | 배열 요소를 순회하는데 적합 |
사용 예시 | for (const key in object) { ... } |
for (const element of iterable) { ... } |
이 표를 통해 for...in
문과 for...of
문의 주요 차이뿐만 아니라 배열 순회 시의 권장 사항도 함께 이해하실 수 있을 것입니다.
사용 목적에 따른 차이점
for...in
문 예시
for...in
문은 객체의 속성을 열거하는 데 주로 사용됩니다. 아래 예시에서는 객체의 속성을 열거하고 그 값을 출력하는 코드입니다.
위의 예제에서 person[key]
는 person
객체의 key
프로퍼티의 값을 가져옵니다. 따라서 각 순회마다 프로퍼티 이름과 해당 프로퍼티의 값이 출력됩니다.
for...of
문 예시
for...of
문은 순회 가능한(iterable
) 객체의 요소를 순차적으로 접근하는 데 사용됩니다. 아래 예시에서는 배열의 요소를 순회하고 그 값을 출력하는 코드입니다.
위의 코드에서 item
은 각 순회마다 배열 iterable
의 요소로 업데이트되며, console.log(item)
코드가 실행됩니다. 결과적으로 배열의 각 요소가 출력됩니다.
반복 대상에 따른 차이점
반복 대상에 따른 for...in
문과 for...of
문의 차이를 더 명확히 이해하기 위해 각각의 반복문을 다른 유형의 데이터에 적용한 예시 코드를 제공해드리겠습니다.
for...in
문 - 객체 예시
for...in
문은 객체의 속성을 열거할 때 사용됩니다. 아래 예시에서는 객체의 속성을 열거하고 그 값을 출력하는 코드입니다.
for...in
문 - 배열 예시 (비권장)
for...in
문은 배열의 인덱스를 열거할 수 있지만, 배열은 일반적으로 객체이기 때문에 상속된 속성까지 열거될 수 있습니다. 따라서 배열에는 for...of
문을 사용하는 것이 더 적합합니다. 아래 예시는 for...in
문을 배열에 적용한 것입니다.
for...of
문 - 배열 예시
for...of
문은 배열의 요소를 순회할 때 사용됩니다. 아래 예시에서는 배열의 각 요소를 순회하고 그 값을 출력하는 코드입니다.
for...of
문 - 문자열 예시
for...of
문은 문자열도 순회 가능한(iterable
) 객체로 간주하여 사용할 수 있습니다. 아래 예시에서는 문자열의 각 문자를 순회하고 그 값을 출력하는 코드입니다.
위의 예시 코드들을 통해 객체, 배열, 문자열 등 다양한 반복 대상에 따른 for...in
문과 for...of
문의 동작 차이를 이해하실 수 있을 것입니다.
변수 할당에 따른 차이점
for...in
문 - 객체 예시
for...in
문은 객체의 속성 키를 변수에 할당합니다. 아래 예시에서는 객체의 속성 키와 값을 출력하는 코드입니다.
for...of
문 - 배열 예시
for...of
문은 배열의 각 요소 값을 변수에 할당합니다. 아래 예시에서는 배열의 각 요소 값을 출력하는 코드입니다.
for...of
문 - 문자열 예시
for...of
문은 문자열의 각 문자를 변수에 할당합니다. 아래 예시에서는 문자열의 각 문자를 출력하는 코드입니다.
for...in
문 - 배열 인덱스 예시 (비권장)
for...in
문을 배열에 사용하면 배열의 인덱스가 변수에 할당됩니다. 하지만 배열의 프로토타입 체인에 추가된 속성도 열거되므로 권장되지 않는 방법입니다.
이 예시 코드를 통해 for...in
문과 for...of
문에서 변수 할당이 어떻게 이루어지는지 이해하고, 각각의 반복문이 어떤 값을 변수에 할당하는지 확인할 수 있을 것입니다.
프로토타입 체인에 따른 차이점
for...in
문 - 객체 및 프로토타입 예시
for...in
문을 사용하면 객체의 속성과 프로토타입 체인에 있는 속성이 모두 열거됩니다. 아래 예시에서는 객체와 해당 객체의 프로토타입에 속한 속성들을 열거하고 출력하는 코드입니다.
for...of
문 - 배열 및 프로토타입 예시
for...of
문은 배열의 요소만 순회하므로 프로토타입 체인에 있는 속성은 무시됩니다. 아래 예시에서는 배열과 해당 배열의 프로토타입에 속한 속성들을 비교하여 보여주는 코드입니다.
이 예시 코드를 통해 for...in
문과 for...of
문의 프로토타입 체인에 따른 차이를 확인하고, 어떻게 각각의 반복문이 프로토타입 체인에 있는 속성을 다루는지 이해할 수 있을 것입니다.
for...in
문과 for...of
문의 차이에 대한 맺음말
이 두 가지 반복문은 비슷해 보일 수 있지만, 실제로는 다른 용도와 동작 방식을 가지고 있습니다. for...in
문은 객체의 속성을 열거하고 프로토타입 체인까지 포함할 수 있으며, for...of
문은 순회 가능한(iterable
) 객체의 요소를 순차적으로 접근합니다.
- 객체의 속성을 열거해야 한다면
for...in
문을 사용하고, - 배열이나 순회 가능한 객체의 요소를 순회해야 한다면
for...of
문을 사용하는 것이 좋습니다.
명세서
명세서 사양 | |
---|---|
for...in, for...of
|
ECMAScript Language Specification #sec-for-in-and-for-of-statements |
브라우저 호환성
문 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
for...in
|
1 | 12 | 1 | 1 |
for...of
|
38 | 12 | 13 | 7 |