[ 혼공스 ] 2주차 : 조건문
본문 바로가기
혼공 스터디/혼자 공부하는 자바스크립트

[ 혼공스 ] 2주차 : 조건문

안세현 2024. 1. 14. 17:28
728x90
반응형

 

 

 

 

Chap 3 조건문

1. if 조건문

 

조건문을 사용하면 조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수도 있다.

조건 분기 :: 코드가 실행되는 흐름을 변경하는 것

 

if 조건문

  • 조건(bool 자료형)에 따라서 코드를 실행하거나 실행하지 않을 때 사용하는 구문
  • 비교 연산자와 논리 연산자를 활용해 조건을 만들어 조건을 사용해 조건 분기 한다.

1) if 조건문

if 조건문 사용하기
<script>
    // if 조건문
    if (273 < 100) {
        // 표현식 273 < 100이 참일 때 실행됩니다.
        alert('273 < 100 => true')
    }

    // 프로그램 종료
    alert('종료')
</script>
오전과 오후 구분하기
<script>

    const date = new Date()
    const hour = date.getHours()

    if (hour < 12) {

        alert('오전입니다.');
    }

    if (hour >= 12) {

        alert('오후입니다.')
    }
</script>

 

2) if else 조건문

if else 조건문 기본 형태

if else 조건문을 사용해 현재 시간 구하기
<script>

    const date = new Date()
    const hour = date.getHours()

    if (hour < 12) {
        alert('오전입니다.')
    } else {
        alert('오후입니다.')
    }
</script>

 

3) 중첩 조건문

조건문 안에 조건문을 중첩해 사용하는 것

중첩 조건문 구조

중첩 조건문으로 시간 파악하기
<script>

    const date = new Date()
    const hour = date.getHours()

    if (hour < 11) {
        alert('아침 먹을 시간입니다.')
    } else {
        if (hour < 15) {
            alert('점심 먹을 시간입니다.')
        } else {
            alert('저녁 먹을 시간입니다.')
        }
    }
</script>

 

4) if else if 조건문

if else if 조건문으로 시간 파악하기
    <script>
      // 변수를 선언합니다.
      const date = new Date()
      const hour = date.getHours()

      // if else if 조건문
      if (hour < 11) {
        // 표현식 hour < 11가 참일 때 실행합니다.
        alert('아침 먹을 시간입니다.')  
      } else if (hour < 15) {
        // 표현식 hour < 11가 거짓이고 표현식 hour < 15가 참일 때 실행합니다.
        alert('점심 먹을 시간입니다.')
      } else {
        // 표현식 hour < 15가 거짓일 때 실행합니다.
        alert('저녁 먹을 시간입니다.')
      }
    </script>

 

3-1 확인 예제 1

 

기본 미션

 

2. switch 조건문과 짧은 조건문

1) switch 조건문

switch 조건문의 기본 형태

 

 

switch 조건문 사용하기 // 홀수와 짝수 구분
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 변수를 선언합니다.
      const input = Number(prompt("숫자를 입력하세요.", "숫자"))

      // 조건문
      switch (input % 2) {
        case 0:
          alert("짝수입니다.")
          break
        case 1:
          alert("홀수입니다.")
          break
        default:
          alert("숫자가 아닙니다.")
          break
      }
    </script>
  </head>
  <body>
  </body>
</html>

 

  • break 키워드
    • switch 조건문이나 반복문을 빠져나가기 위해 사용
    • 코드를 읽다가 break 키워드를 만나면 break 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져나감
  • switch 조건문
    • 괄호 안에는 비교할 값을 입력한다.

 

(1) switch 조건문을 if 조건문으로 변환하기

  • 모든 switch 조건문은 if 조건절로 바꿀 수 있다.
  • 범위를 조건으로 가지는 if 조건문을 switch 조건문으로 대체하기는 어려움
switch 조건문을 if 조건문으로 변환하기
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 변수를 선언합니다.
      const date = new Date()
      const hour = date.getHours()

      // 조건문
      switch (true) {
        case hour < 11:
          // 표현식 hour < 11이 참일 때 실행합니다.
          alert('아침 먹을 시간입니다.')
          break
        case hour < 15:
          // 표현식 hour < 11이 거짓이고 표현식 hour < 15가 참일 때 실행합니다.
          alert('점심 먹을 시간입니다.')
          break
        default:
          // 위의 모든 것이 거짓일 때 실행합니다.
          alert('저녁 먹을 시간입니다.')
          break
      }
    </script>
  </head>
  <body>      
  </body>
</html>

2) 조건부 연산자

자바스크립트에는 조건문과 비슷한 역할을 하는 연산자가 있는데, 그것을 조건부 연산자라고 한다.

조건부 연산자 기본 형태

 

삼항 연산자라고 부르기도 함

조건부 연산자 사용하기
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 변수를 선언합니다.
      const input = prompt('숫자를 입력해주세요.', '')
      const number = Number(input)

      // 조건문
      const result = (number >= 0 ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.')
      alert(result)
    </script>
  </head>
  <body>      
  </body>
</html>

3) 짧은 조건문

논리 연산자의 특성을 조건문으로 사용하는 것

 

