자바스크립트에서 객체 순회하기

객체에는 순서가 없다!

네. 그래서 일반적인 인덱스 기반 for 루프로는 객체의 속성을 직접 순회할 수 없습니다.

for ...in

개념

  • 객체의 모든 열거 가능한(enumerable) 속성들을 순회하는 데 사용.
  • 객체 자체의 속성 뿐 아니라 프로토타입 체인을 통해 상속받은 속성까지 순회할 수 있음
const obj = { a: 1, b: 2, c: 3 }
for (const key in obj) {
    console.log(`키: ${key}, 값: ${obj[key]}`);
}
// 예상 출력:
// 키: a, 값: 1
// 키: b, 값: 2
// 키: c, 값: 3
// (순서는 보장되지 않을 수 있음, 특히 오래된 환경에서)

사용례

  • 객체의 모든 열거 가능한 속성들 탐색

주의

  • 객체 자신의 속성만 순회하려면 hasOwnProperty()
  • 속성의 순서가 보장되지 않음
  • 배열 순회에 for ...of 루프나 forEach 메서드를 사용하는 것이 적합함

Object.keys()

개념

  • 주어진 객체 자체의 열거 가능한 문자열 속성 “이름” 반환 (obj[key]의 key 반환)
  • 정의된 순서와 동일하게 정렬
  • 자체 속성 키들을 특정 규칙(정수형 키 우선 정렬, 이후 문자열 키는 삽입 순서)에 따라 정렬하여 반환
const myObject = { a: 1, b: 2, c: 3 };

const keys = Object.keys(myObject);

console.log(`myObject의 키: ${keys}`); 
// 출력: myObject의 키: a,b,c

사용례

  • 객체의 키 목록만 필요한 경우
  • 객체의 속성을 배열처럼 처리해야 할 때

Object.values()

개념

  • 주어진 객체 자체의 열거 가능한 문자열 속성 “값” 반환
const product = { id: 101, name: 'Laptop', price: 1200 };

const values = Object.values(product);
console.log(`product의 값: ${values}`); 
// 출력: product의 값: 101,Laptop,1200

사용례

  • 객체의 값 목록만 필요한 경우 (예: 통계 계산, 모든 값의 합계)

Object.entries()

개념

  • 주어진 객체 자체의 열거 가능한 속성 [키, 값] 쌍을 배열로 반환
const user = { id: 'user1', username: 'sergio_dev', email: 'user1@email.com' }

const entries = Object.entries(user)
console.log(`user의 엔트리: ${JSON.stringify(entries)}`);
// 출력: user의 엔트리: 
// [["id","user1"],["username","sergio_dev"],["email","user1@email.com"]]

사용례

  • 객체의 키와 값을 모두 사용하여 반복적인 작업을 수행해야 할 때 가장 유용.
  • 객체를 Map 객체로 변환하거나, Map 객체를 다시 객체로 변환할 때.

for ...of

간접적으로 순회하자!

개념 for ... of… : Iterable 순회 Object.keys(), Object.values(), Object.entries()가 모두 배열을 반환하기에, for ... of 와 함께 사용하여 객체의 속성을 간접적으로 순회 가능

const myObject = { a: 1, b: 2, c: 3 };
// Object.keys()와 for...of 사용 예시
for (const key of Object.keys(myObject)) {
  console.log(`키: ${key}, 값: ${myObject[key]}`);
}

케이스별 사례

  • 예측 가능하고 안전하게 순회하기 위해서는 Object.keys(), Object.values(), Object.entries() 중 하나를 선택 후 for ... of 를 선택하는것도 좋음

  • 만약 상태 관리에서 사용한다면

// React/Vue에서 상태 업데이트 로직 (불변성 유지)
const currentState = {
    user: { name: 'John Doe', email: 'john@example.com' },
    settings: { notifications: true, theme: 'light' }
};

// setting 불변성 유지 
const newSettings = { ...currentState.settings, notifications: false }; 

// state 업데이트
const updatedState = { ...currentState, settings: newSettings };

console.log(updatedState);
// 출력:
// {
//   user: { name: 'John Doe', email: 'john@example.com' },
//   settings: { notifications: false, theme: 'light' }
// }

결론

for ... in 의 경우 특히 조심하자…

  • 순서 보장 불확실
  • 배열 순회 부적합