[JavaScript] if와 '?'를 사용한 조건 처리 (if문, else절, else if, ?)

   목차 

1. 조건문을 만드는 법
2. if 문
3. 불린형으로의 변환
4. else 절 
5. else if 로 복수 조건 처리하기
6. 조건부 연산자 '?'
7. 다중 '?'

 

 

 

 조건문을 만드는 법   

 

- "if문" 
- 조건부 연산자(물음표 연산자) "?"

 

---

 

 

 if 문 

 

if문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true면 코드 블록이 실행된다.

if (year == 2015) {
alert ( "정답입니다!" );
alert ( "아주 똑똑하시네요!" );
}

 

 

---

 

 

 불린형으로의 변환 

 

if문은 괄호 안의 표현식을 평가하고, 그 결과를 불린값으로 변환시킨다.

따라서 괄호안의 표현식을 평가했을 때, true면 실행하고, false면 실행하지 않는다.

if (0) { // 0은 falsy이다. 따라서 아래의 코드는 절대 실행되지 않는다.
...
}

 if (1) { // 1은 truthy이다. 따라서 아래의 코드는 항상 실행된다.
 ... 
 }

 

 

---

 

 

 else절 

 

if 조건이 거짓일 때,  else절이 실행된다.

let year = prompt ("저는 몇년 도에 졸업했을까요?", '');

if (year == 2022) {
 alert ('정답입니다!'); // 2022를 입력한 경우 (조건이 true)
 } else {
 alert ('오답입니다!'); // 2022 의외의 값을 입력한 경우 (조건에 false)
 }

 

 

---

 

 

 else if 로 복수 조건 처리하기 

 

let year = prompt ('저는 몇 년도에 졸업했을까요?', '');

if (year < 2022) {
  alert ( '숫자를 좀 더 올려보세요!' );
} else if (year > 2022) {
  alert ( '숫자를 좀 더 내려보세요!' );
} else {
  alert ( '정답입니다!' );
}

 

1) 사용자가 입력한 값이 2022보다 작으면 (year  < 2022가 true면), if절 실행  // '숫자를 좀 더 올려보세요!'

2) 사용자가 입력한 값이 2022보다 크면 (year < 2022가 false면,) else if절을 조건을 평가한다.

3) 사용자가 입력한 값이 2022보다 크면 (year  > 2022 true면), else if절 실행  // '숫자를 좀 더 내려보세요!'

4) 사용자가 입력한 값이 2022이면, (year<2022도, year>2022도 false면,) else절이 실행된다.  // '정답입니다' 

 

 

---

 

 

 조건부 연산자 '?' 

 

조건에 따라 다른 값을 변수에 할당해줘야할 때 사용한다

let accessAllowed; 
let age = prompt('나이를 입력해주세요.', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
} 

alert(accessAllowed); // 알람창에 true 혹은 false가 출력됨

위의 코드는 아래와 같이 쓸 수 있다.

let age = prompt('나이를 입력해주세요.', '');

let accessAllowed = (age > 18) ? true : false;

alert(accessAllowed);

 

1. age > 18이 true면, true가 accessAllowed에 할당된다.  → 알람창에 true가 출력된다.

2. age > 18이 false면, false가 accessAllowe에 할당된다. → 알람창에 false가 출력된다.

 

 

---

 

 

 다중 '?' 

 

let age = prompt('나이를 입력해주세요.', '');

if (age < 3) {
  message = '아가네?';
} else if (age < 20) {
  message = '좀 컸네?';
} else if (age < 50) {
  message = '좀 늙었네?';
} else if (age < 100) {
  message = '마이 늙었네?';
} else {
  message = '나이가 아주 많거나, 나이가 아닌데?' 
}  
   
alert ( message );

위의 코드는 아래와 같이 쓸 수 있다.

let age = prompt('나이를 입력해주세요.', '');

let message = (age < 3) ? '아가네?' :
  (age < 20) ? '좀 컸네?' :
  (age < 50) ? '좀 늙었네?' :
  (age < 100) ? '마이 늙었네?' :
  '나이가 아주 많거나, 나이가 아닌데?';
  
alert ( message );

 

 

 

 

참고 자료 
https://ko.javascript.info/ifelse