[JavaScript] Object.entries(obj)가 반환하는 건 맵이 아닌 '배열'이다!

나는 문제를 풀다가 크나큰 착각을 하고야 말았다!!

내가 무슨 착각을 했는지는 거두절미하고 바로 문제를 풀며 알아보자.

 

 

---

 

문제: 프로퍼티 개수 세기

객체 프로퍼티 개수를 반환하는 함수 count(obj)를 만들어보세요.

let user = {
  name: 'John',
  age: 30
};

alert( count(user) ); // 2

가능한 짧게 코드를 작성해 보세요.

주의: 심볼형 프로퍼티는 무시하고 ‘일반’ 프로퍼티 개수만 세주세요.

 

---

정말 쉬워보이는 문제라 금방 코드를 쓰고 실행을 했다.

그런데 어라..? 출력 결과가 이상하게 나왔다.

 

 

내가 쓴 코드(틀림)

let user = {
  name: 'John',
  age: 30
};

console.log( count(user) );

function count(obj) {
  return Object.entries(obj).size;
}

실행 결과

 

어라?

출력 결과로 2가 나와야하는데 왜 undefined가 나오는 거지...?

 

 

내가 생각한 방법은 다음과 같았다.

 

  1. Object.entries(obj)로 자료구조를 '맵'으로 만들어주자. 😊
  2. Object.entries(obj).size를 해줘서 요소의 개수를 반환하면 끝! 😆

 

...

 

이 포스팅으 읽는 여러분은 내가 어디에서 착각을 했는지 눈치 챘을까?

 

그렇다.

이 포스팅의 제목 그대로

Object.entries(obj)가 반환하는 건 맵이 아니다! 단순한  배열이다!!!

 

---

Object.entries(obj)를 맵으로 바꾸는 방법

Object.entries(obj)는 [키, 값] 쌍을 담은 배열을 반환한다.

 

예시:

let user = {
  name: "John",
  age: 30
};

console.log( Object.entries(user) );

실행 결과

 

실행된결과가 맵과 유사해보이는 바람에 맵으로 착각해버렸다. 그러나!!! 명심하자!!!  이건 단순한 배열일뿐이다!!

 

맵은 new Map() 메서드로만 생성할 수 있다.

 

그러므로 Object.entries(obj)의 결과를 맵으로 바꾸고 싶으면 다음과 같이 쓰면 된다.

 

let map = new Map(Object.entries(obj));

 

이걸 문제에 적용하면 다음과 같다.

let user = {
  name: 'John',
  age: 30
};

console.log( count(user) ); // 2

function count(obj) {
  return new Map(Object.entries(obj)).size;
}

실행 결과

이렇게 하면 원하는대로 프로퍼티 개수를 구할 수 있다.

 

 

 

참고로 공식 답안은 다음과 같다.

function count(obj) {
  return Object.keys(obj).length;
}

 

---

참고 문서

https://ko.javascript.info/map-set#ref-196

맵과 셋