[JavaScript공부 - 12] Logical operators(논리 연산자)

자바스크립트에는 세가지 논리 연산자가 있음 : || (OR 연산자), && (AND 연산자), ! (NOT 연산자)

논리적이라고 말하지만, 이 세 연산자는 boolean 타입 뿐만 아니라 어떠한 타입의 값에도 적용 가능함. 이 결과 또한 해당 타입이 될 수 있음.

|| (OR 연산자)

---

OR 연산자는 두 개의 세로 선으로 나타냄

result = a || b;

일반적인 프로그램에서 논리 OR 연산자는 boolean의 값을 조작하는 것을 의미했음. 만약 어떠한 값이 true면 true를 반환하고 false면 false를 반환함.

자바스크립트에서 논리 연산자는 약간 까다롭지만 강력한 연산자임! 처음에는 boolean 값으로 어떻게 이 연산자가 작동하는지 볼 필요가 있음!

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

위에서 보다시피, 두 피 연산자가 모두 false가 아니라면 모두 true를 반환함!

피연산자가 boolean 타입이 아니라면 피연산자의 구문을 true인지 false인지를 판단한 다음 boolean타입으로 리턴함.

예를 들어서 숫자 1은 true를 반환하고 숫자 0은 false를 반환함.

if (1 || 0) { //works just like if(true || false)
    alert("truthy");
}

일반적으로 OR(||)연산자는 if 안에서 여러 조건 중 하나의 조건이라도 ture이면 if 블럭을 실행시키도록 할 때 사용함.

let hour = 9;
 
if (hour < 10 || hour > 18) {
    alert("The Office is closed.");
}

여기서 변수 hour는 if 안의 조건 10보다 작기 때문에 alert를 실행시킬 수 있음!

또한, || 조건을 2개 이상 사용할 수도 있음

let hour = 12;
let isWeekend = true;
 
if (hour < 10 || hour > 18 || isWeekend) {
    alert("The Office is closed.");
}

위에서 설명한 로직은 일반적인 로직을 보여줌. 이제 자바스크립트의 추가적인 로직을 알아보자!

OR연산자는 아래와 같은 확장된 기능도 제공함

result = value1 || value2 || value3;

OR(||)연산자는 아래와 같은 특징을 가짐.

* 피연산사별 판단은 왼쪽에서 오른쪽으로 판별함.

* 각 피연산자는 boolean값으로 반환함. 그 결과가 true일 때 판별을 멈추고 피연산자의 실제 값을 리턴함.

* 만약 피연산자가 모두 false일 경우에는 맨 마지막 피연산자의 값을 리턴함

OR연산자는 자동 형변환 없이 원래의 형태로 값을 반환함.

즉, OR(||)의 연산은 첫 번째로 true가 되는 값을 반환하거나 true가 되는 값이 없으면 맨 마지막 값을 반환함.

예를들어서!

alert(1 || 0); // 1 (1 is truthy)
alert(true || 'no matther what'); // true is truthy
 
alert(null || 1); // 1 (1 is the first truthy value)
alert(null || 0 || 1); // 1
alert(undefined || null || 0); // 0 (all falsy, returns the last value(0))

이런 형식들은 boolean만 반환하는 기존의 OR(||) 로직과 비교해서 흥미로운 특징이라고 볼 수 있음!

1. 변수나 구문들 중에서 첫 번째로 true가 되는 값을 갖는 것

  : 데이터를 포함하거나 null/undefined가 되는 변수들을 가정하면 어떻게 첫 번째로 true가 되는 값을 갖게 될까

let currentUser = null;
let defaultUser = "John";
 
let name = currentUser || defaultUser || "unnamed";
 
alert(name); //John

만약에 currentUser와 defaultUser가 false라면 "unnamed"가 결과 값으로 리턴됨.

2. 짧게 판별할 수 있는 구조!

피연산자는 값 뿐만 아니라 임의의 표현들도 될 수 있음. OR연산자는 이 피연산자를 왼쪽에서 오른쪽으로 가면서 테스트하고 판별함. 이 판별은 처음으로 true의 값을 리턴할 때 멈추고 그 값을 리턴함. 이런 과정은 왼쪽에서 오른쪽으로 판별하면서 가능한 처리를 짧게 하고 판별할 수 있도록 로직이 구성되어 있기 때문에 짧은 회로 판별(a short-circuit evaluation)이라고 함.

이 구문을 조심해서 써야하는 게, 어떤 값을 할당하려고할 때, 값이 할당되기 전에 true를 리턴하면 사이드 이펙트(부작용)이 생길 수 있음.

아래를 보면 x의 값이 할당되지 않는걸 볼 수 있음

let x;
 
true || (x = 1);
 
alert(x); // undefined, becuase (x = 1) not evaluated

대신에 위의 true 대신에 false를 넣으면 OR연산자는 두 번째 피연산자를 판별하고 값이 할당될 수 있음

