HTML DOM의 console.count() 메서드는 해당 메서드가 호출된 횟수를 콘솔에 기록하는 기능을 제공합니다. 선택적으로 label 매개변수를 전달할 수 있으며, 레이블을 사용하면 서로 다른 항목별로 호출 횟수를 독립적으로 관리할 수 있어 디버깅 시 매우 유용합니다.
문법
console.count() 메서드의 기본 문법은 다음과 같습니다.
console.count( [label] );
여기서 label은 선택적 매개변수로, 문자열(string) 타입입니다. 지정한 레이블별로 해당 레이블과 함께 몇 번 호출되었는지를 출력합니다.
예제
다음 예제를 통해 console.count() 메서드의 동작 방식을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.count() method</h1>
<p>Press F12 to view the message in the console view.</p>
<button type="button" onclick="count()">COUNT</button>
<script>
function count(){
for(var i=0;i<6;i++){
if(i>3)
console.count("Label2");
else
console.count("Label1");
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
COUNT 버튼을 클릭한 후 개발자 도구(F12)의 콘솔 탭을 확인해 보면 아래와 같은 결과를 볼 수 있습니다.
코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저 사용자가 클릭하면 count() 함수를 실행하는 COUNT 버튼을 생성했습니다.
<button type="button" onclick="count()">COUNT</button>
count() 함수 내부의 for 반복문은 총 6번(i = 0~5) 실행됩니다. 조건문에 따라 i가 3 이하일 때는 "Label1"로, i가 4 이상일 때는 "Label2"로 console.count()를 호출합니다.
function count(){
for(var i=0;i<6;i++){
if(i>3)
console.count("Label2");
else
console.count("Label1");
}
}그 결과 Label1은 4번, Label2는 2번 호출됩니다. 출력 결과에서도 Label1의 마지막 값이 4, Label2의 마지막 값이 2로 표시되는 것을 확인할 수 있습니다.
정리
console.count()는 코드의 특정 지점이나 함수가 몇 번 실행되었는지 추적할 때 활용할 수 있는 간편한 디버깅 도구입니다. 레이블을 활용하면 여러 위치의 호출 횟수를 한눈에 구분하여 확인할 수 있습니다.