HTML DOM의 console.assert() 메서드는 첫 번째 인수로 전달된 표현식이 false일 때만 콘솔에 메시지를 출력하는 디버깅 도구입니다. 이 메서드는 개발자가 코드 실행 중 조건을 검증하고, 기대와 다른 결과가 나왔을 때 콘솔에 경고 메시지를 표시하도록 설계되었습니다.
검증할 표현식은 첫 번째 매개변수로, 표시할 메시지는 두 번째 매개변수로 각각 전달됩니다.
문법(Syntax)
console.assert() 메서드의 기본 문법은 다음과 같습니다.
console.assert(assertion, msg);
- assertion: true 또는 false를 반환하는 임의의 표현식입니다.
- msg: 콘솔에 표시할 JavaScript 문자열 또는 객체입니다.
assertion이 false로 평가될 경우에만 msg가 콘솔에 출력됩니다. 반대로 assertion이 true이면 아무런 동작도 하지 않습니다.
예제(Example)
console.assert() 메서드의 실제 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.assert example</h1>
<p>To view the message press F12 on the keyboard and go to the console tab.</p>
<script>
console.assert(document.getElementById("Sample"), "You have no element with ID 'Sample' in this document");
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 브라우저에는 다음과 같은 화면이 나타납니다.
키보드에서 F12 키를 눌러 개발자 도구를 연 뒤 Console(콘솔) 탭으로 이동하면 다음과 같은 메시지를 확인할 수 있습니다.
예제 해설
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 조건 평가
console.assert() 메서드와 함께 getElementById() 메서드를 사용하여 id가 “Sample”인 요소를 찾습니다. 그러나 HTML 문서 내에 해당 id를 가진 요소가 존재하지 않으므로, getElementById()는 null을 반환하고 이는 false로 평가됩니다.
2. 메시지 출력
두 번째 매개변수에 전달된 메시지는 첫 번째 매개변수가 false일 때만 화면에 표시됩니다. 이 예제에서는 “You have no element with ID 'Sample' in this document”(이 문서에 ID가 'Sample'인 요소가 없습니다)라는 메시지가 콘솔에 출력됩니다.
console.assert(document.getElementById("Sample"), "You have no element with ID 'Sample' in this document");정리
console.assert() 메서드는 조건이 거짓일 때만 메시지를 출력하기 때문에, 코드의 특정 상태를 빠르게 검증하고 싶을 때 유용하게 활용할 수 있습니다. if문과 console.log()를 조합하는 것보다 코드가 간결해지며, 디버깅 과정에서 가독성을 높여주는 장점이 있습니다.