자바스크립트 기초 정리(조건문 if else, switch) - 2📘

조건문이란?

프로그래밍 언어에서 조건문의 정의는 주어진 표현식에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다.한마디로 어떠한 조건이 주어졌을 때, 조건에 따라 어떠한 결과를 도출할 것인지를 정의해 주는 것을 뜻합니다

 

조건문의 형태

조건문의 형태는 아래 네가지로 구분해 볼 수 있습니다

• if 문
• if / else 문
• if / else if / else 문
• switch 문

* 아래의 설명에서 표현식을 만족한다, 만족하지 않는다는 각각 참(yes) / 거짓(no)을 나타냅니다!

---

 

if 문

Fig. 1. if문 예시

예를 들어 노트북 배터리가 80%보다 적으면 충전하려는 코드를 작성할 때, 우리는 Fig. 1 같이 flow chart를 작성해볼수 있습니다. 그리고 이것을 자바스크립트에서 조건문을 통해 작성할 수 있습니다

 

let battery = 32 //배터리 잔량 32%

if(battery <= 80){  //배터리가 80보다 작거나 같으면
    charge_battery() //배터리 충전시키는 함수
}

 

if 문은 if(표현식){ 명령 }으로 이루어져 있고, 만약 나의 노트북 배터리가 32%이고 충전을 원할 때, if(배터리가 80프로 이하면){충전}이라는 실행문을 작성해 볼 수 있습니다

---

if  /  else 문

Fig. 2. If / else 문 예시

let battery = 81 //배터리 81%

if(battery <= 80){  
    charge_battery()
}else{   //배터리가 81%프로 이상이면
    wait_charge()  //충전을 기다리는 함수
}

 

if / else 문은 if(표현식){ 명령 1 } else { 명령 2 }으로 이루어져 있고, 만약 나의 노트북 배터리가 81%이고 다음 조건문을 실행한다면 , if(battery <= 80)이라는 표현식을 만족하지 않으므로 if 문안에 명령 1은 실행하지 않고 그다음 else문 안에 명령 2를 실행하게 됩니다

---

if / else if / else 문

아래의 &&연산자는 and, ||연산자는 or을 뜻합니다

간단히 설명하면, &&연산자는표현식 1-1(Fig. 3 배터리 <= 80), 표현식 1-2(Fig. 3 배터리 >= 20)를 둘 다 만족해야 참이고, ||연산자는 둘 중 하나만 만족해도 참입니다!!

 

Fig. 3. if / else if/ else 문

let battery = 13 // 배터리 13%

if(battery <= 80 && battery >= 20){ // 배터리 80%이하 그리고 배터리 20%이상이면
    charge_battery()
}else if(battery < 20){  //배터리가 20%미만이면
    sleep_mode()   // 절전모드 함수
    fast_charge()  // 고속충전 함수
}else{ 
    wait_charge()
}

다른 코드보다 어렵게 보여도 표현식 2를 통해 다양한 명령 수행하도록 선택지를 넓혔다고 생각할 수 있습니다

위에 코드를 설명하자면, 배터리가 20 ~ 80% 일 때는 일반적인 충전을 합니다. 하지만 20%보다 낮다면 절전모드를 실행하고 고속충전을 실행합니다. 그게 아닌 경우에는 충전을 대기합니다

---

switch 문

switch 문도 하나의 조건문으로서 주어진 조건값에 따라 if / else if / else 문보다 가독성을 높였다고 할 수 있습니다. switch 문에서는 if 문과는 다르게 break 키워드가 포함됩니다

 

Fig. 4. switch 문

 

let lobot_eyes = 'red' // 로봇이 인식한 색깔
let color = ['red' , 'green', 'yellow'] // 색깔 배열

switch(color.includes(lobot_eyes)){ //로봇이 인식한 색이 color배열에 포함되어 있다면
    case 'red':   // 빨강색일 경우
        stop()  // 멈추는 함수
        break;
    case 'green': // 초록색일 경우
        speed_up() // 속도를 올리는 함수
        break;
    case 'yellow': // 노란색일 경우
        speed_down() // 속도를 내리는 함수
        break;
    default: // 위에 무엇도 해당안되는 경우
        break;
}

 

만약 어떤 로봇이 있고, 이 로봇이 색깔을 구분할 수 있을 때,

만약 빨간색이면 정지하고, 초록색이면 속도를 올리고, 노란색이면 속도를 내리는 것으로 코드를 작성해 보았습니다. 위와 같은 코드는 한번 switch 문을 실행하면 break 하면 그다음은 선택지는 없지만, 만약 반복문 안에 switch 문이 있다면, 색깔을 인식할 때마다 속도를 올리고, 내리고, 멈추는 기능을 실행할 수 있을 것입니다

---

참조

http://www.tcpschool.com/javascript/js_control_condition

코딩교육 티씨피스쿨