1. if 문과 if-else 문
👩🏻💻 if문이나 if-else문을 사용하면 스크립트 안에서 조건 체크 가능
들어가기 전
const number = prompt('숫자를 입력하세요!');
💡 위 코드는 형변환을 하지 않아도 프로그램 실행에는 문제가 없음
▶️ 조건식에서 0과 비교를 할 때 자동으로 형변환이 되어서 계산이 되기 때문
▶️ but! 자바 스크립트로 프로그램을 짤 때 문제가 되는 경우가 있어서 가급적 형변환을 하는 것을 추천
if 문
<!--if조건문 기본형-->
if (불 값이 나오는 표현식) {
불 값이 참일 때 실행할 문장
}<script>
if(273 < 100) { // 표현식 273 < 100이 참일 때 실행
alert('273 < 100 => true')
}
let str = ' ';
if (!str) { // 조건문 안에서 자동으로 형변환. 공백도 글자로 취급
alert('빈 문자열입니다.'); // false라서 실행 안됨.
}
str = ' ';
if (!str.trim()) { // 조건문 안에서 자동으로 형변환.
alert('빈 문자열입니다.') // trim()은 공백제거 함수. true라서 실행됨.
}
str = '값입력';
if (str) { // 조건문 안에서 자동으로 형변환
alert('빈 문자열이 아닙니다.'); // true라서 실행됨.
}
</script>if-else문
<!-- if-else 조건문 기본형 -->
if (불 값이 나오는 표현식) {
불 값이 참일 때 실행할 문장
} else {
불 값이 거짓일 때 실행할 문장
}<script>
// 오전과 오후 구분하기
const date = new Date(); // 현재 날짜와 시간을 갖는 객체 생성
const hour = date.getHours();
if (hour < 12) {
alert('오전입니다.');
} else {
alert('오후입니다.');
}
// if-else문을 삼항연산자로 변경
console.log((hour < 12 ? '오전입니다.' : '오후입니다.'))
</script>
중첩 조건문 : 조건문 안에 조건문을 중첩해서 사용하는 것
<script>
// 변수를 선언
const date = new Date(); // 현재 날짜와 시간을 갖는 객체생성.
const hour = date.getHours(); // 현재시간을 0 ~ 23 사이의 값으로 출력하는 메소드.
// if-else 문
if (hour < 11) { //표현식 hour < 11가 참일 때
alert("아침 먹을 시간입니다.")
} else { // 표현식 hour < 11가 거짓일 때 실행
if (hour < 15) { // 표현식 hour < 15가 참일 때 실행.
alert("점심 먹을 시간입니다.");
} else { // 표현식 hour < 15가 거짓일 때 실행.
alert("저녁 먹을 시간입니다.")
}
}
// else-if 문
if (hour < 11) { //표현식 hour < 11가 참일 때
alert("아침 먹을 시간입니다.")
} else if (hour < 15) { // 표현식 hour < 15가 참일 때 실행.
alert("점심 먹을 시간입니다.");
} else { // 표현식 hour < 15가 거짓일 때 실행.
alert("저녁 먹을 시간입니다.")
}
</script>
💡 false, undefined, null, 0, NaN이나 빈 문자열('')이 아닌 값은 조건문으로 테스트되었을 때, 실제로는 true를 리턴하므로, 변수가 참인지 혹은 값이 존재하는지를 테스트하기 위해 변수 이름 그 자체를 사용할 수 있다.
let shoppingDone = false;
let childsAllowance;
if (shoppingDone) {
// 명시적으로 '=== true'를 명시할 필요가 없습니다
childsAllowance = 10;
} else {
childsAllowance = 5;
}2. switch 문
🐰 switch 조건문의 괄호 안에 비교할 값을 입력 ▶️ 이때 입력한 값을 기준으로 특정 코드를 실행
🥕 처리할 명령이 많을 때 주로 사용
🥕 switch 문의 조건은 case 문의 값과 일대일로 일치해야 함
🐰 일반적으로 case 뒤에는 정수나 문자열이 오는 것으로 사용
🐰 break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드
▶️ 코드를 읽다가 break 키워드를 만나면 break 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져 나감
<!-- 기본형 -->
switch (조건문) {
case 조건A :
조건이 A일 때 실행할 명령문;
break;
case 조건B :
조건이 B일 때 실행할 명령문;
break;
default :
break;
}<script>
// 변수를 선언
const input = Number(prompt('숫자를 입력하세요.', '숫자'));
// 조건문
switch (input % 2) { // 나머지 연산자를 이용해서 홀수와 짝수를 구분
case 0:
alert('짝수입니다.');
break;
case 1:
alert('홀수입니다.');
break;
default:
alert('숫자가 아닙니다.'); // 숫자가 아닌걸 입력해도 에러가 나지 않음.
break;
}
</script><script>
/* 사용자에게 월을 입력받아서 switch 이용해 계절을 출력.
다만 1~12만 입력된다고 가정. */
const month = Number(prompt("월을 입력하세요. (숫자 1~12 중 선택)"));
switch (month) {
case 12: case 1: case 2:
document.write(`${month}월은 겨울 입니다.`);
break;
case 3: case 4: case 5:
document.write(`${month}월은 봄 입니다.`);
break;
case 6: case 7: case 8:
document.write(`${month}월은 여름 입니다.`);
break;
case 9: case 10: case 11:
document.write(`${month}월은 가을 입니다.`)
break;
}
</script>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열(Array)이란, 요소 추가 및 제거 (0) | 2024.03.28 |
|---|---|
| [JavaScript] 반복문 | for문, while문, break문, continue문 (0) | 2024.03.28 |
| [JavaScript] var 변수, let과 const (1) | 2024.03.27 |
| [JavaScript] 산술연산자, 복합대입연산자, 비교연산자, 논리연산자, 삼항연산자 (1) | 2024.03.27 |
| [JavaScript] 기본 문법 | 변수, 자료형 및 자료형 검사, 자료형 변환 (0) | 2024.03.27 |
