🚨 올바르지 않은 내용이 있을 경우, 댓글로 남겨주시면 감사드리겠습니다.

자바스크립트를 공부하면서 관습적으로, 기계적으로 써왔던
논리연산자에 대한 부분을 짚어보고자 해당 내용을 정리해보았다.
흔한 if문 예시를 들어보자.

var foo = 20; 
if ( foo > 5 && foo < 15 ) {
  console.log(foo);  // undefined
} 

if ( foo > 5 || foo < 15 ) {
  console.log(foo);  // 20;
}

위 코드를 하나씩 관습적으로 해석해보자.
첫번째 if문에서 변수 foo에 할당된 20이 '5보다 크고 15보다 작다'라는 조건에 부합하지 않기 때문에
false를 반환하고, 블록 스코프 안으로 진입하지 못한다.

두번째 if문에서 변수 foo에 할당된 20이 '5보다 크거나 15보다 작다'라는 조건에 부합하기 때문에
true를 반환하고, 블록 스코프 안으로 진입하여 콘솔에 foo의 값인 20를 정상적으로 출력한다.

흔히 "&&"는 그리고(AND), "||"는 또한(OR)이라고 이해되기 때문에
위와 같은 해석이 틀리지는 않는 것 같다.

그렇다면 아래 코드를 살펴보자

var iAmNotTrue = 0;
var myAge = 29;

function printMyage() {
  return iAmNotTrue || myAge; 
}

printMyage();  // 29;

ㅇㅅㅇ뀨?!
'&&' 나 '||'는 if 문에만 오는 것이 아니었어??

초심자의 입장에서 위와 같은 코드를 보고 당황하여 논리 operator에 대해 알아보았다.

논리 연산자란?(What is logical operators?)

논리 연산자는 보통 Boolean(논리적) 값과 함께 쓰이며, 불리언 값을 반환한다. 그런데, &&과 || 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.
출처 - MDN

위에 문장을 1, 2로 구분하여 차근차근 정리해보자.

1. 논리 연산자는 보통 Boolean(논리적) 값과 함께 쓰이며, 불리언 값을 반환한다.

⇒ 논리연산자(! , &&, ||)는 보통 Boolean(논리적) 값과 함께 쓰이며, 불리언 값(true, false)을 반환한다.

!false;  //true
!0;  // true
!NaN;  // true
!undefined; // true
!null; // true
!6; // false

true && true;  // true
true && false; //false
false && true;  // false
false && false;  // false

true || true;  // true
true || false;  // true
false && true;  // true
false && false; // false

예시에서 볼 수 있듯이 논리연산자는 보통 불리안 값을 반환한다.

2. 그런데, &&과 || 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.

⇒ 논리 연산자가 &&, || 일 경우는 반드시 불리언 값(true, false)을 반환하는 것이 아닌, 피연산자 중 하나(불리언이 아니어도)의 값을 반환한다.

var iamTrue = 6;
var iamFalse = 0;

iamTrue && iamFalse;  // 0
iamTrue || iamFalse;  // 6

위 예시에서 &&, || 연산자는 true, false을 반환하는 것이 아닌, 피연산자의 값을 자체를 반환한다는 것을 알 수 있다.

논리 연산자의 연산 방식

1. AND operator (&&)

• 왼쪽부터 false 값을 찾는다.
• false 값을 찾으면, 연산을 즉시 중지하고 연산된 해당 피연산자의 값을 반환한다.
• 만약 끝까지 false를 찾지 못하면, 마지막 true인 피연산자의 값을 반환한다.

2. OR operator (||)

• 왼쪽부터 true 값을 찾는다.
• true 값을 찾으면, 연산을 즉시 중지하고 연산된 해당 피연산자의 값을 반환한다.
• 만약 끝까지 true를 찾지 못하면, 마지막 false인 피연산자의 값을 반환한다.

해당 원리를 유념해두고 아래 코드를 보자

"cat" && 0 && false && 6;  // 0
true && true && false && "cat";  // false
true && 6 && "dog" && "cat";  // "cat"


true || true || false || "cat";  // true
false || false || "" || 0;  // 0
false || false || "cat" || "dog";  // "cat"

이제 해당 프로세스를 바탕으로 처음에 나왔던 두 코드를 정확히 이해해보자.

var foo = 20; 
if ( foo > 5 && foo < 15 ) {  // true && false 이므로 두번째 피연산자의 값 false 반환
  console.log(foo); 
} 

if ( foo > 5 || foo < 15 ) {  // true || false 이므로 첫번째 피연산자의 값 true 반환
  console.log(foo);  // 20
}

var iAmNotTrue = 0;
var myAge = 29;

function printMyage() {
  return iAmNotTrue || myAge;  //  0 || 29 에서 0은 false이므로 true 값인 29 반환
}

printMyage();  // 29

예를 들어 지뢰찾기 게임을 구현하고 있고 주변 지뢰의 갯수를 표시하는 함수를 짜는데
주변 지뢰 겟수가 0일 경우 0이 아닌 공백으로 표현하고 싶다면 아래와 같이 코드를 작성할 수 있다.

var showMineAmount = document.queryselector("#block");

function printMineAmount(MineAmountAround) {
  if ( MineAmountAround > 0) {
    showMineAmount.textContent = MineAmountAround;
  } else if ( MineAmountAround === 0 ) {
    showMineAmount.textContent = "";
  }
}

논리 연산 과정을 응용하면 좀 더 간단한 코드를 작성할 수 있다.

var showMineAmount = document.queryselector("#block");

function printMineAmount(MineAmountAround) {
  showMineAmount.textContent = MineAmountAround || "";
}

어떻게 보면 간단하지만, 나를 포함한 대부분의 초심자들이(심지어 현업 개발자도 몇몇 있다고 한다)
해당 내용을 정확하게 알지 못하고 넘어갈 수 있다고 생각하여 포스팅을 통해 정리해보는 시간을 가져보았다.

그리고 위 예시처럼 다양한 상황에서 해당 논리 연산자를 활용하면 훨씬 간단 명료한 코드를 짤 수 있기 때문에
내용을 잘 숙지하고 있으면 좋을 것 같다.

참고

• MDN - 논리 연산자