논리 연산자

민순기·2021년 12월 15일

Goal

논리 연산자가 어떤 것들이 있는지 알아보고
각각의 기능에 대해 이해한다.

논리 연산자의 종류

기호역할
&& (AND)두 피연산자 모두 참이면 True 아니면 False
|| (OR)두 피연산자 모두 거짓이면 False 아니면 True
! (NOT)피연산자를 bool 값으로 변환하여 역을 반환

&& (AND)

&& 연산자는 두 피연산자 모두 참인 경우에는 True
그 이외의 경우에는 False를 반환한다.

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

if문을 && 연산자를 이용해 더 간결하게 사용할 수도 있다.

const a = 10;
const b = 9;

// 왼쪽이 참이면 오른쪽 반환
(a > b) && console.log("hi");  // hi

여러 개의 && 연산자를 사용했을 때

console.log(1 && 0 && 2 && 3); // 0
console.log(1 && 2 && 3 && 4); // 4

위의 예제를 보면 첫 번째 예제의 경우 첫 번째 false인 0을 출력했고
두 번째 예제의 경우 false가 없자 마지막 값인 4를 출력했다.

즉, && 연산자가 여러번 사용될 경우 첫 번째 false를 만나면 해당 값을 출력하고 false가 없다면 마지막 값을 출력한다.


|| (OR)

|| 연산자는 두 피연산자 중 하나라도 참이라면 true를 반환하고
모두 거짓이면 false를 반환한다.

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

마찬가지로 if문을 || 연산자를 이용해 더 간결하게 사용할 수 있다.

const a = 9;
const b = 10;

// 왼쪽이 거짓이면 오른쪽 반환
(a > b) || console.log("hi");  // hi

! (NOT)

! 연산자는 피연산자의 bool값을 체크하고 그 역을 반환한다.

const ten = 10;
const zero = 0;

console.log(!ten); // false
console.log(!zero); //true

!(NOT)을 2개 사용하면 bool형으로 변환할 수 있다

console.log(!!null); // false
console.log(!!"hi"); // true

modern javascript에서는 if문을 && 또는 ||으로 대체하지 말라고 권장한다.

modern javascript 인용

어떤 개발자들은 AND 연산자 &&를 if문을 ‘짧게’ 줄이는 용도로 사용하곤 합니다.

예시:

let x = 1;

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

&&의 오른쪽 피연산자는 평가가 && 우측까지 진행되어야 실행됩니다. 즉, (x > 0)이 참인 경우에만 alert문이 실행되죠.

위 코드를 if 문을 써서 바꾸면 다음과 같습니다.

let x = 1;

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

&&를 사용한 코드가 더 짧긴 하지만 if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋습니다. 그러니 if 조건문이 필요하면 if를 사용하고 AND 연산자는 연산자 목적에 맞게 사용합시다.

profile
2년차 FE 개발자 민순기입니다.

0개의 댓글