코린이
혼공JS Chapter03 본문
조건문
if 조건문은 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는 구문이다.
이때의 조건은 2장에서 나온 불 자료형을 의미한다.
비교 연산자와 논리 연산자를 활용해 조건을 만들고, 조건 분기를 사용한다.
if 조건문
if(불 값이 나오는 표현식){
불 값이 참일 때 실행할 문장
}
ex)
let x = 5;
if(x < 10){
document.write("TRUE");
}
위에 예제는 변수 x가 10보다 작으면 참을 나타낸다.
ex) 오전 오후 구분하기
const date = new Date() //현재 날짜와 시간을 갖는 객체
const hour = date.getHours() //현재시간을 0~23사이의 값으로 출력하는 메소드
if(hour < 12){
document.write("오전입니다.")
}
if(hour > 12){
document.write("오후입니다.")
}
이렇게 if문으로 현재 시간이 오전인지 오후인지 알 수 있다.
if문을 두 번 쓰는 것보다 더 간편하게 쓰는 방법이 있는데 그것은 else구문이다
위에서 했던 오전인지 오후인지 확인하는 코드로 확인
const date = new Date() //현재 날짜와 시간을 갖는 객체
const hour = date.getHours() //현재시간을 0~23사이의 값으로 출력하는 메소드
if(hour < 12){
// hour < 12 참일 때 실행
document.write("오전입니다.")
} else{
// hour < 12 거짓일 때 실행
document.write("오후입니다.")
}
이렇게 코드가 더 깔끔하고 간결하게 변했다.
중첩 조건문
조건문 안에 조건문을 중첩해 사용하는 것을 중첩 조건문이라고 한다.
if(불 값이 나오는 표현식1) {
if(불 값이 나오는 표현식2) {
표현식이 참일 때
} else{
표현식이 거짓일 때
}
} else{
if(불 값이 나오는 표현식3) {
표현식이 참일 때
} else{
표현식이 거짓일 때
}
}
ex) 중첩 조건문으로 시간 파악
const date = new Date() //현재 날짜와 시간을 갖는 객체
const hour = date.getHours() //현재시간을 0~23사이의 값으로 출력하는 메소드
if(hour < 8){
document.write("일어납니다.")
} else{
if(hour < 13){
document.write("점심을 먹습니다.")
}
} else {
if(hour < 18){
document.write("저녁을 먹습니다.")
}
}
마지막으로 if else if 조건문이 있다.
중첩 조건문에서 중괄호를 생략한 형태로, 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용한다.
if(불 값이 나오는 표현식) {
문장
} else if(불 값이 나오는 표현식){
문장
} else if(불 값이 나오는 표현식){
문장
} else {
문장
}
위에 사용했던 예제를 변환 해보겠습니다.
const date = new Date() //현재 날짜와 시간을 갖는 객체
const hour = date.getHours() //현재시간을 0~23사이의 값으로 출력하는 메소드
if(hour < 8){
document.write("일어납니다.")
} else if(hour < 13){
document.write("점심을 먹습니다.")
} else if(hour < 18){
document.write("저녁을 먹습니다.")
else {
document.write("잠을 잡니다.")
}
switch 조건문
switch 조건문 기본 형태
switch (표현식) {
case 값1:
// 표현식이 값1과 일치할 때 실행되는 코드
break;
case 값2:
// 표현식이 값2와 일치할 때 실행되는 코드
break;
// 추가적인 case 문 가능
default: //생략 가능
// 표현식이 어떠한 case에도 일치하지 않을 때 실행되는 코드
}
break 키워드는 switch 조건문이나 반복문을 나가기 위해 사용하는 키워드이다.
break을 만나면 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져나간다.
switch 조건문을 if 조건문으로 변환하기
모든 switch 조건문은 if 조건문으로 바꿀 수 있다. 하지만 if문을 switch문으로 대체하기는 어렵다.
그렇지만 불가능하지는 않다.
<script>
//변수 선언
const date = new Date()
const hour = date.getHours()
//조건문
switch(true){
case hour < 11:
//표현식 hour < 11 참일 때 실행
alert("아침 먹을 시간")
break
case hour < 15:
//표현식 hour < 11 참일 때 실행
alert("점심 먹을 시간")
break
default:
//모든 식이 거짓일 때 실행
alert("저녁 먹을 시간")
break
}
</script>
조건부 연산자
불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과
자바스크립트에서는 항을 3개 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자라고 부르기도 한다.
<script>
const input = prompt("숫자를 입력하세요", '')
const number = Number(input)
const result = (number >= 0) ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.'
alert(result)
</script>
위에 예제에는 0 이상의 숫자를 입력하면 첫 번째 조건인 0 이상의 숫자입니다가 출력되고 0보다 작은 수를 입력하면 0 보다 작은 숫자입니다가 출력된다.
논리합 연산자를 사용한 짧은 조건문
true || OOO
논리합 연산자를 사용한 표현식은 뒤에 어떠한 값이 들어가도 항상 참이다.
논리곱 연산자를 사용한 짧은 조건문
false && OOO
논리곱 연산자는 양변이 모두 참일 때만 참이기 때문에 표현식에는 항상 거짓입니다. 논리곱은 좌변이 거짓이면 우변을 실행하지 않는다.
기본 미션
p.139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기
두 번째 조건문은 논리 연산자 &&를 사용하여 첫 번째 조건문을 하나로 합쳐 표현한 것으로 x가 10보다 크고 동시에 20보다 작을 때에만 해당 조건문이 실행된다. 두 코드 모두 동일한 조건을 검사하며 같은 결과를 출력한다.
선택 미션
p.152의 <태어난 연도를 입력받아 띠 출력하기> 실행하여 본인의 띠 출력한 화면 캡처하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
const rawInput = prompt("태어난 해를 입력하세요", "");
const year = Number(rawInput);
const e = year % 12;
let result;
if (e === 0) {
result = "원숭이";
} else if (e === 1) {
result = "닭";
} else if (e === 2) {
result = "개";
} else if (e === 3) {
result = "돼지";
} else if (e === 4) {
result = "쥐";
} else if (e === 5) {
result = "소";
} else if (e === 6) {
result = "호랑이";
} else if (e === 7) {
result = "토끼";
} else if (e === 8) {
result = "용";
} else if (e === 9) {
result = "뱀";
} else if (e === 10) {
result = "말";
} else if (e === 11) {
result = "양";
}
alert(`${year}년에 태어났다면 ${result}입니다.`);
</script>
</html>
'자바스크립트 > 혼공 학습단 11기' 카테고리의 다른 글
| 혼공JS 마지막주차 (0) | 2024.02.16 |
|---|---|
| 혼공JS Chapter7 (0) | 2024.02.04 |
| 혼공JS Chapter05 (0) | 2024.01.28 |
| 혼공JS Chapter04 (0) | 2024.01.21 |
| Chapter1~2 (0) | 2024.01.08 |