(1) 논리합 연산자를 사용한 짧은 조건문

 

  • 위의 논리합 연산자를 사용한 표현식은 뒤에 어떤 값이 들어가도 항상 참이다.
  • 자바스크립트는 참이 확실할 때 추가 연산을 진행하지 않는다.
  • 즉, 논리합 연산자의 좌변이 참이면 우변을 실행하지 않는다.

 

  • 문장 1은 좌변이 참이므로 우변을 무시하지만,
    문장 2의 좌변은 거짓이므로 우변이 참인지 거짓인지 검사한다.

 

 

 

(2) 논리곱 연산자를 사용한 짧은 조건문

 

  • 논리곱 연산자는 양변이 모두 참일 때만 참이다.

  • 따라서 좌변이 거짓이면 우변을 실행하지 않는다.

 

 

[ 누적 예제 1 ] 짝수와 홀수 구분하기

if else 조건문으로 짝수와 홀수 구분하기(1)
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 입력이 문자열이므로 다음과 같은 코드를 사용할 수 있습니다.
      const 입력 = prompt("정수를 입력해주세요.", "");
      const 끝자리 = 입력[입력.length - 1];

      // 끝자리를 비교합니다.
      if (끝자리 === "0" ||
        끝자리 === "2" ||
        끝자리 === "4" ||
        끝자리 === "6" ||
        끝자리 === "8") {
        alert(`${입력}은 짝수입니다.`);
      } else {
        alert(`${입력}은 홀수입니다.`);
      }
    </script>
  </head>
  <body></body>
</html>
if else 조건문으로 짝수와 홀수 구분하기(2)
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 입력이 문자열이므로 다음과 같은 코드를 사용할 수 있습니다.
      const 입력 = prompt("정수를 입력해주세요.", "");
      const 숫자 = Number(입력)

      if (숫자 % 2 === 0){
        alert(`${입력}은 짝수입니다.`)
      } else {
        alert(`${입력}은 홀수입니다.`)
      }
    </script>
  </head>
  <body></body>
</html>
 

[ 누적 예제 2 ] 학점을 기반으로 별명 붙여주기

중첩 조건문 사용하기(1)
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      const score = Number(prompt('학점을 입력해주세요.','학점'))
      if (score === 4.5){
        alert('신')
      } else if (4.2 <= score && score < 4.5) {
        alert('교수님의 사랑')
      } else if (3.5 <= score && score < 4.2) {
        alert('현 체제의 수호자')
      } else if (2.8 <= score && score < 3.5) {
        alert('일반인')
      } else if (2.3 <= score && score < 2.8) {
        alert('일탈을 꿈꾸는 소시민')
      } else if (1.75 <= score && score < 2.3) {
        alert('오락문화의 선구자')
      } else if (1.0 <= score && score < 1.75) {
        alert('불가촉천민')
      } else if (0.5<= score && score < 1.0) {
        alert('자벌레')
      } else if (0 <= score && score < 0.5) {
        alert('플랑크톤')
      } else {
        alert('시대를 앞서가는 혁명의 씨앗')
      }
    </script>
  </head>
  <body></body>
</html>
 
중첩 조건문 사용하기(2)
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      const score = Number(prompt('학점을 입력해주세요.','학점'))
      if (score === 4.5){
        alert('신')
      } else if (4.2 <= score) {
        alert('교수님의 사랑')
      } else if (3.5 <= score) {
        alert('현 체제의 수호자')
      } else if (2.8 <= score) {
        alert('일반인')
      } else if (2.3 <= score) {
        alert('일탈을 꿈꾸는 소시민')
      } else if (1.75 <= score) {
        alert('오락문화의 선구자')
      } else if (1.0 <= score) {
        alert('불가촉천민')
      } else if (0.5<= score) {
        alert('자벌레')
      } else if (0 <= score) {
        alert('플랑크톤')
      } else {
        alert('시대를 앞서가는 혁명의 씨앗')
      }
    </script>
  </head>
  <body></body>
</html>
 

[ 누적 예제 3 ] 태어난 연도를 입력받아 띠 출력하기

if else if 조건문 사용해보기
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <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>
  </head>
  <body></body>
</html>
 
split로 문자열 잘라 사용하기
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      const rawInput = prompt('태어난 해를 입력해주세요.','')
      const year = Number(rawInput)
      const tti = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',')

      alert(`${year}년에 태어났다면 ${tti[year % 12]} 띠입니다.`)
    </script>
  </head>
  <body></body>
</html>
 

결과 화면

 

728x90
반응형

'혼공 스터디 > 혼자 공부하는 자바스크립트' 카테고리의 다른 글

[혼공스] 6주차: 문서 객체 모델, 예외 처리  (1) 2024.02.08
[혼공스] 5주차 : 객체  (0) 2024.02.04
[ 혼공스 ] 4주차 : 함수  (0) 2024.01.26
[ 혼공스 ] 3주차 : 반복문  (0) 2024.01.20
[ 혼공스 ] 1주차  (1) 2024.01.07

'혼공 스터디/혼자 공부하는 자바스크립트' Related Articles

티스토리툴바