let x;
 
false || (x = 1);
 
alert(x); // 1

위의 내용에서 보면 변수의 할당은 간단한 경우임. 이런 구조일 경우에는 다른 부작용이 있을 수 있음.

위의 경우는 if의 연산을 더 짧게 하려고 사용하는 경우임. 첫 번째 피연산자는 boolean으로 변환되고, 그 결과가 false라면 두 번째 값을 판별함.

대부분의 경우 기존의 if 구문을 사용하는 게 코드를 더 쉽고 이해하기 편하게 만들 수 있지만 ||연산자로 사용하는 건 좀 더 편해보일 수 있음~

&&(AND) 연산

---

AND 연산자는 두 개의 앰퍼센트(&&)를 사용함.

result = a && b;

일반적으로 프로그래밍을 짤 때, AND 연산자는 두 개의 피연산자가 모두 true일 경우에 true를 리턴하고 아니면 false를 리턴함.

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

if 구문에서 사용되는 && 연산자를 보자

let hour = 12;
let minute = 30;
 
if (hour == 12 && minute == 30) {
    alert("The time is 12:30");
}

OR와 마찬가지로 AND의 피연산자로 어떠한 값이 와도 괜찮음!

if (1 && 0) {
    alert("won't work, beause the result if falsy");
}

이 경우에는 1은 true, 0은 false이기 때문에 전체적으로 false를 반환하므로 아래의 alert는 실행되지 않음.

AND 연산자는 첫 번째로 false인 값을 찾는다!

---

AND 연산자는 OR연산자와 마찬가지로 여러개의 && 를 사용할 수 있음.

result = value1 && value2 && value3;

AND(&&) 연산자는 아래와 같은 특징을 갖는다.

* 피연산자를 왼쪽에서 오른쪽 순서대로 판별함.

* 각 피연산자는 결과 값을 boolean으로 반환하고, 그 결과가 false이면 멈추고 해당 피연산자의 원래 값을 리턴함.

* 만약 모든 피연산자가 true면, 마지막 피연산자의 값을 리턴함.

즉, AND은 처음으로 false가 되는 값을 리턴하고 모두 true인 경우에 마지막 값을 리턴함.

이 규칙은 OR연산자와 비슷함. 차이는 AND은 처음으로 false가 되는 값을 리턴하고 OR는 처음으로 true가 되는 값을 리턴함.

// if the first operand is truthy,
// AND returns the second operand:
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5
 
// if the first operand is falsy,
// AND returns it. The second operand is ignored
alert( null && 5 ); // null
alert( 0 && "no matter what" ); // 0

프로그래밍할 때, 한 줄에 여러 값을 넘길 수 있는데 이를 활용해서 &&연산자에 사용해보면..

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

이 경우에는 null이 false값을 반환하므로 null이 출력됨.

alert(1 && 2 && 3); //3, the last one

이 경우에는 모두가 true를 반환하므로 마지막 값인 3을 리턴함.

## AND(&&) 연산자의 우선순위가 OR(||)연산자의 우선순위보다 높음!!!

그래서 

a && b || c && d

OR연산자와 마찬가지고 &&의 연산자는 if구문으로 대체될 수 있음.

let x = 1;
 
(x > 0) && alert( 'Greater than zero!' );

이 경우, &&연산자의 오른쪽 부분은 왼쪽의 값이 모두 true가 될 때 실행됨. 따라서 (x > 0)이 true일 때 alert 구문이 실행되는 것임!

이거를 if 구문으로 보면 아래와 같은 코드가 될 수 있음!

let x = 1;
 
if (x > 0) {
    alert("Greater than zero!");
}

&& 연산자를 사용하면 if의 구문을 사용하는 것 보다 코드가 더 짧아지겠지만 if는 좀 더 읽기 쉽고 이해하기 쉬움!

그래서 AND 연산과 if 연산을 적절히 상황에 따라 사용하는 것이 좋음.

!(NOT) 연산자

---

boolean NOT 연산자는 느낌표(!)로 나타냄.

구문은 꽤 간단함!

result = !value;

피연산자는 아래와 같은 특징을 가짐.

* 피연산자를 true나 false인 boolean 타입으로 변환함.

* 피연산자의 값을 바꿔서 리턴함.

예를 들어서!

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

NOT 연산자를 이어서 두 개(!!)를 사용하면, boolean 타입으로 값을 변환하려고 사용함.

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

즉, 처음에 NOT 연산자는 값을 boolean 타입으로 바꾸고 그 결과의 반대를 리턴함. 두 번째 NOT연산자는 이걸 다시 반대로 리턴함. 결국, 값을 boolean으로 형변환하는 것이 됨!

이건 내장된 Boolean 함수를 사용하는 것과 같은 방식으로 동작함.

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

NOT(!)의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 전에 먼저 실행됨!