Frontend/JS.info 정리

자바스크립트 기본 - 논리 연산자

Creative_Lee 2021. 11. 21. 21:17

자바스크립트에는 OR( || ) , AND(&&) , NOT( ! ) 논리 연산자가 있다.

 

 

OR( || ) 연산자

OR 연산자는 인수 중 하나라도 true면 true를 반환하고 그렇지 않으면 false를 반환한다.

피 연산자가 boolean형이 아니라면 boolean형으로 변환된다.

 

OR 연산자는 첫 번째 truthy를 찾을 때 사용할 수 있다.

가장 왼쪽부터 시작해 평가하고,
피연산자를 boolean형 으로 변환 후 값이 true이면( true를 발견하면 )
즉시 연산을 종료하고 해당 피연산자를 변환 전 값으로 리턴한다.
피연산자 중 truthy가 없다면 가장 마지막 피연산자를 리턴한다. 


console.log( 1 || 0 ); // 1 
1은 truthy 임으로 1을 리턴한다.

console.log( null || 1 ); // 1
null은 falsy이므로 다음 피연산자 1을 평가한다.
1은 truthy 임으로 1을 리턴한다.

console.log( null || 1 || 0 ); // 1
null은 falsy이므로 다음 피연산자 1을 평가한다.
1은 truthy 임으로 1을 리턴한다.
0을 평가하지 않고 연산이 종료된다.

console.log( undefined || null || 0 ); // 0 
undefined은 falsy이므로 다음 피연산자 null을 평가한다.
null은 falsy이므로 다음 피연산자 0을 평가한다.
0도 falsy , truthy가 하나도 없으므로 마지막 피연산자인 0을 리턴한다.

 

 

OR 연산자를 변수나 표현식으로 구성된 목록에서 응용해 보면~

let email = ""
let phoneNumber = ""
let address = "경기도 평택시"

console.log( email || phoneNumber || address || "미 인증 유저입니다.");
// "경기도 평택시"

인증 방법이 이메일, 핸드폰 번호, 주소 인증 총 3가지이고 옵션이라고 한다면
사용자가 인증한 방법을 찾기 위해 || 을 사용해 볼 수 있다.
사용자가 인증을 하지 않았다면, 차례대로 평가 후 맨마지막 글귀를 출력할 것이다.

// 예시를 위한 코드라 딱 봐도 구리다!

 

 

OR 연산자는 단락평가를 제공한다. 이것을 응용해 보면~

OR은 왼쪽에서 부터 오른쪽으로 평가를 진행하고
truthy를 만나면 나머지 값을 건드리지 않고 평가를 종료합니다.
이런 프로세스를 '단락 평가' 라고 부릅니다!
위 예시의 코드를 조금만 수정해 보겠습니다

let email = ""
let phoneNumber = ""
let address = ""
let isAuthorized

email || phoneNumber || address || (isAuthorized = false);
console.log(isAuthorized) // false
어떤 인증도 하지 않았기 때문에 인증을 검사하는 변수인 isAuthorized에 false를 할당 했습니다.

위 예시와 같이 단락평가의 동작 방식은 
마지막 피연산자가 변수 할당과 같은 side effect를 가지는 표현식 일 때 명확히 볼 수 있습니다!
단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰입니다!

//위 코드는 if문을 사용하는 것이 가독성이 더 좋다.
if(email || phoneNumber || address){
  isAuthorized = true;
}
else{
  isAuthorized = false;
}
console.log(isAuthorized) // false

 

AND( && ) 연산자

AND 연산자는 피연산자 모두가 true일때 true를 반환하고 그렇지 않으면 false를 반환합니다!

AND 연산자 역시 피 연산자가 boolean형이 아니라면 boolean형으로 변환됩니다~

 

AND 연산자는 첫 번째 falsy를 찾을 때 사용할 수 있다.

가장 왼쪽부터 시작해 평가하고,
피연산자를 boolean형 으로 변환 후 값이 false이면( false를 발견하면 )
즉시 연산을 종료하고 해당 피연산자를 변환 전 값으로 리턴한다.
피연산자 중 falsy가 없다면 가장 마지막 피연산자를 리턴한다. 


console.log( 1 && 0 ); // 0 
1은 truthy이므로 다음 피연산자 0을 평가한다.
0은 falsy 이다.

console.log( null && 1 ); // null
null은 falsy이므로 null을 리턴한다.
1을 평가하지 않고 연산이 종료된다.

console.log( 1 && 2 && 3 ); // 3 
1은 truthy이므로 다음 피연산자 2를 평가한다.
2은 truthy이므로 다음 피연산자 3을 평가한다.
3도 truthy이므로 마지막 피연산자인 3을 리턴한다.

 

 

AND( && ) 연산자가 OR( || ) 연산자보다 우선순위가 높기 때문에

 a && b  ||  c && d  의 결과와
(a && b) || (c && d) 의 결과는 동일하다.

 

NOT( ! ) 연산자

NOT 연산자는 인수를 하나만 받고,

피연산자를 boolean형으로 변환한 뒤 그 값의 역을 반환합니다.

 

이를 이용해서 NOT 연산자를 연달아 2번 사용하면 값을 boolean형으로 변환할 수 있습니다.

console.log(!!null) // false
console.log(!!('true? or false?')) // true

 

NOT 연산자는 모든 논리 연산자 중에서 가장 높기 때문에

항상 &&이나  || 보다 먼저 실행됩니다!

(괄호를 써서 구분해 주는게 좋겠습니다.)

 

 

기본이 중요하다.