모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

논리 연산자

자바스크립트에는 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있다. 모든 타입의 값을 피연산자로 받을 수 있으며 연산 결과도 모든 타입이 될 수 있다.

|| (OR)

OR 연산자는 두 개의 수직선 기호로 만들 수 있으며, 인수 중 하나라도 true이면 true를 반환하고 그렇지 않으면 false를 반환한다.

 result = a || b;

OR 연산자는 이항 연산자이므로 아래와 같이 네 가지 조합이 가능하다. 피연산자가 모두 false인 경우를 제외하고 연산 결과를 항상 true이다.

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

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

if (1 || 0) { // if (true || false)와 동일하게 동작
  alert('truthy!');
}

let hour = 9;

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

if 문 안에 여러가지 조건을 넣을 수 있다.

let hour = 12;
let isWeekend = true;

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

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

자바스크립트에서만 제공하는 논리 연산자 OR의 추가 기능에 대해 알아보자. 추가 기능은 아래와 같은 알고리즘으로 동작한다.

OR 연산자와 피연산자가 여러 개인 경우, OR 연산자는 다음 순서에 따라 연산을 수행한다.

result = value1 || value2 || value3;

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

여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것이다. 정리해보자면 OR 연산자를 여러개 체이닝(chaining)하면 첫번째 truthy를 반환한다. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환한다.

alert( 1 || 0 ); // 1

alert( null || 1 ); // 1
alert( null || 0 || 1 ); // 1
alert( undefined || null || 0 ); // 0

이런 OR 연산자의 추가 기능을 이용하면 여러 용도로 OR 연산자를 활용할 수 있다.

1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기 OR 연산자를 사용하면 실제 값이 들어있는 변수를 찾고 그 값을 보여줄 수 있다. 변수 모두에 값이 없는 경우엔 자신이 원하는 값을 리턴할 수도 있다.

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

alert( firstName || lastName || nickName || "익명" );

모든 변수가 falsy이면 “익명”이 출려될 것이다.

1. 단락 평가 truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈추는 프로세스를 단락 평가(short circuit evaluation)라고 한다. 단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식일 때 명확히 볼 수 있다. 단락 평가는 연산자 왼쪽 조건이 falsy일 때 명령어를 실행하고자 할 때 자주 사용된다.

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

&&(AND)

두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있다.

result = a && b;

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

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

아래는 if문과 AND 연산자를 함께 활용한 예제이다.

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert('현재 시각은 12시 30분입니다.');
}

OR 연산자와 마찬가지로 AND 연산자의 피연산자도 타입에 제약이 없다.

if (1 && 0) {
  alert("if 문 앞에 falsy가 들어있으므로 alert창은 실행되지 않는다.");
}

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

AND 연산자와 피연산자가 여러 개인 경우를 살펴보자.

result = value1 && value2 && value3;

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

• 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
• 각 피연산자가 falsy이면 평가를 멈추고 해당 피연산자를 반환한다.
• 모든 피연산자가 truthy인 경우 마지막 피연산자가 반환된다.

alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없다."); // 0

**&&의 우선순위 >

의 우선순위**

AND 연산자의 우선순위는 OR 연산자보다 높으므로 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작한다.

**if 를

나 &&로 대체하는 방법**

어떤 개발자는 AND 연산자를 if 문을 짧게 줄이는 용도료 사용하고는 한다.

let x = 1;

(x > 0) && alert('0보다 크다!');
// if (x > 0) alert('0보다 크다!');

&&를 사용한 코드가 더 짧긴 하지만, if 문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋으므로 AND 연산자는 목적에 맞게만 사용하자.

! (NOT)

논리 연산자 NOT은 느낌표 !를 써서 만들 수 있으며 인수를 하나만 받아 다음 순서대로 연산을 수행한다.

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

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

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다.

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

첫 번째 NOT 연산자는 피연산자로 받은 값을 불린형으로 변환한 후 이 값의 역을 반환하고, 두번째 NOT 연산자는 첫 번째 NOT 연산자가 반환한 값의 역을 반환한다. 이렇게 NOT을 연달아 사용하면 특정 값을 불린형으로 변환할 수 있다.

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