[ JavaScript ] 논리 연산자

논리 연산자

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

· 연산자에 '논리'라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다.

---

1. || (OR)

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

result = a || b;

전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰인다.

인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다.

 

자바스크립트의 OR 연산자는 다루긴 까다롭지만 강력한 기능을 제공한다.

OR을 어떻게 응용할 수 있는지 알아보기 전, OR 연산자가 불린값을 어떻게 다루는지 알아보자

 

OR 연산자는 이항 연산자이므로 아래와 같이 네 가지 조합이 가능하다.

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

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

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

예를 들어, 연산 과정에서 숫자 1은 true로, 숫자 0은 false로 바뀐다.

let hour = 9;

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

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

let hour = 9;
let isWeekend = ture;

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

 

 

2. 첫 번째 truthy를 찾는 OR 연산자 '||'

지금까진 피연산자가 불린형인 경우만 다뤘다.

이제 자바스크립트에서만 제공하는 논리연산자 OR의 '추가'기능에 대해 알아보자!

 

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

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

result = value1 || value2 || value3;

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

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

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

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

 

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

정리해 보자면 이렇다. OR ' || ' 연산자를 여러 개 체이닝하면 첫 번째 truthy를 반환한다.

피연산자에 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이므로, 마지막 값을 반환함)

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

 

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

firstName, lastName, nickName이란 변수가 있는데 이 값들은 모두 옵션 값이라고 해보자

OR || 을 사용하면 실제 값이 들어있는 변수를 찾고 그 값을 보여줄 수 있다.

변수 모두에 값이 없는 경우엔 '익명'을 보여주자

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

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

모든 변수가 falsy이면 '익명'이 출력되었을 것이다.

 

2) 단락 평가

OR 연산자 || 가 제공하는 또 다른 기능은 '단란평가'이다.

위에서 설명해 드린 바와 같이 OR || 은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데 truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 '단란 평가'라고 한다.

 

단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과를 가지는 표현식 일 때 명확히 볼 수 있다.

아래 예시를 실행하면 두 번째 메세지만 출력된다.

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

첫 번째 줄의 || 연산자는 true를 만나자마자 평가를 멈추기 때문에 alert가 실행되지 않는다.

단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓴다.

 

 

3. && (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 ) {  // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 된다.
  alert( 'if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다.');
}

 

 

4. 첫 번째 falsy를 찾는 AND 연산자 '&&'

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

result = value1 && value2 && value3;

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

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

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

· 피연산자 모두가 평가되는 경우(모든 피연산자가 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

AND 연산자에도 피연산자 여러개를 연속해서 전달할 수 있다. 첫번째 falsy가 어떻게 반환되는지 예시를 통해 살펴보자.

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

아래 예시에선 AND 연산자의 피연산자가 모두 truthy이기 때문에 마지막 피연산자가 반환된다.

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

// &&의 우선순위가 || 보다 높다.
// AND 연산자 &&의 우선순위는 OR연산자 ||보다 높다.
// 따라서 a && b || c && d 는 ( a && b ) || ( c && d )와 동일하게 동작한다.

 

 

5. ! (NOT)

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

NOT 연산자의 문법은 매우 간단하다.

result = !value;

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

1) 피연산자를 불린형( true / false )으로 변환한다.

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

 

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

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

alert( !!'non=empty string' );  // ture
alert( !!null );  // false

이때 첫 번째 NOT 연산자는 피연산자로 받은 값을 불린형으로 변환한 후 이 값의 역을 반환하고,

두 번째 NOT 연산자는 첫 번째 NOT 연산자가 반환한 값의 역을 반환한다.

이렇게 NOT을 연달아 사용하면 특정 값을 불린형으로 변환할 수 있다.

 

참고로, 내장함수 Boolean을 사용하면 !! 을 사용한 것과 같은 결과를 도출 할 수 있다.

alert( Boolean('non-empty string') );  // true
alert( Boolean(null) );  // false

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