[Javascript] 객체가 비어있는지 여부 체크하는 방법

자바스크립트 객체가 빈 객체인지 여부를 체크하는 방법을 소개드립니다.

 

 

자바스크립트 객체 비어있는지 여부 체크하는 방법

 

 

  빈 객체 리터럴과 비교하여 확인하기??  

 

어떤 객체가 빈 객체인지 확인하려면 어떻게 해야할까요. 별 생각없이 빈 리터럴 객체와 비교해서 체크할 수 있지 않을까? 하는 생각이 떠오를 수 도 있는데요.

 

 

 직접 확인해보기 위해 먼저 빈 객체 두개를 비교연산자인 등호연산자를 사용하여 비교해보겠습니다.

 값을 비교하는 것이 아니라 두 객체가 참조하고 있는 주소를 비교하기 때문에 false가 출력됩니다. 그렇기 때문에 리터럴 객체와 비교하는 방법으로는 빈 객체인지 여부를 확인 할 수 없습니다.

 

 또한 빈 객체가 아닌 어떤 객체가 있을때, 이 객체가 비어있는지를 확인하기 위해 리터럴 객체와 비교해도 false가 출력됩니다. 당연한 결과지만 순간 잘못 생각하는 경우가 종종 일어날 것 같아 직접 확인해봤습니다.

 

 

이제 진짜로 빈 객체인지 확인하는 방법을 알아보겠습니다.

 

 

 객체가 비었는지 확인하는 방법  

 

객체가 비었는지 확인하는 방법은 사실 여러가지가 있습니다. 오늘 소개할 방법은 라이브러리를 사용하지 않고 순수 자바스크립트만을 이용하여 확인하는 방법입니다.

 

근데 자바스크립트 ECMA5를 기준으로 이전과 이후 방식이 다르니 두가지 방법을 모두 소개드리겠습니다.

 

 

1. ES5+

function isEmpty(obj) {
    return Object.keys(obj).length === 0;
}

ECMA5 이후 버전에서는 내장객체인 Object에 keys 메서드가 추가됐습니다. 이를 이용해 확인하려는 객체에 키 값의 길이가 0임을 통해 객체가 비어있음을 확인할 수 있습니다.

 

 

2. ECMA5 이전

function isEmpty(obj) {
    for(var prop in obj) {
            return false;
    }
    return true;
}

 

for...in 구문을 통해 열거 가능한 프로퍼티가 하나라도 있으면 빈 객체가 아니기 때문에 false를 리턴합니다. 그렇지 않은 경우에는 true를 리턴하여 빈 객체임을 확인할 수 있습니다.