front-end/js

[JS] 5. 조건문(if, else if, else, switch)

쭈냥이 2023. 11. 10. 17:36

1. if

(1-1) if문은 어떤 조건이 충족되었을 때 특정 동작을 할 수 있도록 돕는 조건연산자입니다.

const age = prompt("나이를 입력해주세요", "ex) 20");

if(age > 20){
  console.log(`회원님은 ${age}살이므로 맥주를 구입하실 수 있습니다.`);
}

위 이미지처럼 나이를 입력했을 때, 20보다 크다면 안내메세지가 나옵니다.

 

 

 

 

 

2. elseif

(2-1) 만약 조건이 여러개라면 elseif를 통해 조건을 추가할 수 있습니다.

const age = prompt("나이를 입력해주세요", "ex) 20");
const gender = pormpt("성별을 입력해주세요", "ex) male or female");

if(age >= 20){ //part1
  if(gender == "mail"){//part2
    console.log("성인 남자화장실은 2F에 있습니다.");
  }
  elseif(gender == "femail"){ //part3
    console.log("성인 여자화장실은 3F에 있습니다.");
  }
} 

elseif(age < 19){ //part4
  if(gender == "mail"){//part5
    console.log("청소년 남자 교복은 우측에 있습니다.");
  }
  elseif(gender =="femail"){//part6
    console.log("청소년 여자 교복은 좌측에 있습니다.");
  }
}

 

(2-2) 성인, 청소년, 남자, 여자로 구분한다고 했을 때 생각할 수 있는 경우의 수는 총 4가지입니다.

-성인이면서 남자인 경우 = part2 실행

-성인이면서 여자인 경우 = part3 실행

-청소년이면서 남자인경우 = part4 실행

-청소년이면서 여자인경우= part5 실행

 

 

 

 

 

 

3.else

(3-1) 정해진 조건 이외에 값을 모두 처리할 때 유용하게 사용됩니다.

const quiz = prompt("QUIZ : 전주에서 가장 유명한 음식은? ");

if(quiz === "비빔밥"){
  console.log("정답입니다. 증맬루 똑똑하십니다~");
}
else{
  console.log("전주는 비빔밥이 제일 유명하답니다.");
}

비빔밥 이외의 답은 다 하단의 메세지가 출력되고 

비빔밥이라고 정확히 적어야만 상단의 메세지가 출력됩니다.

 

 

 

 

 

 

4. switch

(4-1) 각각의 case가 너무 많을 때 if - else 대신 사용하기 간편합니다.

let score = prompt("국어성적을 입력하세요.", "ex) 72");

switch(score){
    
case(score >= 90):
    console.log("A학점입니다.");
    break;
    
case(score >= 80 && score < 90):
    console.log("B학점입니다.");
    break;
    
case(score >= 70 && score < 80):
    console.log("C학점입니다.");
    break;
    
default :
    console.log("f학점입니다.");
    break;
}

 

(4-2) switch문의 형식은 switch(비교대상){case(조건1): 수행문; break;

                                                                    case(조건2): 수행문; break;

                                                                    case(조건n): 수행문; break;

                                                                    default: 예외처리문;} 입니다.

 

(4-3) case뒤에는 콜론(:)이 붙고, 수행문 뒤에는 세미콜론(;)이 붙는거에 주의해야 합니다.