혼자서 공부하는 자바스크립트 Chapter 03 조건문

01. if 조건문

• if 조건문은 조건애 따라 코드를 실행하거나 실행하지 않도록 하기 위해 사용하는 구문입니다.
• else 구문은 if 조건문 뒤에 사용하며, if 조건문이 거짓일 때 사용합니다.
• 중첩 조건문은 조건문을 중첩해서 사용하는 경우를 의미합니다.
• if else if 조건문은 중첩 조건문에서 중괄호를 생략한 형태로, 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용합니다.

확인 문제

1. 다음 예제 중에서 ‘참입니다’를 출력하는 것은 몇번일까요?

   1. <script>
       	const x = 1
       	if (x > 4) {
      		console.log('참입니다')
          } 
      </script>

   2. <script>
      	const x = 0
      	if (x > 4) {
      		console.log('참입니다')
      	} 
      </script>

   3. <script>
      	const x = 10
      	if (x > 4) {
      		console.log('참입니다')
      	} 
      </script>

2. 사용자로부터 숫자 2개를 입력받아 첫 번째 입력 받은 숫자가 큰지, 두번째 입력받은 숫자가 큰지 구하는 프로그램을 다음 빈칸을 채워 완성해 보세요.

   <script>
   	const a = ______(prompt('첫 번째 숫자', ''))
   	const b = ______(prompt('두 번째 숫자', ''))
   
   	if (_____) {
   		alert('첫 번째로 입력한 숫자가 더 큽니다.')
   	} else if (_____) {
   		alert('두 숫자가 같습니다.')
   	} else {
   		alert('두 번째로 입력한 숫자가 더 큽니다.')
   	}
   </script>

3. 중첩 조건문은 2장에서 배운 논리 연산자를 적용해 하나의 if 조건문으로 만들 수 있습니다. 빈칸에 어떤 논리 연산자가 들어가야 할까요?

   if (x > 10) {
   	if (x < 20) {
   		console.log('조건에 맞습니다.')
   	}
   }

   if (x > 10 __ x < 20) {
   	console.log('조건에 맞습니다.')
   }

4. 사용자에게 숫자를 입력받아 양수, 0, 음수를 구분하는 프로그램을 만들어 보세요.
5. 사용자에게 숫자를 입력 받아 홀수와 짝수를 구분하는 프로그램을 만들어 보세요.
6. 현재가 몇 일인지 확인하고, 계절을 구분하는 프로그램을 만들어보세요.

코멘트

1. x가 10 보다 크면 코드를 실행하도록 if문이 작성되어 있기 때문에 답은 3
2. 입력 받는 값을 숫자로 자료형 변환해주어야하며, if문에서는 각각 알맞은 조건을 확인하는 연산자를 넣어 완성할 수 있다.

   <script>
   	const a = Number(prompt('첫 번째 숫자', ''))
   	const b = Number(prompt('두 번째 숫자', ''))
   
   	if (a > b) {
   		alert('첫 번째로 입력한 숫자가 더 큽니다.')
   	} else if (a === b) {
   		alert('두 숫자가 같습니다.')
   	} else {
   		alert('두 번째로 입력한 숫자가 더 큽니다.')
   	}
   </script>

3. 두 조건이 모두 만족해야 코드가 실행될 수 있어야하므로 논리곱 연산자를 사용해야한다.

   if (x > 10 && x < 20) {
   	console.log('조건에 맞습니다.')
   }

4. 입력 받은 값을 숫자 자료형으로 변환하고 조건에 따라 값을 출력하는 if else if문을 구성한다.

   <script>
   	const inputNum = Number(prompt('숫자를 입력하세요.', ''))
     
   	if (inputNum > 0) {
       	alert('입력한 숫자는 양수입니다.')
   	} else if (inputNum === 0) {
   		alert('입력한 숫자는 0입니다.')
   	} else if (inputNum < 0) {
   		alert('입력한 숫자는 음수입니다.')
   	} else {  // 숫자가 아닌 값을 입력했을 경우 사용자에게 알리는 메세지
   		alert('입력된 값은 숫자가 아닙니다.') 
   	}
   </script>

