for...in 문

for...in 문은 객체 리터럴 {} 또는 new Object()처럼 만든 일반 객체(Plain object)의 프로퍼티(속성) 이름(키)을 하나씩 반복할 수 있는 반복문입니다.

"객체"는 자바스크립트의 광범위한 개념으로, 배열, 함수, Map, Set 등도 모두 객체에 속합니다.
하지만, for...in 문은 보통 일반 객체를 순회할 때 사용하며, 배열이나 이터러블 객체에는 적합하지 않습니다.

for...in 문을 사용할 때 주의해야 할 특징과 주의사항 등에 대해 알아봅니다.

for...in 문의 사용법

for...in 문은 객체 리터럴 {} 또는 new Object()처럼 만든 일반 객체(Plain object)의 프로퍼티(속성) 이름(키)를 순회하는데 사용됩니다.

기본적인 사용법과 작동 원리, 그리고 순회 중 변수에 할당되는 값과 객체의 프로퍼티 값을 가져오는 방법에 대해 알아보겠습니다.

기본 문법과 작동 원리

for...in 문의 기본 문법은 다음과 같습니다.

JavaScript 
for (variable in object) {
    // 실행할 코드
}
  • variable: 각 프로퍼티 이름(키)을 저장할 변수입니다.
  • object: 객체 리터럴 {} 또는 new Object()처럼 만든 일반 객체(Plain object)

for...in 문은 주어진 객체의 열거 가능한 프로퍼티들을 반복하면서 각 순회마다 variable에 프로퍼티 이름이 할당됩니다. 이를 통해 해당 프로퍼티의 값을 가져올 수 있습니다.

순회 중 변수에 할당되는 값

for...in 문을 사용하여 객체의 프로퍼티를 순회할 때, 각 순회마다 변수에는 해당 프로퍼티의 이름이 할당됩니다. 이를 통해 프로퍼티의 이름을 사용하여 해당 프로퍼티의 값을 가져올 수 있습니다.

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
} // 객체 리터럴로 정의된 객체

for (let key in person) {
    console.log(key); // 프로퍼티 이름 출력
}
console에서 출력된 모습

객체의 프로퍼티 값 가져오기

for...in 문을 사용하여 객체의 프로퍼티를 순회할 때, 변수에 할당되는 값은 프로퍼티의 이름이므로 이를 통해 프로퍼티의 값을 가져와야 합니다. 이를 위해서는 object[variable] 형태를 사용합니다.

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
} // 객체 리터럴로 정의된 객체

for (let key in person) {
    console.log(key + ": " + person[key]); // 프로퍼티 이름과 값 출력
}

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

console에서 출력된 모습

이제 for...in 문의 기본 사용법과 작동 원리, 그리고 순회 중 변수 할당과 프로퍼티 값 가져오기에 대해 이해하셨을 것입니다. 다음 섹션에서는 for...in 문의 주요 특징에 대해 알아보겠습니다.

for...in 문의 주요 특징

for...in 문은 객체의 프로퍼티를 순회하는 기능을 제공하지만 몇 가지 주요 특징을 고려해야 합니다. 아래에서는 for...in 문의 주요 특징에 대해 자세히 살펴보겠습니다.

프로토타입 체인의 프로퍼티도 순회

for...in 문은 객체 자체뿐만 아니라 프로토타입 체인 상의 프로퍼티도 순회합니다. 이것은 객체 상속 구조에서 자주 발생하는 특징입니다. 만약 객체 자신의 프로퍼티만 순회하고 싶다면 hasOwnProperty 메서드를 사용하여 확인해야 합니다.

JavaScript 
const parent = {
    parentProp: "I am from parent"
} // 객체 리터럴로 정의된 객체

const child = Object.create(parent);
child.childProp = "I am from child";

for (let key in child) {
    console.log(key); // parentProp, childProp 출력
}

for (let key in child) {
    if (child.hasOwnProperty(key)) {
        console.log(key); // childProp만 출력
    }
}

열거 가능한(enumerable) 프로퍼티만 순회

