짧게 말하면
==는 강제 형변환 하여 변수 안의 값이 같으면 true를 반환한다.
ex) "1" = 1 와 같이 문자열 1과 숫자 1을 같다고 인식한다.
반면에 === 3개는 값 + 자료형을 비교하여 true, false를 반환한다.
ex) "1" = 1 는 false가 된다.
switch는 아래와 같이 자바와 똑같다.
case default를 사용할 수 있다.
switch (조건) {
case 값 :
문구
break;
default:
문구
break;
}
그리고 조건에 true라고 설정하고
값 부분에 식을 넣을 수도 있다.
값에 true나 false를 반환하는 식을 넣으면 조건에 true라고 했을경우 true인 case가 실행이 된다.
예제를 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area1{
border: 1px solid red;
height: 200px;
}
</style>
</head>
<body>
<h1>자바와 다른 연산자</h1>
<h3>=== 연산자와 !== 연산자</h3>
<p>값과 자료형 둘 다 일치하는지 / 일치하지 않는지 확인할 때 사용한다.</p>
<button onclick="testOp();">확인하기</button>
<div id="area1" class="area"></div>
<script>
function testOp(){
var area1 = document.getElementById("area1");
var check1 = 1;
var check2 = "1";
// 등호 2개
area1.innerHTML += "check1 == 1 : " + (check1 == 1) + "<br>";
area1.innerHTML += 'check1 == "1" : ' + (check1 == "1") + "<br>";
area1.innerHTML += 'check2 == 1 : ' + (check2 == 1) + "<br>";
area1.innerHTML += 'check2 == "1" : ' + (check2 == "1") + "<br>";
// 등호 3개(값 + 자료형 비교)
area1.innerHTML += 'check1 === 1 : ' + (check1 === 1) + "<br>";
area1.innerHTML += 'check1 == "1" : ' + (check1 === "1") + "<br>";
}
</script>
<hr>
<h3>연산자를 이용한 짧은 조건문 테스트</h3>
<button onclick="checkLogic();">확인하기</button>
<script>
function checkLogic(){
var input = Number(window.prompt("숫자를 입력하세요"));
//짧은 조건문 : ||는 앞에 조건이 거짓이면 뒤에 연산을 실행함
// &&는 앞에 조건이 참이면 뒤에 연산을 실행함
input % 2 == 0 || alert("홀수입니다.");
input % 2 == 0 && alert("짝수입니다.");
}
</script>
<hr>
<h3>switch문 테스트</h3>
<button onclick="switchTest();">실행확인</button>
<script type="text/javascript">
function switchTest() {
var today = new Date();
var hour = today.getHours();
switch (true) {
case hour == 12 :
alert("점심시간입니다.");
break;
case hour > 12 :
alert("수업시간입니다.");
break;
default:
alert("기본값입니다.")
break;
}
}
</script>
</body>
</html>