TIL.03 삼항 조건부 연산자

1. 삼항 조건 연산자란?
2. 삼항 조건 연산자의 사용법
3. expression vs statement
4. 삼항 조건 연산자의 장점과 단점

1. 삼항 조건 연산자(조건부 연산자)란?

---

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 맨 앞에 조건문 들어가고. 그 뒤로 물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어갑니다. 바로 뒤로 콜론(:)이 들어가며 조건이 거짓falsy이라면 실행할 식이 마지막에 들어갑니다. 보통 if 명령문의 단축 형태로 쓰입니다.

• MDN -

2. 삼항 조건 연산자의 사용법

---

• condition을 평가하여 truthy 값이라면 value1, 그렇지 않으면 value2가 반환된다.
• 삼항 조건 연산자는 if 문과 다르게 평가 결과를 바로 변수에 담을 수 있다.
• 삼항 조건 연산자는 표현식으로 그 자체로서 값을 나타낸다.
• template literal은 $ {expression}로 표현식을 그 안에 담을 수 있다. 그러므로 표현식인 삼항 조건 연산자과 조합해서 사용이 가능하다.

let result = condition ? value1 : value2;

// ex)1
let age = 19
let accesssAllowed = (age > 18) ? 'allowed' : 'not allowed'

// 'allowed' 리턴

// ex)2
const age = 19
const hasDriverLicense = `I have ${(age > 18) ? 'a' : 'no' } driver license` 

// 'I have a driver license'

3. expression vs statement

---

Expression(표현식)

• 표현식자체만으로 값을 나타낸다.
• 값, 변수, 연산자 조합
• 하나의 값으로 수렴하는 코드 조각 (하나의 단일값으로 평가될 수 있다.)
• statement의 부분집합
• 함수 호출은 이에 해당한다.
• (자바스크립트에서는 함수가 아무것도 반환하지 않아도 undefined가 반환하기 때문에 가능)

"string"
true || false
1 + 2 + 3

Statement(문장)

• 실행 가능한 최소의 독립적인 코드 조각
• 컴파일러가 이해하고 실행할 수 있는 모든 구문
• 프로그래밍에서 결과를 얻기 위해 수행하는 각각의 action을 말한다.
• 함수 선언, 제어문(if, switch, 반복문, …)이 이에 해당한다.

const one = 1;
if (true) { // do something }
function sample() { // do something }

4. 삼항 조건 연산자의 장점과 단점

---

장점

• 간결하고 짧은 코드로 조건문의 기능을 수행할 수 있다.
• 조건문의 기능을 수행하지만 표현식으로서 활용도가 높다.
• 조건평가의 결과를 변수에 바로 담을 수 있다.

단점

• 무분별하게 사용 시 코드는 짧아지지만 가독성이 낮아진다.
• 아래의 두 코드는 똑같이 작동하지만, if문을 사용한 예시가 가독성이 높다.

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

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}

https://mindock.github.io/knowledge/expression-statement/
https://ko.javascript.info/ifelse
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator