JavaScript / alert, confirm, prompt 대화상자 사용법과 반환값

브라우저의 기본 대화상자에는 메시지를 알리는 alert(), 확인 여부를 받는 confirm(), 짧은 문자열을 입력받는 prompt()가 있습니다. 세 함수 모두 대화상자를 열지만 반환값은 각각 undefined, 불리언, 문자열 또는 null로 다릅니다. 사용자가 누른 버튼을 처리할 때 이 차이를 확인해야 합니다.

세 대화상자의 역할과 반환값

화면 모양과 버튼 문구는 브라우저·운영체제에 따라 다릅니다. 세 함수는 보통 페이지의 실행을 일시적으로 막는 모달 대화상자를 사용하므로 반복해서 띄우면 사용하기 불편합니다. 브라우저가 탭 전환 등의 상황에서 대화상자를 표시하지 않거나 기다리지 않을 수도 있습니다.

alert(): 메시지만 전달합니다

alert()는 메시지를 보여 주고 사용자가 닫을 때까지 기다리는 용도입니다. 반환값으로 ‘확인’을 눌렀는지 판별하는 코드를 만들 수 없습니다. 페이지가 열리자마자 띄우기보다 버튼을 눌렀을 때처럼 사용자가 예상하는 상황에 연결하는 편이 좋습니다.

const result = window.alert('저장이 완료되었습니다.');
console.log(result); // undefined

알림을 페이지 안에 계속 보여 주어야 하거나 도움말 링크를 넣어야 한다면 일반 HTML 영역이나 적절한 대화상자 UI를 사용하세요. 기본 alert()의 본문을 웹페이지처럼 꾸밀 수는 없습니다. MDN의 Window.alert() 문서에서 반환값과 표시 조건을 확인할 수 있습니다.

confirm(): 확인과 취소를 구분합니다

confirm()은 확인하면 true, 취소하면 false를 돌려줍니다. 삭제처럼 사용자가 선택해야 하는 작업에서는 반환값을 검사한 뒤 다음 작업을 실행하세요. 다만 대화상자가 표시되지 않는 환경에서도 false가 나올 수 있으므로 중요한 작업의 유일한 사용자 인터페이스로 쓰기 전에 환경을 고려해야 합니다.

const accepted = window.confirm('이 설정을 적용할까요?');
if (accepted) {
  console.log('적용을 진행합니다.');
} else {
  console.log('변경하지 않습니다.');
}

조건문에서 confirm() 호출 자체가 불리언 값을 주므로 바로 if (window.confirm(...)) 형태로 쓸 수도 있습니다. 동작을 검토하거나 테스트할 때는 위처럼 결과를 변수에 담아 두면 어느 선택에서 무슨 일이 일어나는지 더 분명합니다. MDN의 Window.confirm() 문서에 반환값과 브라우저 제약이 설명되어 있습니다.

prompt(): 입력 문자열과 취소를 구별합니다

prompt()의 두 번째 인수는 입력란에 미리 보일 기본값입니다. 확인을 누르면 입력 문자열을 반환하며, 아무것도 입력하지 않고 확인하면 빈 문자열 ""입니다. 취소를 누르면 null이므로 빈 문자열과 같은 경우로 처리하지 마세요.

const answer = window.prompt('이름을 입력하세요.', '민지');
if (answer === null) {
  console.log('입력을 취소했습니다.');
} else if (answer.trim() === '') {
  console.log('내용을 입력해 주세요.');
} else {
  console.log(answer.trim());
}

입력값은 숫자를 입력해도 문자열입니다. 수치가 필요한 경우에는 빈 값과 취소를 먼저 확인하고 숫자로 변환한 뒤 유효한지 검사하세요. 비밀번호나 긴 내용, 입력 검증과 접근성이 중요한 양식에는 페이지 안의 명시적인 폼이 더 적합합니다. MDN의 Window.prompt() 문서를 참고하세요.

전체 예제: 세 반환값 직접 확인하기

아래 코드를 UTF-8로 browser-dialogs.html에 저장하고 브라우저에서 엽니다. 페이지가 열릴 때 자동으로 대화상자를 띄우지 않습니다. 각 버튼을 누른 뒤 대화상자를 닫으면 페이지의 결과 문단에서 반환값을 확인할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>브라우저 기본 대화상자 실습</title>
</head>
<body>
<button id="show-alert" type="button">alert 열기</button>
<button id="show-confirm" type="button">confirm 열기</button>
<button id="show-prompt" type="button">prompt 열기</button>
<p id="output" aria-live="polite">위 버튼 하나를 눌러 반환값을 확인하세요.</p>
<script>
const output = document.querySelector('#output');

document.querySelector('#show-alert').addEventListener('click', () => {
  const result = window.alert('작업을 확인하세요.');
  output.textContent = `alert() 반환값: ${String(result)}`;
});

document.querySelector('#show-confirm').addEventListener('click', () => {
  const accepted = window.confirm('설정을 적용할까요?');
  output.textContent = accepted ? 'confirm(): 확인(true)' : 'confirm(): 취소(false)';
});

document.querySelector('#show-prompt').addEventListener('click', () => {
  const name = window.prompt('이름을 입력하세요.', '민지');
  output.textContent = name === null
    ? 'prompt(): 취소(null)'
    : `prompt(): ${JSON.stringify(name)}`;
});
</script>
</body>
</html>

‘alert 열기’를 닫으면 undefined가 나옵니다. ‘confirm 열기’에서 확인과 취소를 각각 눌러 true와 false를 비교하세요. ‘prompt 열기’에서 이름을 입력해 확인하고, 입력란을 비워 확인하고, 취소하는 세 경우를 비교하면 문자열·빈 문자열·null의 차이를 볼 수 있습니다. 결과는 textContent로 표시하므로 입력한 문자열이 HTML로 실행되지 않습니다.