[Javascript] if/switch 조건문

이 글의 목적

📌 Javascript의 선언문의 기초에 대해 다뤄봅시다. if문과 switch문을 통한 코딩을 해봅니다.

Javascript에서 조건에 따라서 값이 변하는 형태를 표현할 때
쓰이는 조건문 문법입니다.

• if문 = 단수의 조건을 설정
• if else = if에서 여러개 조건을 추가
• switch문 = 복수의 if 조건을 switch문으로 변환 가능

각자의 문법이 어떻게 쓰이는지
예시를 들어가면서 알아보겠습니다.

조건문이란 무엇일까?

---

1. 조건문이란?

조건문은 조건(Condition)에 따라서 로직을 다르게 수행하도록 돕습니다.

예를 들면)
일상생활에서는 나이가 N살 이상 술을 구매할 수 있다.
플랫폼을 예를 들면 유튜브의 악성 컨텐츠는 특정 나이 이하인 고객들에게 노출된다.

주로 사용되는 문법에는 if문과 있습니다.

문법

중괄호()안에 조건을 넣으면 //로직이 출력 되는 간단한 문법입니다.

if(조건) {
	//로직
}

예시
제가 태어난 년도를 입력하는 퀴즈를 낼 수 있습니다.

let year = prompt('제가 태어난 년도는 언제일까요?', '');
if (year == 1991) {
    console.log("정답입니다");
}

코드 실행
Chrome을 실행하고, F12 를 눌러 개발자도구를 열어줍니다.

• let을 통해 정의한 year를 입력하는 prompt창이 뜹니다.
  

• prompt 에 맞는 변수를 입력해줍니다.
  

• console.log를 통해서 "정답입니다" 라는 텍스트를 반환합니다.
  

 

2. if문의 특징

1. if문은 괄호 안의 표현식을 평가하고 그 결과를 Boolean갑으로 변환합니다.
   true와 flase가 되는 조건은 아래와 같습니다.

• false가 되는 조건 (falsy값)
• 0 0의 경우
• "" 빈 값
• null 값이 비어있는 경우
• undefined 변수가 할당되지 않았을 때
• NaN Not A Number - 연산과정에서 잘못된 입력 (0으로 나누는 경우)

//0을 넣는 경우
if (0) { // 0은 falsy입니다.
  ...
}

//1을 넣는 경우
if (1) { // 0은 f입니다.
  ...
}

Console창 입력 예시

 

3. 조건문 - switch

아까 말씀드렸듯이 복수의 if 조건문은 switch 문으로 바꿀 수 있습니다.

switch문은 결과값이 여러개임에 따라서 다른 결과를 호출하게 해줍니다.
따라서 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다.
그래서 코드 자체가 비교 상활을 잘 설명한다는 장점이 있습니다.

문법

• 요약 : switch (x) 라는 변수의 결과값이 case의 'value' 에 따라서
  다른 값이 출력되고, 출력되면 동작이 break되어 다른 case를 실행하지 않습니다.

• switch 중괄호 안에 변수를 넣어줍니다.
  또는 계산식(x/2)등도 넣어줄 수 있습니다.

• case : 뒤의 ...의 명령문을 실행해줍니다.

예시

switch(x) { 
  case 'value1': //if (x === 'value1')와 같습니다.
    ...          // ...을 실행합니다.
    [break]      // ...을 실행한 후, 멈춥니다. (다른 케이스가 실행되지 않습니다)

  case 'value2': //if (x === 'value2')와 같습니다.
    ...
    [break]
    
  default :
	...
    [break]
}

 

예제풀이를 통해서 다루는 개념적용을 해봅니다.

• 출처 : 혼자 공부하는 자바스크립트 (윤인성 지음 | 한빛미디어)

문제 1번

① false 출력 : x는 4보다 작기 때문에
② false 출력 : x는 4보다 작기 때문에
③ true 출력 : x는 10으로 4보다 크기 때문에

문제 2번

정답은
Number
Number
a > b
a == b

문제 3번

정답은 &&

문제 4번

[문제풀이]

• prompt는 숫자를 입력해도 string으로 출력하기에 Number로 문자를 숫자열로 변환 필수

1. 경우의 수는 양수, 0, 음수 그리고 문자의 경우의 수 존재
2. 조건연산자 ?를 이용해서 풀이
3. alert로 result 출력

//prompt에서 받은 값을 result에서 연산   
let result = (a > 0) ? "양수입니다." :  //양수의 경우
             (a < 0) ? "음수입니다." : //음수의 경우
             (a == 0) ? "0입니다." : //0인 경우
             '숫자가 아닌 문자를 입력하셨습니다.' ;

    alert(result); //연산을 통해 result 출력

문제 5번

[문제풀이]
1. 짝수, 홀수, 0, 문자입력 경우의 수 존재
2. 조건연산자 ?를 이용해서 풀이
3. alert로 result 출력

//prompt에서 받은 값을 result에서 연산
let result = (a%2 == 0) ? "짝수입니다.":
			 (a%2 != 0) ? "홀수입니다" :
			 (a == 0) ? "0은 짝수랍니다." :
  			 '숫자가 아닌 문자를 입력하셨습니다.';

	alert(result);
        

문제 6번

• 추가정보 : 일반적으로 봄(3~5월) , 여름(6~8월), 가을(9~11월), 겨울(12~2월)

