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 문의 차이점
구분 for...in 문 for...of 문
사용 목적 객체의 열거 가능한 속성을 순회 순회 가능한(iterable) 객체의 요소를 순회
반복 대상 객체의 속성(프로퍼티) 순회 가능한(iterable) 객체의 요소
변수 할당 객체의 속성 키가 변수에 할당 실제 값이 변수에 할당
프로토타입 체인 프로토타입 체인의 속성 포함 (주의 요함) 프로토타입 체인의 속성은 제외
배열 순회 가능하지만 권장되지 않음 배열 요소를 순회하는데 적합
사용 예시 for (const key in object) { ... } for (const element of iterable) { ... }

이 표를 통해 for...in 문과 for...of 문의 주요 차이뿐만 아니라 배열 순회 시의 권장 사항도 함께 이해하실 수 있을 것입니다.

사용 목적에 따른 차이점

for...in 문 예시

for...in 문은 객체의 속성을 열거하는 데 주로 사용됩니다. 아래 예시에서는 객체의 속성을 열거하고 그 값을 출력하는 코드입니다.

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "developer"
};

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
console에서 출력된 모습

위의 예제에서 person[key]는 person 객체의 key 프로퍼티의 값을 가져옵니다. 따라서 각 순회마다 프로퍼티 이름과 해당 프로퍼티의 값이 출력됩니다.

for...of 문 예시

for...of 문은 순회 가능한(iterable) 객체의 요소를 순차적으로 접근하는 데 사용됩니다. 아래 예시에서는 배열의 요소를 순회하고 그 값을 출력하는 코드입니다.

JavaScript 
const iterable = [1, 2, 3, 4, 5];

for (const item of iterable) {
    console.log(item);
}
console에서 출력된 모습

위의 코드에서 item은 각 순회마다 배열 iterable의 요소로 업데이트되며, console.log(item) 코드가 실행됩니다. 결과적으로 배열의 각 요소가 출력됩니다.

반복 대상에 따른 차이점

반복 대상에 따른 for...in 문과 for...of 문의 차이를 더 명확히 이해하기 위해 각각의 반복문을 다른 유형의 데이터에 적용한 예시 코드를 제공해드리겠습니다.

for...in 문 - 객체 예시

for...in 문은 객체의 속성을 열거할 때 사용됩니다. 아래 예시에서는 객체의 속성을 열거하고 그 값을 출력하는 코드입니다.

JavaScript 
const person = {
    name: "Alice",
    age: 25,
    occupation: "teacher"
};

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
console에서 출력된 모습

for...in 문 - 배열 예시 (비권장)

for...in 문은 배열의 인덱스를 열거할 수 있지만, 배열은 일반적으로 객체이기 때문에 상속된 속성까지 열거될 수 있습니다. 따라서 배열에는 for...of 문을 사용하는 것이 더 적합합니다. 아래 예시는 for...in 문을 배열에 적용한 것입니다.

JavaScript 
const colors = ["red", "green", "blue"];

for (const index in colors) {
    console.log(index); // 0, 1, 2 (인덱스)
}

for...of 문 - 배열 예시

for...of 문은 배열의 요소를 순회할 때 사용됩니다. 아래 예시에서는 배열의 각 요소를 순회하고 그 값을 출력하는 코드입니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
    console.log(number); // 1, 2, 3, 4, 5
}

for...of 문 - 문자열 예시

for...of 문은 문자열도 순회 가능한(iterable) 객체로 간주하여 사용할 수 있습니다. 아래 예시에서는 문자열의 각 문자를 순회하고 그 값을 출력하는 코드입니다.

JavaScript 
const message = "Hello";

for (const char of message) {
    console.log(char);
}
console에서 출력된 모습

위의 예시 코드들을 통해 객체, 배열, 문자열 등 다양한 반복 대상에 따른 for...in 문과 for...of 문의 동작 차이를 이해하실 수 있을 것입니다.

변수 할당에 따른 차이점

for...in 문 - 객체 예시

for...in 문은 객체의 속성 키를 변수에 할당합니다. 아래 예시에서는 객체의 속성 키와 값을 출력하는 코드입니다.

JavaScript 
const person = {
    name: "Bob",
    age: 30,
    occupation: "engineer"
};

for (const key in person) {
    const value = person[key];
    console.log(`${key}: ${value}`);
}
console에서 출력된 모습

for...of 문 - 배열 예시

for...of 문은 배열의 각 요소 값을 변수에 할당합니다. 아래 예시에서는 배열의 각 요소 값을 출력하는 코드입니다.

JavaScript 
const numbers = [5, 10, 15];

for (const number of numbers) {
    console.log(number); // 5, 10, 15
}

for...of 문 - 문자열 예시

for...of 문은 문자열의 각 문자를 변수에 할당합니다. 아래 예시에서는 문자열의 각 문자를 출력하는 코드입니다.

JavaScript 
const message = "Hello";

for (const char of message) {
    console.log(char);
}
console에서 출력된 모습

for...in 문 - 배열 인덱스 예시 (비권장)

for...in 문을 배열에 사용하면 배열의 인덱스가 변수에 할당됩니다. 하지만 배열의 프로토타입 체인에 추가된 속성도 열거되므로 권장되지 않는 방법입니다.

JavaScript 
const colors = ["red", "green", "blue"];

for (const index in colors) {
    console.log(index); // 0, 1, 2 (인덱스)
}

이 예시 코드를 통해 for...in 문과 for...of 문에서 변수 할당이 어떻게 이루어지는지 이해하고, 각각의 반복문이 어떤 값을 변수에 할당하는지 확인할 수 있을 것입니다.

프로토타입 체인에 따른 차이점

for...in 문 - 객체 및 프로토타입 예시

for...in 문을 사용하면 객체의 속성과 프로토타입 체인에 있는 속성이 모두 열거됩니다. 아래 예시에서는 객체와 해당 객체의 프로토타입에 속한 속성들을 열거하고 출력하는 코드입니다.

JavaScript 
function Person(name) {
    this.name = name;
}

Person.prototype.age = 30;

const person = new Person("Alice");

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
console에서 출력된 모습

for...of 문 - 배열 및 프로토타입 예시

for...of 문은 배열의 요소만 순회하므로 프로토타입 체인에 있는 속성은 무시됩니다. 아래 예시에서는 배열과 해당 배열의 프로토타입에 속한 속성들을 비교하여 보여주는 코드입니다.

JavaScript 
Array.prototype.customMethod = function() {
    console.log("This is a custom method.");
};

const numbers = [10, 20, 30];

console.log("Using for...of:");
for (const number of numbers) {
    console.log(number);
}

console.log('Using for...in:');
for (const index in numbers) {
    console.log(index); // 'customMethod'도 출력됨
}
console에서 출력된 모습

이 예시 코드를 통해 for...in 문과 for...of 문의 프로토타입 체인에 따른 차이를 확인하고, 어떻게 각각의 반복문이 프로토타입 체인에 있는 속성을 다루는지 이해할 수 있을 것입니다.

for...in 문과 for...of 문의 차이에 대한 맺음말

이 두 가지 반복문은 비슷해 보일 수 있지만, 실제로는 다른 용도와 동작 방식을 가지고 있습니다. for...in 문은 객체의 속성을 열거하고 프로토타입 체인까지 포함할 수 있으며, for...of 문은 순회 가능한(iterable) 객체의 요소를 순차적으로 접근합니다.

  • 객체의 속성을 열거해야 한다면 for...in 문을 사용하고,
  • 배열이나 순회 가능한 객체의 요소를 순회해야 한다면 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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기