본문 바로가기
Front_end/JS

JS - 조건문

by hyeon1016 2024. 8. 14.

조건문

특정 조건이 참인지 거짓인지에 따라 코드의 흐름을 제어하는 구문

 

 

if문 

 

조건이 일 때 특정 코드블록을 실행하는 조건문이다.

 

사용법

if (조건식) {
	//조건식이 참일 떄의 표현식
}

 

조건식이 참이면 중괄호 {} 안의 문장을 실행하고, 거짓이면 if문을 실행하지 않고 다음 문장으로 진행한다.

 

예시

<script>
      var time = parseInt(prompt("시간을 입력하시오."));
      if (time > 22) {
        document.write("주스를 마신다.");
        document.write("친구와 통화를 한다.");
      }
      document.write("TV를 본다.");
</script>

 

'pompt' 로 입력한 값이 22보다 크면 참이기 때문에 중괄호{} 안의 'document.write' 문장을 실행하고 22보다 작다면 거짓이기 때문에 다음 문장으로 진행한다.

 

if ~ else문

조건이 거짓일 때 다음 문장으로 진행하지 않고 'else' 다음에 실행해야 하는 문장을 기술하는 조건문이다.

 

사용법

if(조건식) {
  //조건식이 참일 때의 표현식
}
else{
  //조건식이 거짓일 때의 표현식
}

 

예시

    <script>
      var time = parseInt(prompt(" 시간을 입력해주세요."));
      if(time > 22) {
        document.write("Good Night..." + "<br>");
      }
      else {
        document.write("Good Afternoon" + "<br>");
      }
        document.write("TV를 본다.");
    </script>

 

'prompt' 로 입력한 값이 22보다 크다면 참이기 때문에 중괄호 {} 안의 문장을 실행하고 22보다 작다면 거짓이기 때문에 실행하지 않고 'else'의 중괄호 {} 안의 문장을 실행한다.

 

if else-if문

여러 조건을  순차적으로 검사하여 각 조건에 맞는 처리를 할 수 있는 조건문이다.

조건을 나열하는 순서에 따라 우선 순위를 지정할 수 있는데 가장 중요한 조건을 먼저 검사하고 중요도가 낮은 조건을 나중에 검사한다. 만약 'if'와 모든 'else if' 조건이 거짓이라면 마지막 'else' 블록의 코드가 실행된다.

 

 

사용법

if (조건식1) {
  //조건식1이 참일 때의 표현식
}else if(조건식2) {
  //조건식2가 참일 때의 표현식
}else {
  //조건식1과 2가 모두 거짓일 때의 표현식
}

 

예시

    <script>
      var score = prompt("학생 점수를 입력하세요", "0~100 사이의 정수");
      if(score >= 90) {
        alert("A학점");
      }
      else if(score >= 80) {
        alert("B학점");
      }
      else {
        alert("C학점");
      }
    </script>

 

'prompt' 로 입력한 값이 90보다 크거나 같다면 참이기 때문에 A학점을 받는다. 하지만 90점 미만이라면 거짓이기 때문에 문장을 실행하지 않고 다음 조건으로 넘어간다. 다음 조건은 값이 80보다 크거나 같다면 참이기 때문에 B학점을 받는다. 

만약 80점 미만이라면 C학점을 받는다.

 

 

if문과 논리연산자의 결합

 

if (조건식1 && 조건식2) {
  //조건식1과 조건식2가 모두 참일 때의 표현식
}esle {
  //조건중 하나라도 거짓일 때의 표현식
}

 

예시는 아래 중첩된if문의 예시에서 설명하겠다.

 

중첩된 if문

if문 안에 if문을 또 사용하는 것이다.

 

여러 조건을 단계별로 세밀하게 평가가 가능하다. 'if-else'문으로 처리하기 힘든 조건문을 처리하고 관리할 때 유용하며, 다양한 조건 조합의 복잡한 상황을 효과적으로 제어 가능하다.

if문을 중첩해서 사용하면 조건이 참일 때만 추가 조건을 검사할 수 있다는 장점이 있다.

 

 

사용법

if(조건식){
  if(조건식){
  
  }
}

 

 

예시

    <script>
      var score = prompt("학생 점수를 입력하시오.", "0~100 사이의 정수");
      if(score >= 0 && score <= 100) {
        if(score >= 80) {
          alert("합격");
        }else{
          alert("불합격");
        }
      }else{
        alert("0~100 사이의 정수를 입력하세요.");
      }

      var age = prompt("나이를 입력해주세요", "0~100 사이의 나이");
      if(age >= 0 && age <= 100) {
        if(age >= 18) {
          alert("성인");
        }else{
          alert("미성년자");
        }
      }else{
        alert("나이를 다시 입력해주세요.")
      }
    </script>

 

변수를 선언하고 'score'에 'prompt'로 점수를 입력 받는다. 입력된 'score' 가 0보다 크거나 같을 때와 'score' 가 100보다 작거나 같을 때 참이므로 다음 조건으로 넘어간다. 거짓일 시에는 'else' 에 "0~100 사이의 정수를 입력하세요" 라는 문구가 표시된다. 다음 if문에서 'score' 가 80보다 크거나 같을 때 참이므로 합격, 작을시에는 거짓이므로 불합격이다.  

 

 

switch문

if문이 참과 거짓으로 방향이 결정된다면, switch문은 실행 경로가 여러개 중에 하나가 결정된다. 조건식이 아닌 제어식에서 결정된 값에 따라 실행문장이 바뀐다.

 

사용법

switch(제어식) {
	case value01:
    	표현식1
        break;
	case value02:
    	표현식2
        break;
   	case value03:
    	표현식3
        break;
}

 

예시

    <script>
      var grade = prompt("학점을 입력하시오");
      switch(grade) {
        case('A'):
          document.write("당신의 학점은 A입니다.");
          break;
        case('B'):
          document.write("당신의 학점은 B입니다.");
          break;
        case('C'):
          document.write("당신의 학점은 C입니다.");
          break;
        default:
          document.write("당신의 학점은 F입니다.");
          break;
      }
    </script>

 

변수를 선언하고 'grade'에 'prompt'로 학점을 입력받는다. 입력된 값에 따라 'switch()'제어문을 사용해 실행문을 선택하고 실행한다. 'A'를 입력하면 "당신의 학점은 A입니다." 라는 문구가 출력될 것이고 'A', 'B', 'C'를 제외한 문구를 입력하면 'default' 에 의해 "당신의 학점은 F입니다." 문구가 출력될 것이다. 

'Front_end > JS' 카테고리의 다른 글

JS - 변수의 적용범위  (0) 2024.08.14
JS - 반복문  (0) 2024.08.14
JS - 연산자  (0) 2024.08.13
JS - 변수  (0) 2024.08.13
JS - JavaScript란?  (0) 2024.08.12