현재 날짜와 시간을 사무실의 영업 시간과 비교해야 하는 상황을 가정해 보겠습니다. 현재 시간을 기준으로 사무실이 지금 영업 중인지 아니면 영업 종료 상태인지 화면에 표시해야 합니다.
이럴 때 Date 객체에서 현재 시간(hour) 값을 가져온 뒤, 삼항 연산자(ternary operator)를 사용하면 아주 간단하게 처리할 수 있습니다.
삼항 연산자는 조건 ? 참일 때 값 : 거짓일 때 값 형태로 작성되며, 짧은 조건 분기를 한 줄로 표현할 수 있어 이런 경우에 유용합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p class="closeOrOpened"></p>
<script>
const gettingHours = new Date().getHours()
const actualHours = (gettingHours >= 10 && gettingHours < 18) ? 'Open' : 'Closed';
document.querySelector('.closeOrOpened').innerHTML = actualHours;
</script>
</body>
</html>위 프로그램을 실행하려면 파일 이름을 “index.html”로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
Open
위 예제에서는 오전 10시부터 오후 18시(6시) 미만까지를 영업 시간으로 설정했습니다. 만약 현재 시간이 10시 이전이라면 조건이 거짓(false)이 되어 Closed가 출력됩니다.
즉, gettingHours >= 10 && gettingHours < 18 조건이 참이면 ‘Open’, 거짓이면 ‘Closed’가 할당되어 페이지에 바로 표시되는 구조입니다.