[JavaScript] 논리 연산자 심화

자바스크립트에는 3종류의 논리 연산자가 있음 

||(OR), &&(AND), !(NOT)

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

 

🍕 || (OR)

-전통적인 프로그래밍에서 OR연산자는 불린값을 조작하는데 쓰인다. 인수 중 하나라도 true이면 true를 반환합니다.

 

OR연산자는 이항 연산자이므로 아래와 같이 사용할 수 있습니다. 

alert( true || true ) // true

->피연산자가 모든 false인 경우를 제외하고 연산결과는 항상 true입니다. 

 

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

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

if(1 || 0){
alert('truthy!');
}

OR연산자는 if문에서 자주 사용됩니다. if 문 안에 여러 가지 조건을 넣을 수 있습니다. 

 

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

-위에서 피연산자가 불린형인 경우만 다뤘습니다만 자바스크립트에서만 제공하는 논리 연산자 OR의 '추가' 기능에 대해서 알아봅시다. 

 

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

result = val1 || val2 || val3

이때 OR연산자는 아래와 같은 순서로 연산을 수행한다.

• 가장 왼쪽 -> 오른쪽 방향으로 피연산자를 평가합니다.
• 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 피연산자의 변환 전 원래 값을 반환합니다. 
• 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환

-> 리턴값이 형 변환을 하지 않은 원래 값이라는 것이 중요하다.

정리: OR " || " 연산자를 여러개 체이닝(Chaining)하면 첫번째 truthy를 반환한다. (꼭 || 연산자를 여러개 쓰지 않아도 적용됨) 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환한다. 

 

🌞OR연산자 추가 기능 활용하기 

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

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

//변수 모두에 값이 없는 경우엔 익명을 보여주자.
let firstName = "";
let lastName = "";
let nickName = "김곤잘레스";
document.write(firstName || lastName || nickName || "익명"); // 김곤잘레스
document.write(firstName || "<br>익명"); // 익명

OR연산자 결과물

---

활용2. 단락 평가(short circuit evaluation)

OR 연산자 || 가 제공하는 또 다른 기능은 '단락 평가(short circuit evaluation)'이다. 

• 왼 -> 오 순으로 평가를 하는데 truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 '단락 평가'라고 한다.
• 단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과를 가지는 표현식일 때 명확하다. 

// 단락 평가
true || alert("not printed");
false || alert("printed");

->윗줄의 코드는 이미 true를 만났기 때문에 오른쪽의 피연산자를 실행하지 않는다. 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰인다. 

---

🍕&& (AND) 연산자 추가 기능

OR 연산자의 추가기능과 유사합니다. 차이점은 AND연산자가 첫번째 falsy 를 반환한다면 OR은 첫번째 truthy를 반환한다는 점입니다.

---

 

🍕! (NOT) 연산자

작동원리: 

NOT연산자는 인수를 하나만 받고 피연산자를 boolean형으로 변환합니다. 그 다음 변환된 값의 역을 반환합니다. 

 

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

alert(!!null); //false

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

alert(Boolean(null)); // false

---

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

a && b || c && b 는 (a && b) || ( c && d ) 와 동일하게 동작한다.

🍕 (주의) if 를 || 나 && 로 대체하지 말아라.

->  OR연산자와 AND연산자를 쓰면 if문을 짧게 줄이는 용도로 사용이 가능합니다. 

코드가 짧아지긴 하지만 코드의 가독성이 떨어집니다. 명백하게 내가 뭘하고자 하는지 명시해주는 것은 중요합니다. 

 

all ref: https://ko.javascript.info/logical-operators

논리 연산자