[JavaScript] 조건 처리와 논리 연산자

if와 '?'를 사용한 조건 처리

'if'문

• if (...) 문은 boolean값을 반환한다

falsy(거짓 같은)값

• 숫자 0, 빈 문자열 "", null, undefined, NaN 은 boolean형으로 변환 시 모두 false가 됨.
• truthy(참 같은)값 : 이 외의 값

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

---

'else if'문

• 맨 위 if문부터 차례로 조건을 확인하고 조건이 해당하는 절 내의 실행문을 실행한다.

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

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

👉 break;를 넣지 않으면 차례로 모두 비교하므로 여러 조건에 해당될 수도 있다는 점 참고!

---

조건부 연산자 '?'

• '물음표 연산자' 또는 '삼항 연산자' 라고도 불린다.
• 자바스크립트에서 피연산자를 3개나 받는 유일한 연산자이다.

• 조건에 따라 다른 값을 변수에 할당할 때 사용
• condition이 truthy면 value1, falsy면 value2를 반환

let result = condition ? value1 : value2;

• 우선순위 : 물음표 연산자(?) < 비교 연산자(>)

// 연산자 우선순위에 의해 조건문을 무조건 괄호로 감쌀 필요는 X
let accessAllowed = age > 18 ? "adult" : "student";
let accessAllowed = (age > 18) ? "adult" : "student";

👉 그러나 코드의 가독성 향상을 위해 괄호를 사용하자!

---

다중 '?'

• 물음표 연산자를 여러 개 연결하여 복수 조건 처리
  아래 두 예시는 같은 로직이다.

if..else

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

삼항 연산자

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

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

alert( message );

부적절한 '?'

• 평가 결과를 변수에 할당하지 않는데 물음표 연산자를 사용하는 경우

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');

▶ 이 경우에는 if문이 적절함!

---

---

논리 연산자

• 논리 연산자는 피연산자로 boolean형 뿐만 아니라 모든 타입의 값을 받을 수 있다.

|| (OR)

OR 연산자

• 인수 중 하나라도 true이면 true를 반환

OR 연산자와 피연산자가 여러 개인 경우

• 첫 번째 truthy를 찾는 AND 연산자 '&&'

result = value1 || value2 || value3;

👉 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 평가
👉 각 피연산자를 불린형으로 변환한 값이 true이면 연산을 멈추고, 해당 피연산자 반환
👉 피연산자를 모두 평가한 경우(모두 false), 마지막 피연산자 반환

[활용]

1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 출력 : 바이올렛

2. 단락 평가 (short circuit evaluation)

• 왼쪽에서 오른쪽으로 평가를 진행하면서, truthy를 만나면 평가를 멈추는 프로세스
• 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식일 때 명확히 볼 수 있다.

ex1)

true || alert("not printed"); // 출력 X
false || alert("printed"); // 출력

ex2)

function isName(name) {
  return name || "빈 스트링입니다.";
}

---

&& (AND)

AND 연산자

• 두 피연산자가 모두 참일 때 true 반환

AND 연산자와 피연산자가 여러 개인 경우

• 첫 번째 falsy를 찾는 AND 연산자 '&&'

result = value1 && value2 && value3;

👉 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 평가
👉 각 피연산자를 불린형으로 변환한 값이 false이면 연산을 멈추고, 해당 피연산자 반환
👉 피연산자를 모두 평가한 경우(모두 true), 마지막 피연산자 반환

ex1)

// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0

ex2)

alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 마지막 값, 3

주의할 점

❗ &&의 우선순위가 || 보다 높다!
❗ AND 연산자 &&를 if문을 짧게 줄이는 용도로 사용하지 말 것

let x = 1;

(x > 0) && alert( '0보다 큽니다!' );
if (x > 0) alert( '0보다 큽니다!' );

👉 if문을 사용한 예시가 무엇을 구현하고자 하는지 더 명백하고 가독성도 좋으므로, 목적에 맞게 사용하자.

---

!(NOT)

• 피연산자를 불린형으로 변환해 역의 값을 반환
  불린형 변환 👉 역의 값 반환

alert( !true ); // false
alert( !0 ); // true

• 두 개 연달아 사용(!!) : 값을 불린형으로 변환
  불린형 변환 👉 역의 값 👉 역의 값 반환

alert( !!"non-empty string" ); // true
alert( !!null ); // false

➕ 내장 함수 Boolean을 사용하면 같은 효과!

alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false

❗ NOT 연산자의 우선순위가 모든 논리 연산자 중에 가장 높다.