[JS]prompt, console.log, alert, document.write

자바스크립트에서는 웹 브라우저와 상호작용할 때 자주 사용하는 메서드들이 있다. 그중에서 prompt, console.log, alert, document.write는 각각 다른 목적과 특성을 가지고 있으며, 사용자와의 인터랙션을 다르게 처리한다. 이 글에서는 이 세 가지 메서드를 비교하고, 각각의 특징과 사용 용도를 살펴보겠다.

prompt

prompt는 사용자에게 입력을 요청하는 대화 상자를 띄우는 메서드이다. 사용자로부터 텍스트 입력을 받을 수 있도록 하며, 사용자가 입력한 값을 반환한다. 이 메서드는 문자열 형식으로 값을 반환하므로, 숫자나 다른 데이터 타입을 받을 때는 반드시 형 변환을 해야 한다.

var userInput = prompt("좋아하는 음식을 입력하세요");
alert("좋아하는 음식: "+userInput);

console.log

console.log는 자바스크립트 코드에서 디버깅을 할 때 가장 많이 사용하는 메서드이다. 콘솔에 메시지를 출력하여 변수의 값, 함수 실행 결과, 객체 정보 등을 확인할 수 있다. 이 메서드는 출력용이며, 화면에 직접적인 인터랙션을 제공하지 않는다.

var message = "안녕하세요";
console.log(message);
var x = 10;
var y = 20;
console.log(x + y);  //30

alert

alert는 사용자가 화면에서 확인할 수 있는 경고 창을 띄우는 메서드이다. 이 메서드는 메시지를 표시하고, 사용자가 "확인" 버튼을 클릭해야만 다음 코드로 진행된다. 주로 알림용으로 사용되며, 화면에서 사용자에게 정보를 제공한다.

alert("작업이 완료되었습니다!");
alert("이 작업은 되돌릴 수 없습니다!");

document.write

document.write는 HTML 문서에 직접 텍스트를 삽입하는 메서드로, 페이지 로딩 중 또는 새로 고침 시 사용되며 문서의 콘텐츠를 변경할 수 있다. 

document.write("<h1>Hello, World!<h1>");
document.write("♪(^∇^*)");

그러나 페이지가 처음 로드되거나 새로 고침될 때 실행되면 기존 콘텐츠를 덮어쓴다. 특히 페이지가 이미 렌더링된 후에 document.write가 호출되면, 현재 페이지의 모든 HTML이 지워지고 새로운 내용만 화면에 표시된다. 따라서 이 메서드는 사용에 주의가 필요하며, 페이지 렌더링 후에는 다른 방법으로 동적으로 콘텐츠를 추가하는 것이 좋다.

메서드 비교

메서드	목적	반환값	화면 상 표시	특징
prompt	사용자로부터 입력 받기	문자열	입력창과 "확인"/"취소" 버튼이 있는 대화 상자	사용자 입력 대기, 입력 값 반환
console.log	콘솔에 메시지 출력	없음	브라우저 개발자 도구의 콘솔에 출력	디버깅 및 로그 용도
alert	사용자에게 경고 또는 정보 표시	없음	팝업 형태의 경고창이 표시	경고 메시지 표시, 사용자 대기
document.write	HTML 문서에 텍스트 출력	없음	문서의 내용으로 텍스트 또는 HTML 요소를 추가	페이지 내용을 덮어쓸 수 있음