객체 안의 프로퍼티를 순회하면서 열거하는 방법

1. for ... in문

for (변수 선언문 in 객체) { ... }

• 객체의 프로퍼티 개수만큼 순회
• 변수 선언문에서 선언한 변수에 프로퍼티 키 할당

const person = {
  name: 'Jeong',
  address: 'Suwon'
};

for (const key in person) {
  console.log(key + ': ' + person[key]);
}
// name: Jeong
// address: Suwon

특징

• 해당 객체 뿐만 아니라 객체의 프로토타입 프로퍼티까지 열거
  • 단, 열거 가능한 프로퍼티만 가능 ([[Enumerable]] 이 true인 프로퍼티만 열거)
• 프로퍼티 키가 심벌인 프로퍼티는 열거 X
• 상속받은 프로퍼티는 제외하고 객체 자신의 프로퍼티만 열거하려면 Object.hasOwnProperty 메서드 사용
  • 해당 메서드를 사용하여 객체 자신의 프로퍼티인지 확인
• 프로퍼티를 열거할 때 순서 보장 X
  • 하지만 대부분의 브라우저는 순서 보장
  • 숫자인 프로퍼티 키에 대해서는 정렬
• 배열을 순회할 때는 권장 X
  • for문, for ... of문, Array.prototype.forEach 메서드 사용 권장

const person = {
  name: 'Jeong',
  address: 'Suwon'
  __proto__: { age: 20 }    // 프로토타입 프로퍼티
};

for (const key in person) {
  console.log(key + ': ' + person[key]);
}
// name: Jeong
// address: Suwon
// age: 20

for (const key in person) {
  // 객체 자신의 프로퍼티인지 확인
  if (!person.hasOwnProperty(key)) continue;
  console.log(key + ': ' + person[key]);
}
// name: Jeong
// address: Suwon

const obj = {
  3: 3,
  2: 2,
  1: 1,
  b: 'b',
  a: 'a'
};

for (const key in obj) {
  if (!obj.hasOwnProperty(key)) continue;
  console.log(key + ': ' + obj[key]);
}
// 프로퍼티 키가 숫자이면 정렬
// 1: 1
// 2: 2
// 3: 3
// b: b
// a: a

2. Object.keys

• 상속받은 프로퍼티 열거 X
• 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환

const person = {
  name: 'Jeong',
  address: 'Suwon'
  __proto__: { age: 20 }    
};

console.log(Object.keys(person));    // ["name", "address"]

3. Object.values

• 상속받은 프로퍼티 열거 X
• 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환

console.log(Object.values(person));    // ["Jeong", "Suwon"]

4. Object.entries

• 상속받은 프로퍼티 열거 X
• 객체 자신의 열거 가능한 프로퍼티 키와 값을 각각 배열에 담아 배열로 반환

console.log(Object.entries(person));    // [["name", "address"], ["Jeong", "Suwon"]]

출처 : 모던 자바스크립트 Deep Dive