Frontend/JS.info 정리

자바스크립트 기본 - if와 ? 조건 처리 , switch

Creative_Lee 2021. 11. 18. 17:58

if 문의 괄호 안에서도 표현식을 평가한다.

이후 그 결과를 boolean 값으로 변환한다.

 

- 숫자 0 , 빈 문자열 "" , null , undefined , NaN은 boolean으로 변환시 모두 false 이다.

  falsy값 이라고 부른다.

- 이 외의 값은 boolean으로 변환시 true 이다.

  truthy값 이라고 부른다.

 

조건부 연산자 ( ? )  aka. ternary operator

자바스크립트에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일합니다.

피연산자가 3개 이므로 삼항 연산자 라고도 불립니다.

let passedTest = 80 <= grade ? true : false

성적이 80점 이상 일 때 변수에 true가 담기고 아니라면 false가 담깁니다.
//삼항 연산자를 알아보기 위한 예제일 뿐입니다.

let passedTest = 80 <= grade
비교 연산자는 원래도 true,false를 반환하기 때문에 코드를 줄일 수 있습니다.

삼항 연산자를 중첩으로 사용할 수 있지만, 가독성이 좋지 않기 때문에 지양하는 것이 좋습니다.

 

조건과 반환하려는 값이 다를 때, 또한 그것들이 한 줄에 표현할 수 있을 만큼 간결할 때,

사용하면 좋을 것 같습니다.

 

 

switch

복수의 if 조건문은 switch문으로 바꿀 수 있습니다!

조건과 그에 따른 실행을 명확하게 지정하고 싶을 때 사용하면 좋을 것 같아요!

 

let grade = "B"

switch (grade) {
  case "A" :
    console.log("당신은 A등급 입니다.");
    break;
  case "B" :
    console.log("당신은 B등급 입니다.");
    break;
  case "C" :
    console.log("당신은 C등급 입니다.");
    break;
  case "D" :
    console.log("당신은 D등급 입니다.");
    break;
  case "E" :
    console.log("당신은 E등급 입니다.");
    break;
  default :
    console.log("당신은 퇴학 입니다.")  
}

switch문은 ()의 값과 case의 값을 비교합니다.

같지 않으면 다음 case문으로 넘어갑니다.

값이 일치하면 break를 만날 때 까지 실행됩니다

값이 일치 한 case 안에 break문이 없다면, 
그 뒤에 존재하는 case를 조건에 맞는지 확인하지 않고 실행합니다.
모든 case에 일치하는 값이 없다면, defalut를 실행합니다.

 

여러 개의 case문을 묶을 수 도 있습니다.

let grade = "A"

switch (grade) {
  case "A" :  
  case "B" :  
  case "C" :
  case "D" :
  case "E" :
    console.log("포기하지 않고 끝까지 해냈습니다.");
    break;
  default :
    console.log("시험을 포기 하셨군요...")  
}

break가 없는 경우에 조건에 상관없이 다음 case문을 실행하기 때문에
case A~E 는 전부 같은 메세지를 받습니다.

 

switch문은 조건을 확인할 때 일치비교로 확인합니다.

조건과 case의 자료형을 다르게 사용하는 실수를 하지 맙시다!

 

 

기본이 중요하다.