HTML DOM의 console.log() 메서드는 브라우저 콘솔(console)에 메시지를 출력하는 데 사용됩니다. 콘솔은 주로 코드 디버깅과 테스트 목적으로 활용되며, 출력할 메시지는 문자열(string)뿐만 아니라 객체(object)나 배열(array) 등 다양한 자료형이 될 수 있습니다.
문법(Syntax)
console.log() 메서드의 기본 문법은 다음과 같습니다.
console.log(msg)
여기서 msg에는 문자열, 배열 또는 객체를 전달할 수 있습니다. 또한 여러 개의 값을 쉼표(,)로 구분하여 한 번에 여러 인수를 전달하는 것도 가능합니다.
예제(Example)
다음은 console.log() 메서드를 활용한 간단한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript console.log() Method</h1>
<p>F12 키를 눌러 콘솔 창에서 메시지를 확인해 보세요.</p>
<button type="button" onclick="logConsole()">LOG</button>
<script>
function logConsole(){
console.log("Following are some animal names");
var Arr1 = ["dog", "cat", "monkey", "lion" ];
console.log(Arr1);
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 버튼 하나가 화면에 표시되고, LOG 버튼을 클릭한 후 F12 키로 개발자 도구의 콘솔 탭을 열면 아래와 같은 결과를 확인할 수 있습니다.
- 첫 번째 줄: "Following are some animal names"라는 문자열 메시지
- 두 번째 줄: ["dog", "cat", "monkey", "lion"] 배열 전체
코드 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
1. 버튼 생성 및 이벤트 연결
먼저 클릭 시 logConsole() 함수를 실행하는 LOG 버튼을 만들었습니다.
<button type="button" onclick="logConsole()">LOG</button>
2. logConsole() 함수 내부 처리
logConsole() 함수 안에는 console.log() 메서드가 포함되어 있습니다. 먼저 단순 문자열을 인수로 전달하여 출력하고, 그다음 길이가 4인 동물 이름 배열을 전달합니다.
function logConsole(){
console.log("Following are some animal names");
var Arr1 = ["dog", "cat", "monkey", "lion" ];
console.log(Arr1);
}console.log()는 호출된 순서대로 메시지를 콘솔에 순차적으로 출력하기 때문에, 문자열이 먼저 표시되고 그다음 배열이 표시됩니다.
참고 사항
console.log()는 여러 값을 쉼표로 구분해 한 번에 출력할 수도 있습니다. 예를 들어 console.log("동물:", Arr1)처럼 작성하면 라벨과 데이터를 함께 깔끔하게 확인할 수 있어 디버깅 시 매우 유용합니다.