행복을 담는 블로그

[Javascript] 조건문 (if, else if, else, switch) 본문

FrontEnd/Javascript

[Javascript] 조건문 (if, else if, else, switch)

hyun0zin 2024. 1. 2. 14:37

📕 Javascript 조건문 - if, else if, else, switch

 

1. if 문

 

1) if 문 기본 형태

if (조건 : true 또는 false가 나올 수 있는 조건) {
        // main logic
}

ex 1)

let x = 10;

if (x > 0){  
    // main logic  
console.log("x는 양수입니다.");  // x는 양수입니다. 
}

ex 2)

let y = "hello world";  
// y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력

if (y.length >= 5){  
console.log(y.length);  // 11
}

2) if - else 문

let x =-3;

if(x > 0){  
    // main logic #1 : if 문의 조건이 true이면  
    console.log("x는 양수입니다.")  
} else {  
    // main logic #2 : if 문의 조건이 false이면  
    console.log("x는 음수입니다.")  
}

▶️ result : x는 음수입니다.

3) if - else if - else 문

📌 기본 형태

if(조건1){  
   // main logic #1 : 조건1이 맞으면 실행  
} else if(조건2){  
   // main logic #2 : 조건1이 맞지 않고 조건2가 맞으면 실행  
} else {  
   // main logic #3 : 위 조건이 모두 아닐 경우  
}

ex)

let x = 12;  

if(x < 0){  
    // main logic #1 : 조건1이 맞으면 실행  
    console.log("1")  
} else if(x >= 0 && x < 10){  
    // main logic #2 : 조건1이 맞지 않고 조건2가 맞으면 실행  
    console.log("2")  
} else {  
    // main logic #3 : 위 조건이 모두 아닐 경우  
    console.log("3")  
}

▶️ result : 3

 

2. switch 문

: 변수의 값에 따라, 여러개의 경우(case) 중 하나를 선택

  • default : 모든 경우 맞지 않을 때, 실행.
  • break; 를 마지막에 꼭 넣어줘야함!!
    : break가 없으면 다음 조건으로 넘어가게 되므로 중간에 끊어주는 장치가 필요!
let fruit = "바나나2";

switch (fruit){  
  case "사과":  
      console.log('사과입니다.');  
      break;  
  case "바나나":  
      console.log('바나나입니다.');  
      break;  
  case "키위":  
      console.log('키위입니다.');  
      break;  
  default:  
      console.log('아무것도 아닙니다.')  
      break;  
}

 

3. 조건문의 중첩

let age = 20;  
let gender = "여성";

// 미성년자 구분  
if(age>=18){  
    // 성별 구분
    if(gender==="여성"){  
      console.log("성인 여성입니다.")  
    }else{  
      console.log("성인 남성입니다.")  
    }  
} else {  
    if(gender==="여성"){  
      console.log("미성년 여성입니다.")  
    }else{  
      console.log("미성년 남성입니다.")  
} }

 

4. 조건부 실행

: 어떤 특정한 경우에만 실행하도록.

let x =10;

(x > 0) && console.log("x는 양수입니다.")

▶️ 조건부 실행 : 앞의 조건이 만족하면, → 뒷부분이 실행되도록 해줘.

 

5. 삼항 연산자와 단축평가

let y; // y는 undefined  
let z = y || 20;  //y의 값이 존재하지 않는다면, z의 기본값을 20이라고 세팅해줘.

console.log(z);  // 20

 

6. falsy 한 값, truthy한 값

if(0) {  
    // main logic  
    console.log("hello")  
}

if("") {  
    // main logic  
    console.log("hello")  
}

if(null) {  
    // main logic  
    console.log("hello")  
}

if(undefined) {  
    // main logic  
    console.log("hello")  
}

if(NaN) {  
    // main logic  
    console.log("hello")  
}

if(false) {  
    // main logic  
    console.log("hello")  
}

if(true) {  
    // main logic  
    console.log("hello")  
}
  • true 제외하고는 모두 falsy한 값이다.
  • if 문의 조건문 안에서는 true를 제외하고 위의 값들은 다 falsy한 값으로 받아들여진다!