논리연산자

논리연산자.
언어논리 할 때부터 맨날 하던건데 자꾸 헷갈린다. 문맥 속에서 읽고, 기다 아니다만 따지는 게 아니고 내가 직접 코드를 쳐야하니까 그런 것 같다.

논리 연산자는 보통 Boolean값과 함께 쓰이며, 불리언 값을 반환한다.
그런데, &&과 || 연산자는 사실 피연산자 중 하나의 값을 반환한다.(꼭 boolean만 반환하는게 아니라고!)
그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있다.

이는 리액트에서 보통 로그인이나 회원가입시 잘못된 값을 입력할 경우 component의 상태를 변경하거나 경고메시지를 출력하게 하는 간단한 논린구조에서 많이 쓰인다. 물론 그 이상도 충분히 쓸 수 있겠지만, 지금 내 수준이 이러니 패스.

논리연산자의 종류

• &&
  ex) sample1 && sample2
  sample1을 true로 변환할 수 있는 경우 sample2를 반환하고, 그렇지 않으면 sample1을 반환.
• ||
  ex) sample1 || sample2
  sample1을 true로 변환할 수 있으면 sample1을 반환하고, 그렇지 않으면 sample2를 반환.
• !
  ex) !expr
  단일 피연산자를 true로 변환할 수 있으면 false를 반환. 그렇지 않으면 true를 반환.
  (값을 true로 변환하면 값이 참인 것이고, 값을 false로 변환할 수 있으면 값이 거짓인 것)

일반적으로 false로 취급하는 값: null, NaN, 0, 빈 문자열 ("", ''), undefined

단락평가

논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행한다.

• (거짓 표현식) && expr은 거짓 표현식으로 단락 평가.
• (참 표현식) || expr은 참 표현식으로 단락 평가.

"단락"이란, 위 규칙에서 expr을 평가하지 않는다는 뜻이다. 따라서 평가 중 발생해야 할 부작용(예: expr이 함수 호출이면 절대 호출하지 않음)도 나타나지 않는다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문이다.

function A(){ console.log('A 호출'); return false; }
function B(){ console.log('B 호출'); return true; }

console.log( A() && B() );
// 함수 호출로 인해 콘솔에 "A 호출" 기록
// 그 후 연산자의 결과값인 "false" 기록

console.log( B() || A() );
// 함수 호출로 인해 콘솔에 "B 호출" 기록
// 그 후 연산자의 결과인 "true" 기록

우선순위

&& 연산자는 || 이전에 실행되므로 다음 두 식은 서로 다르다.

true || false && false      // returns true
(true || false) && false    // returns false

&&의 예제

a1 = true  && true       // t && t returns true
a2 = true  && false      // t && f returns false
a3 = false && true       // f && t returns false
a4 = false && (3 == 4)   // f && f returns false
a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
a6 = false && 'Cat'      // f && t returns false
a7 = 'Cat' && false      // t && f returns false
a8 = ''    && false      // f && f returns ""
a9 = false && ''         // f && f returns false

||의 예제

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

헷갈리니까 "&&은 깐깐하다 진실은 깐깐해야한다" 정도로 외워둔다.

not(!)의 예제

n1 = !true               // !t returns false
n2 = !false              // !f returns true
n3 = !''                 // !f returns true
n4 = !'Cat'              // !t returns false


출처: MDN 공식문서