서로 다른 순회 대상과 사용 목적

자바스크립트의 for...in과 for...of 문은 둘 다 반복문이고 비슷해 보이지만 서로 다른 용도와 동작 방식을 가지고 있습니다. 이 두 반복문의 핵심 차이점을 알아보고, 서로 다른 사용 목적과 용도를 비교합니다.

기본 개념 비교

for...in과 for...of 문의 핵심 차이만 간단히 표로 정리하면 이렇게 됩니다.

for...in 문과 for...of 문의 핵심 차이
구분 for...in for...of
순회 대상 속성(key, 인덱스)으로 순회할 수 있는 객체 값(value)으로 순회할 수 있는 객체
루프 객체에서 가져온 속성(key, 인덱스)으로 작동 객체에서 가져온 값(value)으로 작동
사용 가능한 객체
  • 일반 객체(Plain objects)
  • 배열
사용 용도 객체의 속성(key)을 순회할 때 사용 객체의 값(value)을 순회할 때 사용
사용 목적 데이터를 다루는 것 보다는 주로 일반 객체(Plain objects)의 특정 값(value)을 가지는 속성(key)을 확인하는 디버깅용 객체의 값(value) 즉, 데이터를 다루기 위해

예제

for...in과 for...of 문의 서로 다른 순회 대상과 사용 목적을 실제 코드 예제로 확인해보세요.

for...in

for...in 문은 주로 순회를 통해 데이터를 다루는 것 보다는 일반 객체(Plain objects)의 특정 값(value)을 가지는 속성(key)을 확인하는 디버깅용으로 사용됩니다.

JavaScript 
const user = {
    name: "철수",
    age: 30
}

for (let key in user) {
  console.log(key, ":", user[key]);  
}
/*
    출력:
    "name" : "철수"
    "age" : 30
*/

for...of

for...of 문은 주로 객체의 값(value) 즉, 데이터를 다루기 위해 사용됩니다. 예를 들어, DOM 컬렉션인 NodeList 객체의 요소를 순회할 때 활용할 수 있습니다.

HTML 
<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>
JavaScript 
const liElements = document.querySelectorAll("li"); // li 선택자를 모두 선택
console.log(liElements); // NodeList(3) [li, li, li]

/* for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 출력: "김밥" "라면" "떡볶이"

코드 부연설명
querySelectorAll()로 반환된 NodeList 객체는 유사 배열 객체이면서 for...of 문으로 순회 가능한 객체입니다.

고려할 점

  • 객체 리터럴 등 일반 객체(Plain objects)의 속성 이름을 디버깅용 등의 목적으로 순회하려면 for...in 문을 사용하는 것이 적합합니다.
  • 배열이나 DOM 컬렉션인 NodeList 객체처럼 한 값의 요소를 하나씩 순회하면서 다루려면 for...of 문을 사용하는 것이 적합합니다.

명세서

for...in 문과 for...of 문의 명세서 사양
명세서 사양
for...in, for...of ECMAScript Language Specification
#sec-for-in-and-for-of-statements

브라우저 호환성

for...in 문과 for...of 문의 브라우저 호환성
문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
for...in 1 12 1 1
for...of 38 12 13 7

참고문헌

같이 보기