[Javascript] for ... in

 

 

 

 

자바스크립트에서 객체는 데이터를 구조화하고 저장하는 데 사용되는 중요한 요소다. 객체는 여러 가지 프로퍼티를 포함하며 각 프로퍼티는 특정한 정보나 기능을 나타낸다. 그러므로 객체의 프로퍼티를 순회하고 데이터를 추출하거나 조작하는 것은 프로그래밍에서 꽤 자주 이루어지는 작업이라고 할 수 있는데 이러한 일을 수행하기 위해 for ... in은 유용한 도구로 활용된다.

 

 

for ... in의 기본 문법은 아래와 같다. 아래의 예에서 variable은 각 프로퍼티의 이름을 저장할 변수를, object는 순회할 객체를 의미한다. 

for (variable in object) {
    // 실행할 코드
}

 

 

 

for ... in을 사용하여 객체의 프로퍼티를 순회할 때, 각 회차마다 변수에는 해당 프로퍼티의 이름이 할당된다. 이를 통해 프로퍼티의 이름을 가져올 수 있으며 그 이름을 통해 다시 프로퍼티의 값을 가져올 수 있다.

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

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

/*
  name: John
  age: 30
  occupation: Developer
*/

 

 

---

 

 

for ... in의 주요 특징

 

 

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

 

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

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만 출력
    }
}

 

 

 

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

 

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

 

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만 출력
}

 

 

 

3) 순회 순서가 보장되지 않음

 

for ... in을 통해 객체의 프로퍼티를 순회할 때, 프로퍼티의 순서는 보장되지 않는다. 따라서 객체의 프로퍼티 순서가 중요한 경우라면 다른 방법을 고려해야 한다. ES6부터는 Map이나 Set 등 순서가 보장되는 데이터 구조를 사용하는 것이 안전하다. 배열일 경우(배열도 객체임)에는 forEach()를 사용할 수 있다.

 

 

 

---

 

 

for ... in 사용 시 주의사항

 

 

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

 

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

 

 

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

 

for ... in을 사용하려 할 때 대상 객체가 null 또는 undefined이면 실행되지 않는다. 따라서 순회하기 전에 해당 객체가 유효한지 확인하는 것이 선행되어야 한다.

const obj = null;

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

 

 

---

 

 

for ... in의 대안

for ... in을 사용하는 것 외에도 객체의 프로퍼티를 순회할 수 있는 대안은 다양하다. 아래의 방법들은 더 직관적이고 안전한 순회를 제공한다.

 

1) Object.keys(), Object.values(), Object.entries()

• Object.keys(): 객체의 프로퍼티 이름을 배열로 반환
• Object.values(): 객체의 프로퍼티 값들을 배열로 반환
• Object.entries(): 객체의 프로퍼티를 [프로퍼티 이름, 값] 형태의 배열로 반환

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']]

 

 

2) for ... of

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

const values = Object.values(person); // ['John', 30, 'Developer']

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

 

 

3)  Array.forEach()

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

const entries = Object.entries(person);

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