자바스크립트에서 결과물을 화면에 표시하는 방법은 크게 네 가지가 있습니다. 각 방법은 용도와 특징이 다르므로, 상황에 맞게 선택하는 것이 중요합니다. 아래에서 각각의 사용법과 예제 코드를 살펴보겠습니다.
1. innerHTML 속성으로 HTML 요소에 출력하기
가장 많이 사용되는 방식으로, document.getElementById()로 특정 HTML 요소를 선택한 뒤 innerHTML 속성에 값을 할당하여 화면에 내용을 표시합니다.
예제
<html>
<body>
<p id="display"></p>
<script>
document.getElementById("display").innerHTML = 10 + 10;
</script>
</body>
</html>
실행 결과
20
이 방법은 웹 페이지의 기존 요소 내용을 동적으로 변경할 수 있어서 실무에서 가장 널리 활용됩니다.
2. document.write()로 출력하기
document.write()는 호출된 위치에 그대로 내용을 작성하는 방식입니다. 간단한 테스트에는 편리하지만, 페이지 로딩이 완료된 후에 호출하면 기존 문서 전체를 덮어쓰기 때문에 실제 서비스에서는 사용을 권장하지 않습니다.
예제
<html> <body> <script> document.write(2 + 3); </script> </body> </html>
실행 결과
5
3. console.log()로 콘솔에 출력하기
console.log()는 브라우저 개발자 도구(F12)의 콘솔 창에 결과를 출력하는 방법입니다. 화면에는 표시되지 않으므로 디버깅과 값 확인 목적으로 주로 사용됩니다.
예제
<html> <body> <script> console.log(2 + 3); </script> </body> </html>
디버거 콘솔에 표시되는 결과
5
특히 JSON 문자열이나 대용량 데이터를 다룰 때는 console.log()가 가장 좋은 선택입니다. 객체 구조를 펼쳐서 자세히 확인할 수 있고, 성능 측정이나 오류 추적에도 유용하기 때문입니다.
4. alert() 경고창으로 출력하기
alert()은 브라우저에 팝업 형태의 경고창을 띄워 값을 표시하는 방법입니다. 사용자에게 즉각적인 알림을 전달해야 할 때 유용하지만, 실행 흐름이 멈추기 때문에 남용하면 안 됩니다.
예제
<html> <body> <script> alert(2 + 3); </script> </body> </html>
경고창에 표시되는 결과
5
마무리 정리
네 가지 방법을 요약하면 다음과 같습니다.
- innerHTML — 웹 페이지 요소에 직접 출력, 실무에서 가장 많이 사용
- document.write() — 문서에 바로 작성, 테스트 용도로만 제한적으로 사용
- console.log() — 개발자 도구 콘솔 출력, 디버깅 및 대용량 데이터 확인에 최적
- alert() — 팝업 경고창 출력, 간단한 알림 용도
상황과 목적에 맞는 출력 방법을 선택하면 코드의 가독성과 유지보수성이 모두 향상됩니다.