논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다.
|| (OR)
'OR'연산자는 두 개의 수직선 기호로 만들 수 있다.
전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰인다. 인수 중 하나라도 true면 true를 반환하고, 그렇지 않으면 false를 반환한다.
🤷🏻♂️ 그럼 자바스크립트에서 OR 연산자는?
자바스크립트의 OR 연산자는 다루기는 까다롭지만 강력한 기능을 제공한다. OR를 어떻게 응용할 수 있는지 보기 전에, OR 연산자가 불린값을 어떻게 다루는지 알아보자.
OR 연산자는 이항 연산자이므로 아래와 같이 4가지 조합이 가능하다.
피연산자가 모두 false인 경우를 제외하고 연산 결과는 항상 true다.
🤷🏻♂️ 피연산자가 불린형이 아니라면?
피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다.
EX. 연산 과정에서 숫자 1은 true로, 0은 false로 변환된다.
OR 연산자 ||은 주어진 조건 중 하나라도 true인지 테스트하는 용도로 if문에서 자주 사용된다.
또한, if문 안에 여러 가지 조건을 넣을 수 있다.
EX. 
첫 번째 truthy를 찾는 OR 연산자 '||'
이제 자바스크립트의 전통적인 기능이 아닌, 자바스크립트에서만 제공하는 추가 기능에 대해 알아보자.
📌 OR 연산자와 피연산자가 여러 개인 경우
1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
2. 각 피연산자를 불린형으로 변환한다. 변환 후 그 값이 true면 연산을 멈추고, 해당 피연산자의 변환 전 원래 값을 반환한다.
3. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환한다.
💡 여기서 핵심 : 반환 값이 형 변환을 하지 않은, 원래 값이다!
결론
OR 연산자를 여러 개 체이닝(chaining)하면 첫 번째 truthy를 반환한다. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환한다.
EX.
이런 추가 기능을 이용하면 여러 용도로 OR 연산자를 활용할 수 있다.
1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기
firstName, lastName, nickName이란 변수가 있을 때, 이 값들이 모두 옵션값이라고 하자. OR (||) 연산자를 사용하면 실제 값이 들어있는 변수를 찾고, 그 값을 보여줄 수 있다. 변수 모두에 값이 없다면 '익명'을 보여주자.
모든 변수가 falsy였다면 '익명'을 출력했을 것이다.
2. 단락 평가(short circuit evaluation)
위에서 설명한 바와 같이, OR(||) 연산자는 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 단락 평가라 한다.
단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일 때 명확히 볼 수 있다.
EX. 
위 예시에서 첫 번째 줄의 || 연산자는 true를 만나자마자 평가를 멈추기 때문에 alert가 실행되지 않는다.
두 번째 줄의 연산자는 false를 만나고 alert를 만나기 때문에 메시지가 출력된다.
&& (AND)
두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자이다.
전통적인 프로그래밍에서 AND 연산자는 두 피연산자가 모두 참일 때 true를 반환한다. 그 외의 경우는 false를 반환한다.
OR 연산자와 마찬가지로 AND 연산자의 피연산자도 타입에 제약이 없다.
첫 번째 falsy를 찾는 AND 연산자 '&&'
📌 AND 연산자와 피연산자가 여러 개인 경우
1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
2. 각 피연산자는 불린형으로 변환된다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
3. 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환된다.
결론
AND 연산자는 첫번째 falsy를 반환한다. 피연산자에 falsy가 없다면 마지막 값을 반환한다.
💡 OR 연산자와 차이점
OR 연산자는 첫번째 truthy를 반환하는 반면, AND 연산자는 첫번째 falsy를 반환한다.
아래 예시에서는 AND 연산자의 피연산자가 모두 truthy이기 때문에 마지막 피연산자가 반환된다.
💡 &&의 우선순위가 ||보다 높다
따라서, a && b || c && d는 (a && b) || (c && d)와 동일하게 동작한다.
💡 if를 '||'나 '&&'로 대체하지 마라!
이 시리즈 글들을 쭉 읽었다면 왜인지는 예상할 거라 믿는다.
가독성 떨어집니다 ㅎㅎ
if 조건문이 필요하면 if를 사용하고, AND 연산자나 OR 연산자는 목적에 맞게 사용하자.
! (NOT)
NOT 연산자의 문법은 매우 간단하다.
NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행한다.
- 피연산자를 불린형(true/false)로 변환한다.
- 1단계에서 변환된 값의 역을 반환한다.
💡 NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다.
이는 내장함수 Boolean을 사용한 결과와 같다.
💻 과제
1. 다음 OR 연산의 결과는?
alert(null || 2 || undefined);📌 답 : 2 출력
2. OR 연산자의 피연산자가 alert라면?
alert( alert(1) || 2 || alert(3) );📌 답 : 1, 2 차례로 출력
alert 메서드는 값을 반환하지 않는다. 즉 undefined를 반환한다. 따라서 OR 연산자는 alert를 수행하고 다음 피연산자를 평가하게 된다.
3. 다음 AND 연산의 결과는?
alert( 1 && null && 2 );📌 답 : null 출력
4. AND 연산자의 피연산자가 alert라면?
alert( alert(1) && alert(2) );📌 답 : 1, undefined 차례로 출력
alert를 호출하면 undefined가 반환된다. &&는 왼쪽 피연산자를 평가하고(이때 1 출력) 평가를 즉시 멈춘다. alert(1)의 평가 결과는 undefined로 falsy이기 때문이다. 따라서 밖의 alert는 undefined를 출력하게 된다.
5. OR AND OR 연산자로 구성된 표현식의 결과는?
alert(null || 2 && 3 || 4);📌 답 : 3 출력
6. 사이 범위 확인하기
📌 답 : if(age >= 14 && age <= 90)
7. 바깥 범위 확인하기
📌 답
1. NOT 사용 X
if(age < 14 || age > 90)
2. NOT 사용
if(!(age >= 14 && age <= 90))
8. "if"에 관한 고찰
📌 답 : first 출력 → third 출력
⚡ 메인 과제 - 로그인 구현
📌 답
let userName = prompt("Who's there?", '');
if(userName == "Admin"){
let pw = prompt("Password?", '');
if(pw == "TheMaster"){
alert("Welcome!");
}
else if(pw == '' || pw == null){
alert("Canceled");
}
else{
alert("Wrong Password");
}
}
else if(userName == '' || userName == null){
alert("Canceled");
}
else{
alert("I don't know you");
}이 글은 https://ko.javascript.info/ 를 참고하여 작성하였습니다.
