개요
자바스크립트에서 배열 안에 들어 있는 객체의 개수를 확인하려면 Object.prototype.__proto__ 속성을 활용할 수 있습니다. 이 방식은 각 요소의 프로토타입 체인을 검사하여 일반 객체(Object)인지 판별하고, 해당하는 요소만 카운트하는 원리로 동작합니다.
동작 원리
객체 리터럴로 생성된 값은 프로토타입 체인이 Object.prototype에서 끝나기 때문에 __proto__.__proto__의 값이 null이 됩니다. 반면 배열 자체는 Array.prototype을 한 단계 더 거쳐 Object.prototype에 연결됩니다. 이 차이를 이용하면 배열 내부의 순수 객체만 골라내어 개수를 셀 수 있습니다.
예제
다음 코드를 실행하면 배열에 포함된 객체의 개수를 확인할 수 있습니다.
<html>
<head>
<title>JavaScript Count Array Objects</title>
</head>
<body>
<script>
var len = 0;
var myArr = [{"Hello World!":"Welcome!","int":10},{"Learn":"Share","int":20},{"Tutorials":"Quiz","int":30}];
myArr.forEach(function(val){
if(!val.__proto__.__proto__){
len++;
}
});
document.write("Total Objects: "+len);
</script>
</body>
</html>실행 결과
Total Objects: 3
참고: 더 간단한 최신 방식
최신 자바스크립트 환경에서는 filter() 메서드와 typeof 연산자를 조합하는 방법이 더 직관적이고 널리 사용됩니다.
const count = myArr.filter(item => item !== null && typeof item === 'object').length;
console.log("Total Objects: " + count); // 3__proto__는 표준은 아니지만 대부분의 브라우저에서 지원되며, 실무에서는 위와 같은 filter() 기반 접근이 가독성과 호환성 면에서 권장됩니다.