for...in 문은 객체의 열거 가능한 프로퍼티만 순회합니다.
객체의 프로퍼티는 기본적으로 열거 가능합니다. 하지만 Object.defineProperty() 메서드를 사용하여 프로퍼티의 enumerable 속성을 false로 설정하면 해당 프로퍼티는 for...in 문을 통해 순회되지 않습니다.

JavaScript 
const obj = {
    enumerableProp: "I will be enumerated",
} // 객체 리터럴로 정의된 객체

Object.defineProperty(obj, "nonEnumerableProp", {
    value: "I will not be enumerated",
    enumerable: false
});

for (let key in obj) {
    console.log(key); // enumerableProp만 출력
}

순회 순서가 보장되지 않음

for...in 문을 사용하여 객체의 프로퍼티를 순회할 때, 프로퍼티 순서는 보장되지 않습니다. 객체의 프로퍼티 순서가 중요한 경우라면 다른 방법을 고려해야 합니다. ES6부터는 Map과 Set 등 순서가 보장되는 데이터 구조를 사용하는 것이 더욱 안전합니다. 배열(배열도 객체입니다.)일 경우에는 forEach() 함수를 사용하시기 바랍니다.

이렇게 for...in 문의 주요 특징을 고려하여 객체의 프로퍼티를 순회하고 다루는 것이 중요합니다. 다음 섹션에서는 for...in 문을 사용할 때 주의해야 할 몇 가지 주의사항을 살펴보겠습니다.

for...in 문의 주의해야 할 특징과 주의사항

for...in 문을 사용할 때 몇 가지 주의해야 할 특징과 주의사항이 있습니다. 이러한 사항을 알아보고 순회 중에 발생할 수 있는 문제를 해결하는 방법을 살펴보겠습니다.

프로토타입 체인에서의 프로퍼티 순회와 hasOwnProperty

for...in 문은 프로토타입 체인 상의 프로퍼티도 순회합니다. 이는 때로는 의도치 않은 동작을 초래할 수 있습니다. 따라서 객체 자체의 프로퍼티만 순회하기 위해 hasOwnProperty 메서드를 사용하여 확인해야 합니다.

JavaScript 
for (let key in object) {
    if (object.hasOwnProperty(key)) {
        // 객체 자체의 프로퍼티에 대한 작업 수행
    }
}

순회 중 프로퍼티 값 변경에 대한 주의

for...in 문을 사용하여 객체의 프로퍼티를 순회하면서 해당 프로퍼티의 값을 변경하는 것은 가능하지만, 이는 예상치 못한 동작을 초래할 수 있습니다. 프로퍼티 값을 변경해야 하는 경우, 이를 다른 방법으로 처리하거나 순회가 끝난 후에 변경하는 것이 좋습니다.

Object.defineProperty()를 통한 enumerable 속성 제어

Object.defineProperty() 메서드를 사용하여 프로퍼티를 정의할 때, enumerable 속성을 false로 설정하면 해당 프로퍼티는 for...in 문을 통해 순회되지 않습니다.

JavaScript 
Object.defineProperty(object, "nonEnumerableProperty", {
    value: "This property is not enumerable",
    enumerable: false
});

객체가 null 또는 undefined일 때의 처리

for...in 문을 사용하여 객체를 순회할 때, 객체가 null 또는 undefined인 경우 에러가 발생합니다. 따라서 순회하기 전에 해당 객체가 유효한지 확인해야 합니다.

JavaScript 
const obj = null;

for (let key in obj) {
    // 이 부분은 실행되지 않음
}

for...in 문을 사용할 때 이러한 주의사항과 사항들을 고려하여 객체의 프로퍼티를 순회하고 다루어야 합니다. 이를 통해 예기치 않은 문제를 피하고 안정적으로 작업할 수 있습니다. 다음 섹션에서는 for...in 문 대신에 사용할 수 있는 대안에 대해 알아보겠습니다.

for...in 문 대체 방법

for...in 문 외에도 객체의 프로퍼티를 순회하는 다양한 대안 방법이 있습니다. 이러한 방법은 더 직관적이고 안전한 순회를 제공하며, 코드를 더욱 명확하게 만들어줍니다. 아래에서는 Object.keys(), Object.values(), Object.entries(), for...of 및 배열의 forEach()를 활용한 대체 방법에 대해 살펴보겠습니다.

