[JavaScript] 논리 연산자

- OR연산자 ||

: OR연산자는 인수중 하나라도 true이면 true를 반환한다.

  

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

OR연산자의 활용

  

    
    
    
    
  
let hour = 9;

if (hour < 10 || hour > 18) {
  alert( '영업시간이 아닙니다.' );
}

// if문 안에 조건넣기도 가능
let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
}

- OR의 추가기능 / 첫 번째 truthy를 찾는 ||

  

    
    
    
    
  
result = value1 || value2 || value3;

이때, OR ||연산자는 다음 순서에 따라 연산을 수행한다.

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가.

2. 각 피연산자를 불린형으로 변환. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환.

3. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환.

여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것이다.

1. OR "||" 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환.

2. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환.

  

    
    
    
    
  
alert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

이러한 기능을 이용하여 여러 용도로 사용 가능하다.

1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기

  

    
    
    
    
  
let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

// 모든 변수가 falsy이면 "익명" 출력

2. 단락 평가

  

    
    
    
    
  
true || alert("not printed");
false || alert("printed");

첫 번째 코드는 ture를 만나자마자 평가를 멈추기 때문에 alert실행이 안됨.

두 번째 코드는 왼쪽 조건이 falsy이기 때문에 alert 실행

 

- OR연산자의 피연산자가 alert이라면?

  

    
    
    
    
  
alert( alert(1) || 2 || alert(3) );

얼럿 창엔 1, 2가 차례대로 출력된다. 

alert 메서드는 값을 반환하지 않고, undefined를 반환하는데

1. 첫 번째 OR || 은 왼쪽 피연산자인 alert(1)를 평가한다. 이때 첫 번째 얼럿 창에 1이 출력.

2. alert메서드는 undefined를 반환하기 때문에, OR 연산자는 truthy를 찾기 위해 다음 피연산자를 평가하게 된다.

3. 두 번째 피연산자(오른쪽 피연산자)인 2는 truthy이기 때문에 실행이 멈추고 2가 반환된다. 반환된 값 2는 제일 바깥 alert의 피연산자가 되어 두 번째 얼럿창에 출력된다.

평가가 alert(3)까지 진행되지 않기 때문에 3은 출력되지 않는다.

 

- &&연산자 (AND)

: AND연산자는 두 피연산자가 모두 참일 때 ture 반환. 그 외 경우에는 false반환

  

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

- 첫 번째 falsy를 찾는 AND연산자

  

    
    
    
    
  
result = value1 && value2 && value3;

AND 연산자 &&는 아래와 같은 순서로 동작한다.

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가.

2. 각 피연산자는 불린형으로 변환. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환.

3. 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환.

 

AND 연산자는 첫 번째 falsy를 반환한다. 피연산자에 falsy가 없다면 마지막 값을 반환한다.

위 알고리즘은 OR 연산자의 알고리즘과 유사한데, 차이점은 AND 연산자가 첫 번째 falsy를 반환하는 반면, OR은 첫 번째 truthy를 반환한다는 것이다.

  

    
    
    
    
  
// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0

alert( 1 && 2 && null && 3 ); // null

alert( 1 && 2 && 3 ); // 마지막 값, 3

- AND 연산자의 피연산자가 alert이라면?

  

    
    
    
    
  
alert( alert(1) && alert(2) );

얼럿 창엔 1, undefined가 차례대로 출력된다.

alert를 호출하면 undefined가 반환되는데, alert는 단순히 얼럿 창에 메시지만 띄워주고, 의미 있는 값을 반환해 주지 않는다.

&&는 왼쪽 피연산자를 평가하고(이때 1이 얼럿창에 출력) 평가를 즉시 멈춘다. alert(1)의 평가 결과는 undefined로 falsy이기 때문이죠. && 연산자는 falsy를 만나면 그 값을 출력하고 즉시 연산을 멈춘다.

 

* &&의 우선순위가 ||보다 높다.*

  

    
    
    
    
  
a && b || c && d는 (a && b) || (c && d) 와 동일하게 동작

 

- ! (NOT)

: 문법

  

    
    
    
    
  
result = !value;

NOT연산자는 인수를 하나만 받고, 

1. 피연산자를 불린형으로 변환한다.

2. 1에서 변환된 값의 역을 반환한다.

  

    
    
    
    
  
alert( !true ); // false
alert( !0 ); // true

// NOT을 두개 연달아 사용하면 값을 불린형으로 변환할 수 있다.
alert( !!"non-empty string" ); // true
alert( !!null ); // false

// 내장함수 Boolean을 사용하면 !!을 사용한 것과 같은 결과를 도출할 수 있다.
alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false

*NOT연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 && || 보다 먼저 실행된다.*