[문제풀이]
1. switch와 case를 이용해 25% 확률로 맞추면 break
2. 하지만 오답 출력을 한다.
3. 원인은 case의 경우 정확히 일치하는 값으로 판별 가능
-> 따라서 case의 경우로는 불가

//오답 : switch와 case를 통해서 출력 불가능
switch(a) {
  case (2<a && a<6) :alert("봄입니다") ;break;
  case (5<a && a<9) :alert("여름입니다") ;break;
  case (8<a && a<12) :alert("가을입니다") ;break;
  case (11<a && a<3) :alert("겨울입니다") ;break;
  default:alert("숫자를 적어주세요");
}
        

[문제풀이]
1. if와 else if를 통해서 처리
2. 봄 / 여름 / 가을 / 겨울의 경우 처리

  if (3 <= a && a <= 5) {
	alert("봄입니다");
  } else if (6 <= a && a <= 8) {
	alert("여름입니다");
  }	else if (9 <= a && a <= 11) {
	alert("가을입니다");
  } else {
		alert("겨울입니다");
  }
        

switch 예제

문제1

1. 100은 200보다 작기 때문에 false
2. ture 값 반환 confirm
3. 확인 = ture, 취소 = false값 반환

문제2

// 태어난 해를 입력받아 12로 나누어 나머지 계산
const rawInput = prompt('태어난 해를 입력해주세요.', '')
const year = Number(rawInput)
const e = year % 12

// result 값에 대한 변수 선언 = 빈 값으로 처리
let result = ''

// switch 문을 이용하여 result값 출력
switch(e) {
  case 5 : result = "소";break;
  case 6 : result = "호랑이";break;
  case 7 : result = "토끼";break;
  case 8 : result = "용";break;
  case 9 : result = "뱀";break;
  case 10 : result = "말";break;
  case 11 : result = "양";break;
  case 12 : result = "원숭이";break;
  case 0 : result = "원숭이";break;
  case 1 : result = "닭";break;
  case 2 : result = "개";break;
  case 3 : result = "돼지";break;
  case 4 : result = "쥐";break;
}

// Template Literal 방식을 통해 변수 {year}와 {result}를 받아 alert로 출력
alert(`${year}년에 태어났다면 ${result} 띠입니다.`)

[문제풀이]
1. let으로 변수 선언 후 switch에서 계산
2. 하지만 &{year}년

문제3

[문제풀이]

//prompt를 통한 rawInput
const rawInput = prompt('태어난 해를 입력해주세요.', '')
const year = Number(rawInput)

//year를 통한 변수 계산식 설정
let e = (year%10)
let f = (year%12)

//나머지 값으로 12간지를 매칭하여 gan의 변수에 할당
let gan = ''
switch(e) {
  case 5: gan = "경"; break;
  case 6 : gan = "신"; break;
  case 7 : gan = "임"; break;
  case 8 : gan = "계"; break;
  case 9 : gan = "갑"; break;
  case 10 : gan = "을"; break;
  case 11 : gan = "병"; break;
  case 12 : gan = "정"; break;
  case 0 : gan = "무"; break;
  case 1 : gan = "기"; break;
}

//나머지 값으로 10천간을 매칭하여 belt의 변수에 할당
let belt = ''
switch(f) {
  case 5: belt = "자"; break;
  case 6 : belt = "축"; break;
  case 7 : belt = "인"; break;
  case 8 : belt = "묘"; break;
  case 9 : belt = "진"; break;
  case 10 : belt = "사"; break;
  case 11 : belt = "오"; break;
  case 12 : belt = "미"; break;
  case 0 : belt = "신"; break;
  case 1 : belt = "유"; break;
  case 2 : belt = "술"; break;
  case 3 : belt = "해"; break;
}

//alert를 통하여 출력
alert(`${year}년은 [${gan}${belt}년]입니다.`)

문제 4,5

정답은
4번 ④else
5번 ③true만 출력

문제 6

① 오늘 먹은 아침 / 점심 / 저녁 식사의 칼로리 계산 프로그램

// 아침,점심,저녁 칼로리 Input
<script>
 const breakfast_cal = Number(prompt("아침에 먹은 칼로리를 입력해주세요.", ''))
 const launch_cal = Number(prompt("점심에 먹은 칼로리를 입력해주세요.", ''))
 const dinner_cal = Number(prompt("저녁에 먹은 칼로리를 입력해주세요.", ''))
 
// 먹은 칼로리의 합계 계산
let total_cal = breakfast_cal + launch_cal + dinner_cal;

// 먹은 칼로리 출력
alert(`오늘 먹은 식사의 총 칼로리는 ${total_cal}cal 입니다.`)

</script>

② 어떤 은하까지 빛의 속도로 여행하면 10년이 걸릴 때, 그 거리를 구할 수 있을까?

• 우리는 거=속*시 를 배웠다.
• 거리 = 속력 * 시간
• 빛의 속도 = 299,792,458m/s

// 빛의 속도로 역산
const distance = ((299792458/1000) * (10*365*24*60*60))
const kr_distance = distance.toLocaleString('ko-KR');

alert(`어떤 은하까지의 거리는 ${kr_distance}km 입니다.`)

③ 내가 가진 돈으로 국밥 몇그릇 먹는지 계산하는 계산기

const money = Number(prompt("갖고 계신 돈을 말씀해주세요.", '원 단위로 입력해주세요.'))
const quantity = Math.trunc.(money/6000)

alert(`저는 국밥을 ${quantity}개 사먹을 수 있네요.`)