javaScript/jsDeepDive

논리 곱, 논리 합 연산자의 작동방식

부엉이사장 2023. 5. 4. 06:45

# 논리합 연산자 (||) OR연산자

console.log( true || false )

OR연산자는 뭐 다들 학창시절 수학시간에 안졸았다면 뭔지 다 알것이다.
여러 조건에서 참이 하나라도 있으면 전체적으로 참이 되는것이다.
정리하면 

console.log(true || true); // true
console.log(true || false); //true
console.log(false || true); // true
console.log(false || false); //false

뭐이렇다, 이런것까지 설명하는건 귀찮지만 걍 써본다.
 
 
위의 코드에선 단순히 boolean값을 논리곱으로 써놨다.
그럼 여러 자료형으로 써본다면 콘솔값은 어떻게 변할까?

console.log(0 || 1); //1
console.log(0 || "바보"); //바보

데이터 타입에서 숫자 0은 false로 인식된다. 물론 '0'스트링도 숫자타입으로 변환되어 
논리적으로 false를 뜻하게 된다.
스트링은 길이를 가진다면 true가 된다.
때문에 저 논리곱 표현식은 각각 1과 '바보'를 출력하게 된다.
 
뭐이런 단순한걸 길게 늘여서 설명하냐 하겠지만 중요한건 여기부터다
논리합 연산자를 두개이상 써보겠다
 

console.log(0 || 1 || "바보");

이 코드의 출력물은 어떨까?
0은 당연 false일테고, 1은 true, '바보'는 true일것이다.
정답은 1을 출력한다.
 
그렇다면 의문을 가질것이다. 
true인걸 출력하는데 저 논리합연산 표현식에선 true인 값이 1과 '바보' 둘다 인데
왜 1만 출력할까?

논리합 연산자는 왼쪽부터 순서대로 작동한다.
- 왼쪽부터 시작한다
- 0은 false값이다. 다음!
- 1은 true값이다. 끗!
- 콘솔에 1출력
 
++ 여기서 '바보'라는 스트링은 아예 신경을 안쓴다는게 중요포인트!
논리합 연산자는 왼쪽부터 차례대로 true값을 찾은다음 true를 찾는 순간 연산을 멈춘다.
 
 
 
# 만약 모든 값이 false인 논리합은?

console.log("" || false || 0); // 0 출력

위 논리합 표현식에서 모든 값은 false이다. 때문에 제일 마지막 0값까지 가서 0을 출력한다.
 
 
아래와같은 3항연산자가 생기기 전에는 이렇게 논리연산자로 직접 값을 집어넣었는데
위같은경우때문에 false인 값이 변수에 할당되기도 하였다.

let value = true? '참' : '거짓' //3항연산자

 
 
 
# 이걸 어디따 써먹길래 중요한걸까? 
 
논리합 연산자는 코딩하면서 필수적으로 자주 쓰게 된다.
나중에 코딩고수가 된다면 이 논리합 연산자를 쓸때 이런 작동구조를 알면 도움된다.
예시를 들어보겠다.
 

const veryEasyFunction = () =>{
  ...
}

const veryHardFunction = () =>{
  ...
}

이렇게 두가지 함수가 있다. 존나 가벼운 easy함수랑 개무거운 hard함수가 있다.
두 함수는 각각 true혹은 false를 return한다고 하자.
당연히 easy함수가 가볍고 시간도 짧게 걸리고, hard 함수가 무겁고 오래걸리는 함수다.
 
그럼 이 두가지중 하나만 true값이라도 특정 코드를 실행하기 위한 조건문을 써보자.

if(veryHardFunction()||veryEasyFunction){
  working()
}

이 조건문에서 easy, hard 두 함수중 하나만 true를 return하더라도 working()함수가 실행되게 하는 코드이다.
근데 과연 이 코드가 좋은코드일까?
 
논리합 연산자는 왼쪽부터 참거짓을 판별한다. 그리고 true가 뜨는 순간 실행을 종료하고 true를 반환한다.
그러나 위의 코드는 hard 함수가 왼쪽에있다. 왼쪽부터 연산을 하는 논리합 연산자 특성상 이건 안좋은 코드다.
연산이 오래걸리고 무거운 hard 함수부터 계산을 하므로 코드도 무겁게되고 시간도 오래걸리게 된다.
 

if(veryEasyFunction()||veryHardFunction){
  working()
}

만약 easy함수를 왼쪽부터 쓰게된다면 easy함수의 참거짓을 판별하고 만약 참이라면
hard함수는 계산할 필요가 없기 때문에 그냥 스킵된다.
 
 
 
# 논리곱 연산자 (&&) AND연산자

console.log( true && false )

얜 자바스크립트의 논리합 연산자다.

console.log(true && true); // true
console.log(true && false); //false
console.log(false && true); // false
console.log(false && false); //false

설명스킵할게 다 아는거니까.
 
 

console.log(0 && 1); //0
console.log("" && "바보"); //공백

얘는 콘솔로 연산결과값을 출력할때 false값을 출력한다.
위에 논리합연산자를 설명할때 이해를 했다면 직감적으로
논리곱 연산자는 false를 찾는다는걸 알 수 있다.
 
 
만약 다 true라면?

console.log(1 && "멍청이" && "바보"); //바보

왼쪽부터 계산해서 가장 마지막 true값을 반환한다.
 
 
얘역시도 왼쪽부터 연산을 하므로 

if(veryEasyFunction()&&veryHardFunction){
  working()
}

이렇게 가벼운 함수를 왼쪽부터 써주는게 좋다.
 
 
 
# 결과적으로 논리연산자를 쓸때 순서정하기는 이렇다.
- 논리합 연산자
가볍거나, true값일 확률이 높은 값일수록 왼쪽
무겁거나 false값일 확률이 높은 값일수록 오른쪽
 
- 논리곱 연산자
가볍거나, false값일 확률이 높은 값일수록 왼쪽
무겁거나 true값일 확률이 높은 값일수록 오른쪽