온보딩 2일차(2023.03.09) - 조건문

최재홍·2023년 3월 9일
0

if 조건문

조건문을 사용하면 조건에 따라 코드를 실행할 수도 있고, 실행하지 않을 수도 있다. 이처럼 코드가 실행되는 흐름을 변경하는 것을 조건 분기라고 부른다.

자바스크립트에서 가장 일반적인 조건문은 if 조건문이다. 불 표현식의 값이 true면 중괄호 안의 문장을 실행하고 false면 문장을 무시한다.

if(불 값이 나오는 표현식) {
  불 값이 참일 때 실행할 문장
}

if else 조건문

자바스크립트는 좀더 편리하게 조건문을 사용할 수 있도록 서로 반대되는 상황을 표현하는 구문을 제공한다. 바로 else구문이다.

<script>
if(불 값이 나오는 표현식) {
  불 값이 참일 때 실행할 문장
} else {
  불 값이 거짓일 때 실행할 문장
}
</script>

중첩 조건문

조건문 안에 조건문을 중첩해 사용하는 것을 중첩 조건문이라고 한다. 중첩 조건문의 형태는 다음과 같다.

<script>
if (불 값이 나오는 표현식1) {
  if (불 값이 나오는 표현식 2) {
    표현식 2가 참일 때 실행할 문장
  } else {
    표현식 2가 거짓일 때 실행할 문장
  }                         //여기까지 표현식 1이 참이면 실행
} else {
  if (불 값이 나오는 표현식 3) {
    표현식 3이 참일 때 실행할 문장
  } else {
    표현식 3이 거짓일 때 실행할 문장
  }
}                            //여기까지 표현식 1이 거짓이면 실행
</script>

if else if 조건문

<script>
if (불 표현식) {
  문장
} else if (불 표현식) {
  문장
} else if (불 표현식) {
  문장
} else {
  문장
}
</script>

switch 조건문

다음은 switch 조건문의 기본형태이다.

<script>
switch (자료) {
  case 조건a:
    break
  case 조건b:
    break
  default:    //default 키워드는 생략할 수 있다.
    break
}
</script>

ex)

<script>
//변수 순언
const input = Number(prompt('숫자를 입력하세요.', '숫자'))

//조건문
switch (input % 2) {
  case 0:
    alert('짝수입니다.')
    break
  case 1:
    alert('홀수입니다.')
    break
  default:
    alert('숫자가 아닙니다.')
    break
}
</script>

break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드이다. 코드를 읽다가 break 키워드를 만나면 break 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져나간다.


조건부 연산자

자바스크립트에는 조건문과 비슷한 역할을 하는 연산자가 있다. 조건부 연산자이고 기본 형태는 다음과 같다.

불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과

자바스크립트에서 항을 3개 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자라고 부르기도 한다.


짧은 조건문

짧은 조건문은 논리 연산자의 특성을 조건문으로 사용하는 것이다.

논리합 연산자를 사용한 짧은 조건문

자바스크립트는 참이 확실할 때 추가 연산을 진행하지 않는다. 즉, 논리합 연산자의 좌변이 참이면 우변을 실행하지 않는다.

불 표현식 || 불 표현식이 거짓일 때 실행할 문장

논리곱 연산자를 사용한 짧은 조건문

논리곱 연산자는 양변이 모두 참일 때만 참이다. 따라서 논리곱 연산자는 좌변이 거짓이면 우변을 실행하지 않는다.

결과가 거짓인 불 표현식 && 불 표현식이 참일 때 실행할 문장

확인문제

  1. 다음 코드가 어떤 형태로 실행될지 예측해보세요.
<script>
  const result = (100 > 200)
    ? prompt('값을 입력해주세요', '')
    : confirm('버튼을 클릭해주세요')
  alert(result)
</script>

result는 할당받은 삼항연산자에 의해서 값이 결정되는데 삼항연산자의 좌변에 해당하는 불 값이 false이기 때문에 ":"이하의 confirm 키워드가 실행되게 된다. confirm키워드는 사용자가 어떤 버튼을 누르는지에 따라서 true나 false값을 반환하게 되는데 이 값을 result에 상수로 할당하게 되기 때문에 확인을 누르면 경고창에 true가 출력되고, 취소를 누르면 false가 출력된다.


  1. 태어난 연도를 입력받아 띠 출력하기 예제에서 if 조건문을 switch 조건문으로 변경해서 구현해보세요.
<script>
  const rawInput = prompt('태어난 해를 입력해주세요.','');
  const year = Number(rawInput);
  const e = year % 12;
  
  let result
  switch(e) {
  case 0:
    result = '원숭이';
    break;
  case 1:
    result = '닭';
    break;
  case 2:
    result = '개';
    break;
  case 3:
    result = '돼지';
    break;
  case 4:
    result = '쥐';
    break;
  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;
  }
  
  alert(`${year}년에 태어났다면 ${result}띠입니다.`)
</script>

  1. '태어난 연도를 입력받아 띠 출력하기'에서 동물 이름을 쥐부터 '자, 축, 인, 묘, 진, 사, 오, 미, 신, 유, 술, 해'로 변경하고, 입력한 연도의 '갑, 을, 병, 정, 무, 기, 경, 신, 임, 계'를 계산합니다. 이 둘을 합쳐 다음과 같이 출력하는 프로그램을 만들어보세요.
<script>
  const rawInput = prompt('태어난 해를 입력해주세요.', '');
  const year = Number(rawInput);
  
  let gan = '경,신,임,계,갑,을,병,정'.split(',');
  let ji = '신,유,술,해,자,축,인,묘,진,사,오,미'.split(',');
  
  alert(`${year}년은 ${gan[year % 10]}${ji[year % 12]}년입니다.`);
</script>

0개의 댓글

관련 채용 정보