JavaScript 객체의 속성 개수를 세는 2가지 방법: for 루프와 Object.keys()

JavaScript 객체에 포함된 속성(property)의 개수를 세는 두 가지 방법을 알아봅니다. 각 방법의 동작 차이까지 상세히 설명합니다.

JavaScript 객체의 속성 개수를 확인하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다.

for 루프 사용
Object.keys() 메서드 사용

지금부터 두 가지 방법을 하나씩 살펴보겠습니다.

for 루프로 객체 속성 개수 세기

먼저 dog라는 이름의 JavaScript 객체가 있다고 가정해 보겠습니다.

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

dog 객체의 속성 개수를 세려면 먼저 count라는 변수를 선언하고 초기값으로 0을 할당합니다.

let count = 0

이제 dog 객체를 순회하면서, 발견되는 속성마다 count 변수에 1씩 더해줍니다.

for (let properties in dog) {
  count = count + 1
}

console.log()를 사용해 결과를 출력해 보겠습니다.

console.log(count)
// 결과: 4

코드를 올바르게 작성했다면 4가 출력됩니다.

Object.keys()로 객체 속성 개수 세기

JavaScript의 Object.keys() 메서드를 사용하면 객체의 모든 열거 가능한(enumerable) 속성 개수를 셀 수도 있습니다. 열거 가능한 속성이 무엇인지는 잠시 후 자세히 설명합니다.

앞서 사용한 dog 객체를 그대로 활용해 보겠습니다. 이번에는 dog 객체를 Object.keys()에 전달한 뒤, length 속성으로 길이를 구합니다.

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

let count = Object.keys(dog).length

console.log(count)
// 결과: 4

결과는 동일하게 나옵니다. 하지만 정말 항상 같은 결과일까요?

답은 '그럴 수도 있고 아닐 수도 있다'입니다. 상황에 따라 달라집니다.

for 루프 vs Object.keys()

for 루프와 Object.keys()의 차이점은 다음과 같습니다.

for 루프는 객체 자체의 속성뿐만 아니라, 프로토타입 체인 등을 통해 객체 외부에서 연결(link)된 속성까지 모두 셉니다.
Object.keys() 메서드는 기본적으로 객체 자신의 열거 가능한 속성만 셉니다. 연결된 속성은 포함하지 않습니다.

여기서 열거(enumeration)란 '셈(counting)'을 의미하는 또 다른 표현입니다.

그렇다면 '연결된 속성'이란 무엇일까요?

앞선 Object.keys() 예제를 다시 사용해 보겠습니다. 이번에는 __proto__ 속성을 이용해 dog 객체를 animal이라는 객체에 연결(link)합니다.

// 새로운 객체
let animal = {
  fourLegs: true,
}

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

// dog 객체를 animal 객체에 연결
dog.__proto__ = animal

var count = Object.keys(dog).length
console.log(count)
// 결과: 4

dog와 animal의 전체 속성 개수는 5개인데, 두 객체를 연결하고 개수를 세었는데 왜 결과는 4일까요?

그 이유는 Object.keys()가 객체 자신의 (열거 가능한) 속성만 셀 뿐, 연결된 속성은 포함하지 않기 때문입니다. 따라서 위 예제에서 animal 객체의 fourLegs 속성은 개수에 포함되지 않습니다.

이번에는 같은 상황에서 for 루프로 속성을 세어 보겠습니다.

const animal = {
  fourLegs: true,
}

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

// dog 객체를 animal 객체에 연결
dog.__proto__ = animal

let count = 0

for (properties in dog) {
  count = count + 1
}

console.log(count)
// 결과: 5

이번에는 모든 5개의 속성이 카운트됩니다. Object.keys()와 달리 for 루프는 객체의 모든 속성을 세기 때문입니다. 여기에는 연결된 객체의 속성도 포함됩니다.

이처럼 어떤 방법을 선택하느냐에 따라 결과가 달라질 수 있으므로 주의해야 합니다.

정리

객체의 속성 개수를 세는 방법은 두 가지입니다. for 루프 또는 Object.keys() 메서드를 사용할 수 있습니다.
연결된 객체의 속성까지 개수에 포함하려면 for 루프를 사용하세요.
객체 자신의 열거 가능한 속성만 세려면 Object.keys()를 사용하세요.