07.2. 삼항 조건,논리,쉼표,그룹 연산자

삼항 조건 연산자란

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없습니다.

조건식 ? 조선식이 true일 때, 반환할 값 : 조건식이 false일 때, 반환할 값

const result = score >= 60 ? "pass" : "fail";

삼항 조건 연산자는 첫 번째 연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번쨰 피연산자를 반환한다. 즉, 삼항 조건 연산자는 두 번째 피연산자 또는 세 번째 피연산자로 평가되는 표현식이다.

물음표(?) 앞의 첫 번째 피연산자는 조건식, 즉 불리언 타입의 값으로 평가될 표현식이다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환됩니다. 이떄, 조건식이 참이면 콜론(:)앞의 두 번째 피연산자가 평가되어 반환디고, 거짓이면 콜론(:)뒤의 세 번째 피연산자가 평가되어 반환됩니다.

const x = 2;

// 2 % 2 는 0이고 0은 false로 암묵적 타입으로 반환된다.
const result = x % 2 ? "홀수" : "짝수";

console.log(result); // 짝수

삼항 조건 연산자의 첫 번째 피연산자는 조건식이므로 삼항 조건 연산자 표현식은 조건문이다.

Key Point💡

• if...else문을 삼항 조건 연산자 표현식으로 유연하게 처리할 수 있다. (JSX문법에서 마크업 부분에서 사용)

let x = 2,
  result;

// 2 % 2는 0이고, 0은 false로 암묵적 타입 변환한다.
if (x % 2) result = "홀수";
else result = "짝수";

console.log(result);

삼항 조건 연산자 표현식은 if...else문과 차이가 있다. 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만, if...else문은 값처럼 사용할 수 없다.

Key Point💡

• if...else문은 표현식이 아닌, 문이다. 따라서 if...else문은 값처럼 사용할 수 없다.

let x = 10

// if...else문은 표현식이 아닌, 문이다. 따라서 값처럼 사용할 수 없다.
var result = if(x%2){result = '홀수'; } else {result='홀수'}

// Uncaught SyntaxError: Unexpected token 'if'

Key Point💡

• 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

• 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 되어 사용할 수 있다.

var x = 10;

// 삼항 조건 연산자 표현식은 표현식인 문이다. 따라서 값처럼 사용할 수 있다.
var result = x % 2 ? "홀수" : "짝수";

console.log(result); // 짝수

Key Point💡

• 조건에 따라 삼항 조건 연산자 표현식을 사용하는 편이 유리할 수 있지만, 조건이 여러개라면 가독이 if...else 가독성이 더 낫다.

논리 연산자

논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다.

논리 연산자	의미	부수효과
\\	논리합(OR)	X
&&	논리곱(AND)	X
!	부정(NOT)	X

// 논리합(||) 연산자
true || true; // true
true || false; // true
false || true; // true
false || false; // false

// 논리곱 연산자(&&)
true && true; // true
true && false; // false
false && true; // false
false && false; // false

// 논리 부정(!) 연산자
!true; // false
!false; // true

논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환한다.

// 암묵적 타입 변환
!0; // true
!"Hello"; // false

논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수 도 있다. 논리합(||) 또는 논리곱(&&)연산자 표현식은 언제나 2 개의 피연사자 중 어느 한 쪽으로 평가된다.

// 단축 평가

"Cat" && "Dog"; // Dog

쉼표 연산자

쉼표(,)연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

var x, y, z;

(x = 1), (y = 2), (z = 3); // 3

그룹 연산자

소괄호(())로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. 따라서, 그룹 연산자를 사용하면 연산자의 우선순위를 조정할 수 있다.

10 * 2 + 3; // 23

// 그룹 연산자를 사용하면 우선순위를 조절
10 * (2 + 3); // 50

요약

• 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만, if...else문은 값처럼 사용할 수 없다.

• if...else문은 표현식이 아닌, 문이다. 따라서 값처럼 사용할 수 없다.

• 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

• 논리합(||) 또는 논리곱(&&)연산자 표현식은 언제나 2 개의 피연사자 중 어느 한 쪽으로 평가된다.

• 그룹 연산자를 사용하면 연산자의 우선순위를 조정할 수 있다.