JS_2. 조건문

조건문 기초

조건문은 특정 조건에 따라 다른 행동을 취해야 할 경우에 유용하게 사용된다. 이러한 조건문은 if와 ?를 사용하여 작성하며 다중 조건 비교를 위한 논리 연산자에 대해서도 함께 알아보자.

if와 비교연산자

if (year === 2015) {
  return true;
} else if (year === 2021) {
  alert("올해입니다.");
} else {
  return false;
}

if조건문은 if와 조건, 그리고 조건이 true라면 실행할 중괄호 블록으로 이루어져 있다. else if를 통해 첫 값이 false여도 계속해서 다른 조건을 비교할 수 있으며 else는 최종적으로 모든 값이 false라면 실행된다. 이러한 else 조건을 설정하지 않으면 false 일때의 행동이 없어서 undefined가 반환되는 경우를 종종 볼 수 있으므로 특정 값을 반환하는 조건문을 설정할 때는 주의해야 한다.

이러한 if 문의 조건식 부분의 ===를 비교연산자라고 부르며, ==(동등연산자)와 ===(일치연산자)의 두 가지 형태가 존재한다. 그러나 ==는 느슨한 비교연산자로 자동으로 타입을 변경해 비교하기 때문에 결과 예측이 까다롭다. 특별한 경우가 아니라면 되도록 일치연산자를 사용하는 것이 좋다.

물음표 조건문

조건문은 단순히 물음표를 사용해서 표현할 수 있다. 이러한 방식은 피연산자가 세 개기 때문에 '삼항연산자'로 불리며 리액트의 조건문은 삼항연산자만 사용할 수 있기에 형태를 알아두는 것이 좋다.

let result = condition ? value1 : value2;

물음표 조건문은 condition을 평가해서 만약 true라면 value1 을, false라면 value2 를 반환한다. condition 부분은 if 문과 같이 괄호로 감쌀 수 있다. 이러한 물음표 연산자를 여러 개 연결하면 다중 물음표 연산자를 구성해 복수의 조건을 처리할 수 있다.

let message = (age < 3) ? 'hello baby?' :
  (age < 18) ? 'hi!' :
  (age < 100) ? 'greetings' :
  'wrong age';

alert( message );

위 예시는 간단한 다중 물음표 조건문 예시로 첫 조건이 true라면 'hello baby?'를 반환하지만, false라면 다음 조건을 검토한다. 이런 식으로 검토가 계속되고 어떠한 조건에도 true가 아니라면 마지막 'wrong age'를 리턴한다.

물음표 연산자는 if 문에 비해 조금 더 간결하지만, 옆으로 길어지면 가독성을 위해 if문을 사용하는 것이 바람직하다. 왜냐하면, 인간의 눈은 수직으로 읽는 것이 익숙하기 때문이다!

논리 연산자

논리 연산자는 여러 조건을 동시에 평가하도록 도와주며 자바스크립트에는 다음의 3가지 논리 연산자가 존재한다.

||(OR)연산자는 다음과 같이 둘 중 하나만 true여도 true를 반환하며 피연산자가 불린값이 아니면 불린 형태로 변형하여 비교한다.

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

&&(AND)연산자는 둘 다 true여야 true를 반환한다.

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

만약 여러 연산자가 반복적으로 사용된다면 연산은 어떠한 순서로 이루어질까? ||(OR)연산자의 경우 왼쪽부터 처음 true인 값을 반환한다. 이와 마찬가지로 &&(AND)연산자 역시 왼쪽부터 비교하지만 처음 false인 값을 반환한다.

마지막으로 !(NOT)연산자는 피연산자를 불린형으로 변환한 뒤 변환된 불린값의 반대를 리턴한다. 만약 !true 면 false가 되는 식으로 만약 이러한 !(NOT)연산자를 두 번 붙이면 내장 함수 Boolean을 사용한 것과 같이 피연산자를 불린형태로 변환한다.

연산자 우선순위

만약 이러한 논리 연산자들이 동시에 사용된다면 어떤 연산이 먼저 시작될까? 다음과 같은 경우를 생각해 보자.

true || false && false; // true
(true || false) && false; // false

위 사례를 보면 확실히 &&연산자가 ||에 우선한다는 것을 알 수 있다. 그렇다면 다른 연산자들의 우선순위는 어떨까?

우선순위	연산자	설명
19	( )	괄호
18	.	객체
18	[ ]	객체의 멤버
17	()	함수 호출
17	new	객체 생성
16	++	증가 (postfix)
16	--	감소 (postfix)
15	++	증가 (prefix)
15	--	감소 (prefix)
15	!	논리 부정
15	typeof	타입
14	*	곱하기
14	/	나누기
14	%	나머지
13	+	더하기
13	-	빼기
11	<	보다 작은
11	<=	작거나 같은
11	>	보다 큰
11	>=	크거나 같은
10	==	비교(형변환)
10	===	일치
10	!=	불일치 (형변환)
10	!==	불일치
6	&&	논리 AND
5	||	논리 OR
3	=	할당
3	+=
3	-=
3	*=

출처: MDN - 연산자 우선순위

참고
You Don't Know JS
모던 JavaScript 튜토리얼