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>

 


  💡  falseundefinednull0NaN이나 빈 문자열('')이 아닌 값은 조건문으로 테스트되었을 때, 실제로는 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+자바스크립트 웹 표준의 정석' ]

+ Recent posts