for...in 문

for...in 문은 객체의 프로퍼티를 순회하는 반복문입니다.
이 반복문을 사용하여 객체의 모든 열거 가능한 프로퍼티를 순회하고 그 값을 가져올 수 있습니다.

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

for...in 문의 개요

for...in 문은 자바스크립트에서 객체의 프로퍼티를 순회하는 반복문입니다.
객체의 프로퍼티를 순회하고 해당 프로퍼티의 값을 가져오는 것은 프로그래밍에서 중요한 작업 중 하나입니다. 이러한 작업을 수행하기 위해 for...in 문은 매우 유용한 도구입니다.

for...in 문을 사용하면 객체의 모든 열거 가능한 프로퍼티를 순회하고, 각 프로퍼티의 값을 가져와서 처리할 수 있습니다. 이를 통해 객체 내의 데이터를 접근하고 조작하는 프로그래밍 작업을 더욱 간단하게 수행할 수 있습니다.

이 글에서는 for...in 문의 사용법부터 주의사항까지 자세히 살펴보겠습니다. 또한, 객체의 프로퍼티를 순회하면서 발생할 수 있는 문제점과 이를 어떻게 해결할 수 있는지도 함께 다룰 예정입니다.

객체 프로퍼티 순회의 필요성

객체는 자바스크립트에서 데이터를 구조화하고 저장하는 데 사용되는 중요한 요소입니다. 객체는 여러 가지 프로퍼티를 포함하며, 각 프로퍼티는 특정한 정보나 기능을 나타냅니다. 이러한 객체의 프로퍼티를 순회하는 것은 프로그래밍에서 매우 중요한 작업입니다. 이 작업이 필요한 이유에 대해 알아보겠습니다.

  • 데이터 분석과 가공: 객체는 데이터를 저장하는 데 자주 사용됩니다. 객체의 프로퍼티는 데이터의 특정 부분을 나타내므로, 이를 순회하여 데이터를 분석하거나 가공할 수 있습니다. 예를 들어, 사용자 정보 객체의 프로퍼티를 순회하여 특정 조건을 만족하는 사용자를 필터링하거나 통계를 생성할 수 있습니다.
  • 동적인 작업 수행: 객체의 프로퍼티는 동적으로 생성되거나 변경될 수 있습니다. 프로그램 실행 중에 객체의 내용이 변경되는 경우, 프로퍼티를 순회하여 업데이트된 정보를 활용하는 것이 중요합니다. 예를 들어, 사용자가 추가되거나 삭제될 때마다 객체의 프로퍼티를 업데이트하고 관리해야 합니다.
  • 동적 속성 조회: 객체의 프로퍼티를 순회하여 특정한 속성을 동적으로 조회할 수 있습니다. 예를 들어, 객체의 프로퍼티 이름을 문자열로 받아 해당 프로퍼티의 값을 가져오는 경우에 유용합니다.
  • 데이터 변환: 객체의 프로퍼티를 다른 형태로 변환해야 할 때도 있습니다. 예를 들어, 객체의 프로퍼티를 배열로 변환하거나, 특정 형식에 맞게 문자열로 변환해야 할 수 있습니다.

for...in 문을 사용하여 객체의 프로퍼티를 순회하는 것은 이러한 상황에서 필요한 작업을 수행하는데 도움이 됩니다. 객체의 모든 프로퍼티를 살펴보고 데이터를 추출하거나 조작하는 과정은 프로그래밍에서 빈번하게 필요한 작업 중 하나입니다. 다음 섹션에서는 for...in 문의 사용법에 대해 자세히 알아보겠습니다.

for...in 문의 사용법

for...in 문은 객체의 프로퍼티를 순회하는데 사용됩니다.

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

기본 문법과 작동 원리

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

JavaScript - 구문 
for (variable in object) {
    // 실행할 코드
}
  • variable: 각 프로퍼티 이름을 저장할 변수입니다.
  • 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() 함수를 사용하시기 바랍니다.

자바스크립트 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인 경우 에러가 발생합니다. 따라서 순회하기 전에 해당 객체가 유효한지 확인해야 합니다.

자바스크립트 undefined 값
자바스크립트 null 값
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 문과 Array.forEach() 메서드를 사용하여 객체의 프로퍼티를 순회할 수도 있습니다.

for...of 문

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

JavaScript 
const values = Object.values(person);

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

Array.forEach() 메서드

Array.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, Array.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

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

참고문헌

같이 보기