JavaScript의 console.log() 메서드는 브라우저 개발자 도구의 콘솔(console)에 메시지를 출력하는 가장 기본적이면서도 널리 사용되는 디버깅 도구입니다.
이 메서드는 문자열뿐만 아니라 숫자, 객체, 배열 등 다양한 타입의 값을 그대로 출력할 수 있어, 코드 실행 흐름을 확인하거나 변수의 상태를 점검할 때 매우 유용합니다.
다음은 JavaScript console.log() 메서드의 사용 예제입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>console.log() Example</h1>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 콘솔에서 출력 결과를 확인할 수 있습니다</h3>
<script>
let test = {
a:22,
b:'HELLO',
c:44,
}
console.log(test);
console.log('HELLO WORLD');
</script>
</body>
</html>출력 결과
페이지를 실행하면 아래와 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 −
코드 설명
위 예제에서는 test라는 객체를 생성한 뒤 console.log(test)를 호출하여 객체 전체를 콘솔에 출력했습니다. 이어서 console.log('HELLO WORLD')를 통해 단순 문자열도 함께 출력합니다.
객체를 출력하면 콘솔에서 해당 객체의 속성과 값(a: 22, b: 'HELLO', c: 44)을 구조화된 형태로 확인할 수 있으며, 개발자 도구(F12)의 Console 탭에서 결과를 볼 수 있습니다.