[JS] for ...of와 for ...in

JavaScript에서는 배열, 객체, 기타 데이터 구조를 순회(iterate)하는 다양한 방법을 제공합니다. 그중 for...of와 for...in은 이름이 비슷해서 종종 혼동되지만, 작동 방식과 사용 목적이 전혀 다릅니다.

 

목차

1. for ...of

2. for ...in

3. 주요 차이점

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. for ...of

for ...of는 이터러블 객체(배열, 문자열, Set, Map 등)의 값을 순회합니다.

주로 배열이나 기타 이터러블 객체의 값에 접근할 때 사용합니다.

 

사용 예시

const numArray = [1, 2, 3];
for (const num of numArray) {
    console.log(num); // 1, 2, 3
}

 

결과가 배열의 값(value)으로 잘 출력되네요.

그럼 배열에 for ...in을 사용하면 어떤 결과가 나올까요?

const numArray = [1, 2, 3];
for (const num in numArray) {
  console.log(num); // 0, 1, 2
}

에러가 발생하지 않고 0 1 2라는 값이 출력되었습니다. 자바스크립트는 배열도 Object 타입으로 인식하기 때문에 결과가 나온 것입니다.다만 해당 배열의 index가 출력되는 걸 확인할 수 있습니다.

 

 

2. for ...in

for ...in은 객체의 열거 가능한 속성(keys)을 순회합니다. 

주로 객체의 속성을 확인하거나 순회할 때 사용합니다.

 

사용 예시

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(key); // "a", "b", "c"
}

 

결과가 객체의 속성(keys)으로 잘 출력되네요.

그럼 객체에 for ...of을 사용하면 어떤 결과가 나올까요?

const obj = { a: 1, b: 2, c: 3 };
for (const key of obj) {
    console.log(key);
}

 

obj 객체가 반복 가능한 객체가 아니라고 TypeError를 출력되는 걸 확인할 수 있습니다.

 

3. 주요 차이점

구분	for ...in	for ...of
순회 대상	객체의 열거 가능한 속성(key)	이터러블(iterable) 객체의 값
출력 내용	객체의 속성(key)	이터러블(iterable) 객체의 값
사용 대상	객체	배열, 문자열, Set, Map 등 이터러블(iterable) 객체
상속 속성 포함 여부	상속된 속성도 포함	포함하지 않음

 

차이 예시

const array = [10, 20, 30];
array.customProperty = "Hello";

// for ...in
for (const key in array) {
    console.log(key); // "0", "1", "2", "customProperty"
}

// for ...of
for (const value of array) {
    console.log(value); // 10, 20, 30
}

 

• for...in은 배열의 인덱스와 추가된 속성(customProperty)을 모두 순회합니다.
• for...of는 배열의 값만 순회하며, 추가 속성은 무시합니다.

 

 

 

정리

 

• for...in은 객체의 속성(key)을 순회하며, 배열에서는 예기치 않은 속성까지 포함될 수 있으므로 주의가 필요합니다.
• for...of는 이터러블 객체의 값만 순회하므로 배열, 문자열, Set, Map 등에서  더욱 간단하고 직관적인 사용이 가능합니다.

 

 

 

추천글

[JS] 자바스크립트의 == 와 === 의 차이

 

[JS] Promise.all 과 Promise.allSettled 차이