Object.keys(), Object.values(), Object.entries() 사용 장점

Object.keys(), Object.values(), Object.entries()는 객체를 순회하고 프로퍼티에 더 쉽게 접근할 수 있는 메서드입니다. 각각의 메서드는 객체의 프로퍼티를 배열로 변환하여 반환합니다.

  • Object.keys(obj): 객체의 프로퍼티 이름을 배열로 반환합니다.
  • Object.values(obj): 객체의 프로퍼티 값들을 배열로 반환합니다.
  • Object.entries(obj): 객체의 프로퍼티를 [프로퍼티이름, 값] 형태의 배열로 반환합니다.
JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
}

const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);

console.log(keys);    // ['name', 'age', 'occupation']
console.log(values);  // ['John', 30, 'Developer']
console.log(entries); // [['name', 'John'], ['age', 30], ['occupation', 'Developer']]

for...of와 forEach()를 활용한 대안

for...of 문과 배열의 forEach()를 사용하여 객체의 프로퍼티를 순회할 수도 있습니다.

for...of 문

for...of 문은 이터러블한 객체를 순회하는데 사용됩니다. 객체는 직접적으로 이터러블하지 않기 때문에, 이 메서드는 객체가 아닌 배열 등과 같이 이터러블한 객체에서 사용됩니다.

JavaScript 
const values = Object.values(person);

for (const value of values) {
    console.log(value);
}

배열의 forEach() 함수

배열의 forEach()는 배열의 각 요소에 대해 콜백 함수를 실행합니다. 이 메서드는 배열에만 적용 가능하며, 객체 프로퍼티를 순회하기 위해서는 먼저 프로퍼티를 배열로 변환해야 합니다.

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

const entries = Object.entries(person);

entries.forEach(([key, value]) => {
    console.log(key + ": " + value);
});

이러한 대체 방법들을 사용하면 for...in 문의 주의사항을 피하면서 객체의 프로퍼티를 더욱 안전하게 순회할 수 있습니다. 다양한 방법을 적절하게 활용하여 코드를 더 명확하게 작성할 수 있습니다.

주의사항을 지키며 객체 순회하기의 중요성

for...in 문은 객체의 프로퍼티를 순회하는데 유용한 도구이지만, 프로토타입 체인에서의 프로퍼티 순회, 열거 가능한 프로퍼티만 순회, 순회 순서의 불확실성 등의 주의사항이 존재합니다. 이러한 주의사항을 이해하고 프로퍼티 순회 시에 생길 수 있는 문제들을 피하는 것이 중요합니다.

또한, for…in 문 외에도 Object.keys(), Object.values(), Object.entries(), for...of, forEach()와 같은 대체 방법들을 활용하여 더 안전하고 직관적인 프로퍼티 순회 방법을 사용할 수 있다는 것을 알아보았습니다.

객체는 자바스크립트 프로그래밍에서 매우 중요한 개념입니다. 객체의 프로퍼티를 순회하면서 데이터 분석, 가공, 동적 작업, 동적 속성 조회 등 다양한 작업을 수행할 수 있습니다. 그러나 이러한 작업을 할 때에는 주의사항을 반드시 지켜야 합니다. 주의사항을 지키지 않으면 프로퍼티의 순회 순서, 프로토타입 체인에서의 프로퍼티 순회 등으로 인해 예상치 못한 결과가 발생할 수 있습니다. 이로 인해 버그와 보안 문제가 발생할 수 있으므로 항상 주의하여 작업해야 합니다.

마지막으로, 객체를 다룰 때 항상 주의와 이해를 바탕으로 작업하는 것이 중요하며, 객체의 프로퍼티를 순회하는 방법을 효과적으로 활용할 수 있도록 연습하고 익숙해지는 것이 좋습니다.

명세서

for…in 문에 대한 명세서 사양
명세서 사양
for...in ECMAScript Language Specification
#sec-for-in-and-for-of-statements

브라우저 호환성

for...in 문에 대한 브라우저 호환성
문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
for...in 1 12 1 1

참고문헌

같이 보기