Javascript / / 2023. 8. 10. 14:17

논리 연산자 (OR, AND, NOT)

728x90
반응형

논리 연산자에는

  • || OR
  • && AND
  • ! NOT

이 있습니다

|| (OR)

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

result = a || b ; 

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

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

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

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

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

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

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

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

OR 연산자 ||은 if문에서 자주 사용된다

주어진 조건 중 하나라도 참인지 테스트하는 용도로

  • 예시
let hour = 12;
let isWeekend = true;

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

 

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

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

result = value1 || value2 || value3;

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

  • 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 평가
  • 각 피연산자를 불린형으로 변환, 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환
  • 피연산자 모두 평가한 경우에는 마지막 피연산자를 반환
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 연산자가 제공하는 또 다른 기능은 ‘단락 평가(short circuit evaluation)’입니다

위에서 설명한 거와 같이 OR은 왼쪽부터 시작해서 오른쪽으로 평가한다 truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다 이런 프로세스를 ‘단락 평가’라고 한다

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

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

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

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

&&(AND)

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

result = a && b;

AND 연산자는 모두가 참일 때 ture를 반환한다

그 외의 경우는 false를 반환한다

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

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

첫 번째 falsy를 찾는 AND 연산자

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

result = value1 && value2 && value3;

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

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

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 연산자 &&의 우선순위는 OR 연산자 ||보다 높습니다
      따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작합니다

 

! (NOT)

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

result = !value;

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

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

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

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

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

728x90
반응형

'Javascript' 카테고리의 다른 글

Node.js 설치 & npm 설치 & npx 설치  (0) 2023.08.11
== === 차이점  (0) 2023.08.11
증감 연산자 (전위, 후위)  (0) 2023.08.10
대입 연산자, 복합 연산자  (0) 2023.08.10
자바스크립트의 자료형  (0) 2023.08.09
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유