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

2023. 1. 31. 18:19·JavaScript

조건문이란?

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

 

조건문의 형태

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

  • 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

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

저작자표시 비영리 변경금지 (새창열림)
'JavaScript' 카테고리의 다른 글
  • ES6+ 자바스크립트 중요 개념 정리 🔑 - DOM 선택 및 조작
  • ES6+ 자바스크립트 중요 개념 정리 🔑- 콘솔과 경고, 변수, get 메서드, DOM 요소 쿼리
  • 자바스크립트 기초 정리(반복문 while, do while, for, for in, for of) - 3📘
  • 자바스크립트 기초 정리(js란, var, let, const) - 1📘
Jelong
Jelong
커스텀 웹: https://jaehong-park.com Github: https://github.com/qkrwoghd04
  • Jelong
    24/7 Developer's Note
    Jelong
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Software Engineering
      • Ubuntu
      • Network
      • JavaScript
      • Web
      • Interaction Design
      • React Native
      • React
      • Algorithm
      • Java
      • Database design
      • IT Trend
      • TroubleShooting
      • AWS
      • Interview
      • LG CNS AM CAMP 1기
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    이진트리
    GPT-4
    소프트웨어 공학
    티스토리챌린지
    heap
    알고리즘
    html
    frontend
    generic
    ChatGPT
    BST
    prototyping
    JS
    Queues
    javascript
    자바스크립트
    데이터 구조
    expo
    미니넷
    오블완
    typescript
    AWS
    알고리즘 분석
    블랙 박스 테스트
    React
    자바
    mininet
    css
    화이트 박스 테스트
    java
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
Jelong
자바스크립트 기초 정리(조건문 if else, switch) - 2📘
상단으로

티스토리툴바