5. 숫자를 입력받아 짝수와 홀수를 구분하는 코드이다. 0은 수학적으로 짝수로 분류되기 때문에 단순하게 구분할 수 있다. 문자열 등의 정수가 아닌 값을 입력 받으면 사용자에게 알리는 코드를 작성했다.

   <script>
   	const inputNum = Number(prompt('숫자를 입력하세요.', ''))
     
   	if (inputNum % 2 === 0) {
   		alert('입력한 숫자는 짝수입니다.')
   	} else if (inputNum % 2 === 1) { 
   		alert('입력한 숫자는 홀수입니다.')
   	} else {
   		alert('입력한 값은 정수가 아닙니다.')
   	}
   </script>

6. 주석과 같이 계절을 구분하고 논리합 연산자를 이용해서 계절을 출력하도록 하였습니다.

   <script>
   	const date = new Date()
   	const month = date.getMonth()+1 
   	// js에서는 달을 0부터 11까지 셉니다. 편의를 위해 값에 1을 더합니다.
     
   	// 12월 1월 2월은 겨울
   	// 3월 4월 5월은 봄
   	// 6월 7월 8월 여름
   	// 9월 10월 11월은 가을
   	if (month === 3 || month === 4 || month === 5) {
   		alert('봄입니다.')
   	} else if (month === 6 || month === 7 || month === 8) {
       	alert('여름입니다.')
   	} else if (month === 9 || month === 10 || month === 11) {
   		alert('가을입니다.')
   	} else {
   		alert('겨울입니다.')
   	}
     
   	// 아래 코드도 동일하게 동작한다.
   
   	if( 2 < month < 6) {
   		alert('봄입니다.')
   	} else if (5 < month < 9) {
   		alert('여름입니다.')
   	} else if (8 < month < 12) {
   		alert('가을입니다.')
   	} else {
   		alert('겨울입니다.')
   	}
   </script>

---

02. switch 조건문과 짧은 조건문

• switch 조건문은 값에 따라 조건 분기를 걸어주는 조건문입니다.
• 조건부 연산자는 A ? B : C와 같은 형태로 피연산자 3개를 갖는 연산자입니다. 조건 분기에 사용할 수 있습니다.
• 짧은 조건문은 논리 연산자의 특이한 성질을 사용해서 조건 분기에 활용하는 코드입니다.

확인 문제

1. 다음 코드가 어떤 형태로 실행될지 예측해 보세요.

   <script>
   	const result = (100 > 200)
   	 ? prompt('값을 입력해 주세요.', '')
   	 : confirm('버튼을 클릭해주세요.');
   	alert(result);
   </script>

2. [누적 예제: 태어난 연도를 입력받아 띠 출력하기] 예제(152쪽)에서 if 조건문을 switch 조건문으로 변경해서 구현해 보세요.

   <script>
   	const rawInput = prompt('태어난 해를 입력해 주세요.', '')
   	const year = Number(rawInput)
   	const e = year % 12
   
   	let result
   
   
   
   
   
   
   
   	alert(`${year}년에 태어났다면 ${result} 띠입니다.`)
   </script>

3. ‘태어난 연도를 입력받아 띠 출력하기’ 예제(152쪽)에서 동물 이름을 쥐부터 ‘자, 축, 인, 묘, 진, 사, 오, 미, 신, 유, 술, 해’로 변경하고, 입력한 연도의 ‘갑, 을, 병, 정, 무, 기, 경, 신, 임, 계’를 계산합니다. 이 둘을 합쳐 다음과 같이 출력하는 프로그램을 만들어 보세요.

   <script>
   	const rawInput = prompt('태어난 해를 입력해 주세요.', '')
   	const year = Number(rawInput)
   	const e = year % 12
   
   	let 간
   
   
   
   
   	let 띠
   
   
   
   
   	alert(`${year}년은 ${간}${띠} 년입니다.`)
   </script>

4. 다음 중에서 switch 조건문과 직접적인 관련이 없는 키워드를 고르세요.
   1. switch
   2. break
   3. default
   4. else
