자바스크립트 기본 - 논리 연산자

자바스크립트에는 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)가 있다.

논리 연산자는 피연산자로 불린형 뿐 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다.

|| (OR)

‘OR’ 연산자는 두 개의 수직선 기호로 만들 수 있다.

전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰인다. 인수 중 하나라도 true 이면 true 를 반환하고, 그렇지 않으면 false 를 반환한다.

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

피연산자가 둘다 false 인 경우를 제외하고 연산 결과는 항상 true 이다.

피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다.

0제외 모든 숫자 → true 로, 0 → false 로 변환된다.

OR 연산자는 주어진 조건 중 하나라도 참인지를 테스트하는 용도로 if 문에서 자주 사용된다.

let hour = 12;
let isWeekend = true;

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

첫 번째 truthy 를 찾는 OR 연산자 ‘||’

자바스크립트에서만 제공하는 기능으로 논리연산자 OR 의 ‘추가' 기능이 있다.

추가 기능은 아래와 같은 알고리즘으로 동작한다.

OR 연산자와 피연산자가 여러 개인 경우

result = value1 || value2 || value3;

이때 || 연산자는 다음 순서를 따른다.

• 가장 왼쪽부터 오른쪽으로 나아가며 평가한다.
• 각 피연산자를 불린형으로 변환한다. 변환 후 그 값이 true 이면 연산을 멈추고 해당 연산자의 변환 전 원래 값을 반환한다.
• 피연산자 모두를 평가한 경우(=피연산자 중 truthy 가 없는 경우) 마지막 피연산자를 반환한다.

OR 연산자를 여러 개 체이닝하면 첫 번째 truthy 를 반환한다. 피연산자에 truthy 가 하나도 없다면 마지막 피연산자를 반환한다.

이러한 기능을 이용해 여러 용도로 OR 연산자를 활용할 수 있다.

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

   || 를 사용하면 실제 값이 들어 있는 변수를 찾고, 그 값을 보여줄 수 있다. 변수 모두에 값이 없다면 ‘익명'을 반환하도록 했다.

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

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

2. 단락 평가

   || 가 제공하는 또 다른 기능은 단락 평가이다.

   || 는 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy 를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이 프로세스를 단락 평가라고 한다.

   이러한 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과를 가지는 표현식일 때 유용하다.

   true || alert("출력되지 않는다");
   false || alert("출력된다");

   첫 번째 줄은 true 를 만나자마자 평가를 멈추기 때문에 alert 를 실행하지 않는다.

   이처럼 연산자 왼쪽 조건이 falsy 일 때만 명령어를 실행하고자 할 때 자주 쓰인다.

&& (OR)

& 두 개를 연달아 쓰면 AND 연산자 && 를 만들 수 있다.

전통적인 프로그래밍에서 AND 연산자는 두 피연산자 모두가 참일 때 true 를 반환한다. 그 외의 경우는 false 를 반환한다.

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

AND 연산자 역시 피연산자가 불린형이 아니면 불린형으로 변환하여 수행된다.

첫 번째 falsy 를 찾는 AND 연산자 ‘&&’

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

• 가장 왼쪽 피연산자부터 오른쪽으로 나아가며 피연산자를 평가한다.
• 각 피연산자는 불린형으로 변환된다. 변환 후 값이 false 이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
• 피연산자가 모두 평가되는 경우(모두 true 인 경우) 마지막 피연산자가 반환된다.

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

AND 연산자가 첫 번째 falsy 를 반환하는 반면, OR 연산자는 첫 번째 truthy 를 반환한다는 차이가 있다.

💡 &&의 우선순위가 || 보다 높다. 따라서 a&&b || c && d 는 (a&&b) || (c&&d) 와 동일하게 작동한다. 💡 if 를 || 나 && 로 대체해서는 안 된다.

! (NOT)

논리 연산자 NOT 은 느낌표를 써서 만들 수 있다.

NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행한다.

1. 피연산자를 불린형으로 변환한다.
2. 1에서 변환된 값의 역을 반환한다.

이 성질을 이용해, NOT 을 두 개 연달아 사용하면 값을 불린형으로 변환할 수 있다. (= Boolean 을 사용한 것과 같은 결과를 도출할 수 있다. )

alert( !!"non-empty string" ); // true
alert( !!null ); // false

OR 연산자의 피연산자가 alert() 라면?

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

1. 첫번째 피연산자인 alert(1)의 평가 결과, alert창에 1이 출력된다.
2. alert()메서드는 undefined 를 반환하기 때문에 다음 피연산자를 평가한다.
3. 2는 truthy 이기 때문에 실행이 멈추고 2가 반환된다. 2는 제일 바깥 alert() 의 피연산자가 되어 alert 창에 2가 출력된다.
4. 두 번째 피연산자에서 연산을 멈췄기 때문에 세 번째 피연산자는 무시된다.

AND 연산자의 피연산자가 alert() 라면?

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

1. 첫번째 피연산자 평과 결과 alert 창에 1이 출력된다.
2. 첫 번째 피연산자가 undefined 를 반환하므로 실행이 멈추고 undefined 가 반환된다. undefined는 제일 바깥 alert 의 피연산자가 되어 alert 창에 undefined 가 출력된다.
3. 두 번째 피연산자는 무시된다.