11. if와 '?'

조건 처리: if문과 ? 연산자의 차이와 활용

if문과 ?(삼항 연산자)는 자바스크립트에서 조건에 따라 동작이나 값을 처리할 때 사용하는 도구다.

두 방법의 차이와 사용 목적을 이해하면 더 간결하고 명확한 코드를 작성할 수 있다.

---

1. 기본 개념

• if문: 특정 조건에 따라 코드 블록을 실행한다. "문(statement)"이며, 값을 반환하지 않는다.
• ? 연산자: 조건에 따라 값을 반환하는 "식(expression)"이다. 값을 반환하므로 변수에 직접 할당할 수 있다.

---

2. if문

문법:

if (조건식) {
  // 조건이 참일 때 실행되는 코드
}

예제:

let 출판년도 = prompt('ES6는 몇 년도에 발표되었을까요?', '');

if (출판년도 == 2021) {
  alert('정답입니다!');
}

• 조건이 참일 경우 중괄호 {} 안의 코드를 실행한다.
• 가독성을 위해 항상 중괄호를 사용하는 것이 좋다.

---

else와 else if 사용

• else: 조건이 거짓일 때 실행되는 코드를 작성한다.
• else if: 복수의 조건을 처리할 수 있다.

예제:

let 출판년도 = prompt('ES6는 몇 년도에 발표되었을까요?', '');

if (출판년도 < 2021) {
  alert('더 큰 숫자를 입력해보세요.');
} else if (출판년도 > 2021) {
  alert('더 작은 숫자를 입력해보세요.');
} else {
  alert('정답입니다!');
}

---

Truthy와 Falsy

if문은 조건식을 평가해 불린 값으로 변환한다.

• Falsy 값: 0, ""(빈 문자열), null, undefined, NaN → false
• Truthy 값: 이외의 값 → true

예제:

if (0) {
  alert('실행되지 않습니다.'); // 0은 falsy 값
}

if ('hello') {
  alert('실행됩니다.'); // 'hello'는 truthy 값
}

---

3. 조건부 연산자 ?

문법:

let 결과값 = 조건식 ? 참일_때_값 : 거짓일_때_값;

• 조건식이 참일 경우 참일_때_값을 반환하고, 거짓일 경우 거짓일_때_값을 반환한다.
• 주로 값을 변수에 할당하거나 간단한 조건 처리에 사용한다.

예제:

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

let 접근허용 = (나이 > 20) ? true : false;
alert(접근허용);

• (나이 > 20) 조건이 true면 접근허용에 true를, 아니면 false를 할당한다.

if문과 비교

if문으로 작성하면 다음과 같다:

let 접근허용;

if (나이 > 20) {
  접근허용 = true;
} else {
  접근허용 = false;
}

---

4. 다중 조건과 ?

• 여러 조건을 처리할 때, ? 연산자를 중첩하여 사용할 수 있다.
• 하지만 복잡해지면 가독성이 떨어지므로, 적절히 사용해야 한다.

예제:

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

let 인사말 = (나이 < 5) ? '아기야 안녕?' :
             (나이 < 20) ? '안녕!' :
             (나이 < 80) ? '환영합니다!' :
             '정말 연세가 많으시네요!';

alert(인사말);

동일한 로직을 if..else로 작성:

if (나이 < 5) {
  인사말 = '아기야 안녕?';
} else if (나이 < 20) {
  인사말 = '안녕!';
} else if (나이 < 80) {
  인사말 = '환영합니다!';
} else {
  인사말 = '정말 연세가 많으시네요!';
}

---

5. 주의 사항: 부적절한 ? 사용

? 연산자는 값을 반환하는 식이므로, 조건에 따라 동작을 수행할 때는 if문을 사용하는 것이 더 적합하다.

잘못된 예제:

let 회사이름 = prompt('자바스크립트를 만든 회사는 어디일까요?', '');

(회사이름 == '모질라') ? alert('정답입니다!') : alert('오답입니다!');

위 코드는 가독성이 낮다. if문을 사용하는 것이 더 적합하다:

let 회사이름 = prompt('자바스크립트를 만든 회사는 어디일까요?', '');

if (회사이름 == '모질라') {
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}

---

6. 요약

• if문: 조건에 따라 코드 블록을 실행한다.
• ? 연산자: 조건에 따라 값을 반환하며, 간단한 조건 처리에 적합하다.
• 복잡한 조건은 if..else를 사용하여 가독성을 유지한다.
• 조건에 따라 동작만 수행할 때는 if문, 값을 처리할 때는 ? 연산자를 사용하자.