5. 다음 중에서 다른 실행 결과를 내는 코드를 고르세요.
   1. true ? alert('출력A') : alert('출력B')
   2. false ? alert('출력B') : alert('출력A')
   3. true || alert('출력B')
   4. true && alert('출력A')

코멘트

1. 100 > 200 의 결과는 false 이므로 false 값이 출력되고 ‘버튼을 클릭해주세요.’라는 텍스트가 표시된다. confirm 함수가 동작하므로 확인 버튼과 취소버튼이 표시된다. 확인 버튼을 누르면 true, 취소 버튼을 누르면 false가 나타난다.
2. tti 라는 배열을 만들고 그 안에 각 12지간을 요소로 할당한다. e 값을 검사하고 그 결과에 따라 알맞은 요소를 출력한다. 첫번째 방법은 모든 조건을 하드코딩하여 많은 문장을 작성해야한다. 의도한 대로 정상적으로 작동하긴 하겠지만 아름답지 않다. 아래 방법이 조금 더 우아하게 느껴진다.

   <script>
   	const rawInput = prompt('태어난 해를 입력해 주세요.', '')
   	const year = Number(rawInput)
   	const e = year % 12
   
   	const tti = ['원숭이', '닭', '개', '돼지', '쥐', '소', '호랑이', '토끼', '용', '뱀', '말', '양']
   	let result
     
   	switch (e) {
   		case 0 : result = tti[0]; break;
   		case 1 : result = tti[1]; break;
   		case 2 : result = tti[2]; break;
   		case 3 : result = tti[3]; break;
   		case 4 : result = tti[4]; break;
   		case 5 : result = tti[5]; break;
   		case 6 : result = tti[6]; break;
   		case 7 : result = tti[7]; break;
   		case 8 : result = tti[8]; break;
   		case 9 : result = tti[9]; break;
   		case 10: result = tti[10]; break;
   		case 11: result = tti[11]; break;
   		default: alert(`올바른 입력 값이 아닙니다.`); break;
   	}
   
   	// 이 방법으로도 풀이할 수 있다.
   	// year에 숫자가 아닌 자료형이 입력된 경우 숫자 연산자인 `%`를 실행할 수 없다.
   	// 따라서 e가 NaN(false)을 반환한다.
   	// 정수를 제외한 다른 숫자를 입력한 경우 result를 출력시 undefined로 나타난다.
   	// 따라서 이 경우에는 정수를 입력할 것을 요청하는 메세지를 표시하고 프로그램을 종료한다.
   	switch (e) {
   		case e:
   			result = tti[e];
   			if (result) {
   				alert(`${year}년에 태어났다면 ${result} 띠입니다.`);
   			} else {
   				alert(`정수를 입력해야합니다.`);
   			}
   			break;
   		default:
   			alert(`올바른 입력 값이 아닙니다.`);
   			break;
   	}
   </script>

3. 조건 문이 없더라도 입력 값에 따른 결과를 출력할 수 있지만 사용자가 정수가 아닌 수를 입력하거나, 숫자 자료형이 아닌 값을 입력했을때 분기하도록 코드를 작성했다.

   <script>
   	const rawInput = prompt('태어난 해를 입력해 주세요.', '')
   	const year = Number(rawInput)
   	const zodiac = year % 12
   	const skyStems = year % 10
   	const tti = ['신', '유', '술', '해', '자', '축', '인', '묘', '진', '사', '오', '미']
   	const gan = ['경', '신', '임', '계', '갑', '을', '병', '정', '무', '기']
     
   	switch (zodiac) {
   		case zodiac:
   			let 띠 = tti[zodiac];
   			let 간 = gan[skyStems];
         
   			if (띠) {
   				alert(`${year}년은 ${간}${띠} 년입니다.`)
   			} else {
   				alert(`정수를 입력해 주세요.`);
   			}
   			break;
   		default:
   			alert(`올바른 입력 값이 아닙니다.`);
   			break;
   	}
   </script>

4. else는 if문에서 쓰이는 것으로 switch문과는 직접적인 관계가 없다, 따라서 4. else
5. 불 표현식 || 불 표현이 거짓일때 실행할 문장 이므로 3.은 실행되지 않는다. 나머지 코드는 ‘출력A’를 출력한다.