삼항 연산자와 논리 연산자

자바스크립트가 아니더라도 언어를 배운 사람이라면 삼항 연산자와 논리 연산자를 잘 알 것이다.
React 개발을 하다보면, 삼항 연산자를 굉장히 자주 쓰게 되고, 논리 연산자는 평소 알던 방식과는 다른 방식으로 사용을 하게 된다. 논리 연산자의 정확한 의미를 몰랐기 때문에 필자는 이 외에 방식은 이번 개발 과정에서 처음 알게 되었다. 이 두 연산자를 정확히 아는 것이 React 개발에 있어 매우 중요하다고 생각했기 때문에, 따로 정리를 해보도록 하겠다.

삼항 연산자

삼항 연산자는 아래와 같이 사용한다. 조건문이 참일 경우, 왼쪽 실행문을. 거짓일 경우, 오른쪽 실행문을 실행한다. if ~ else ~ 대신 사용할 수 있어, 코드를 간결하게 만들 수 있다.

(조건문)?(실행문1):(실행문2)

const val1 = 1>0 ? "True입니다." : "False입니다."
console.log(val1); // True입니다.

0보다 1이 크므로, 조건문은 True이기 때문에, 왼쪽 실행문이 실행되어 "True입니다."를 출력한 것이다.

function filterNumber(input) {
    return typeof(input) === 'number' ? input : "다시 입력해주세요.";
}

const input1 = 10;
const input2 = "10";
console.log(filterNumber(input1)); // 10
console.log(filterNumber(input2)); // 다시 입력해주세요.

숫자를 입력받았을 때는 그대로 출력하고, 그 외의 타입이 입력됐을 경우 "다시 입력해주세요" 메시지를 출력하게 만들 수 있다.

const checkSumOver100 = (num1, num2) => {
	return num1+num2 > 100 ? "100을 초과함" : "100을 넘지 않음";
}

console.log(checkSumOver100(50, 40)); // "100을 넘지 않음"
console.log(checkSumOver100(70, 40)); // "100을 초과함"

return 부분에 삼항 연산자를 이용해 함수를 작성할 수도 있다.
삼항 연산자는 화면 요소 구분 표시에 유용하게 잘 사용되기 때문에 습관화해두는 게 좋다.

논리 연산자

논리 연산자는 아래와 같으며, 주어진 논리식을 판단하여 참 거짓을 결정한다.
1. && (둘 다 True일 때, True)
2. || (한 쪽이라도 True이면, True)
3. ! (True이면 False, False이면 True)

보통 아래와 같이 논리 연산자를 많이 쓰게 된다.

const flag1 = false;
const flag2 = true;

if (flag1 && flag2) {
	console.log("두 flag가 모두 True입니다.");
}

if (flag1 || flag2) {
	console.log("두 flag 중 하나 이상이 True입니다.");
}

하지만, 아래 코드를 보고 콘솔에 무엇이 출력될 것인지 생각해보자.

const num = null;
const numCheck = num || "숫자가 입력되지 않음";

console.log(numCheck);

답은 아래와 같이 출력될 것이다.

숫자가 입력되지 않음

단축 평가

이와 같이 출력되는 이유는 || 이 연산자의 왼쪽이 false라고 판정하면 오른쪽을 반환해주고 있기 때문이다. 자바스크립트에서 null, undefined, 0 등은 fasle로 판정되기 때문에 오른쪽을 반환해준 것이다.
이와 같은 방식을 단축 평가라고 하는데, 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

단축 평가는 아래와 같은 규칙을 따른다.

true || anything // true
false || anything // anything
true && anything // anything
false && anything // false

truthy, falsy

falsy

아래의 falsy 값들이 자바스크립트에서 ‘Boolean 값을 요구하는 부분’, 즉, 조건문이나 반복문에 들어가면 자바스크립트가 내부적으로 이 값들을 false로 형 변환해준다.

0
NaN
false
null
undefined
‘’

truthy

truthy인 값(참 같은 값) Boolean 문맥에서 true로 평가되는 값. falsy가 아닌 값들은 모두 truthy에 해당한다.

참고 자료

Javascript에서 falsy, truthy란?