12. 논리 연산자 (Logical Operators)

안녕하세요 박기린입니다.

 

자바스크립트에는 4가지 논리 연산자가 있습니다. &&(and), ||(or), !(not), ??(nullish)가 있습니다.

??(nullish)연산자는 나중에 따로 문서를 만들어서 정리하겠습니다. (작성 후 링크 연결 예정) 이 글에서는 &&(and), ||(or), !(not) 세 가지만 다루겠습니다.

 

---

 

 

 

OR : ||

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

|| 연산자는 or를 뜻합니다. 다른 프로그래밍 언어는 좌항과 우항 중 하나만 true면 true를 반환하고, 둘 다 false이면 false를 반환합니다.

자바스크립트의 || 연산자는 살짝 다릅니다.

 

console.log(1 || 0) // 1

1은 truthy한 값입니다. JS엔진이 boolean으로 type coercion을 하면 true로 인식을 합니다.

이런 경우 || 연산자가 true를 반환할 거 같지만, 1을 반환합니다. 즉, truthy한 값의 원본을 return 한다는 뜻입니다.

 

 

 

 

 

 

|| 연산자의 특징 - true인 값을 찾으면 즉시 연산을 종료합니다.

result = false || true || true

|| 연산자는 left-to-right 연산 순서를 가집니다. 그래서 위의 코드는 이러한 순서로 작동합니다.

1. 첫 번째 항의 false를 검사합니다. false는 truthy한 값이 아니기 때문에 다음으로 넘어갑니다.

2. 두 번째 항의 true를 검사합니다. true는 truthy한 값이기 때문에 true를 리턴하고 종료합니다.

세 번째 항의 true는 검사되지 않은 채 끝이 납니다.

 

 

 

console.log( 1 || 0 ); // 1
console.log( 0 || 1 ); // 1 
console.log( null || 0 || 'hi' ); // hi

console.log( undefined || null || 0 ); // 0

위의 예제 코드에서 마지막의 경우는 셋 다 falsy한 값인 경우입니다. 이럴 경우 마지막까지 연산을 시도하다가, 마지막 항에 위치한 값을 return 합니다.

 

---

 

 

 

 

AND : &&

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

&& 연산자는 and를 뜻합니다. 다른 프로그래밍 언어는 좌항과 우항 중 하나만 false면 false를 반환하고, 둘 다 true이면 true를 반환합니다.

 

 

result = true && false && true; // false

&& 연산자는 left-to-right 연산 순서를 가집니다. 그래서 위의 코드는 이러한 순서로 작동합니다.

1. 첫 번째 항의 true를 검사합니다. true는 falsy한 값이 아니기 때문에 다음으로 넘어갑니다.

2. 두 번째 항의 false를 검사합니다. false는 falsy한 값이기 때문에 false를 리턴하고 종료합니다.

세 번째 항의 true는 검사되지 않은 채 끝이 납니다.

 

 

console.log( 1 && 0 ) // 0

0은 falsy한 값입니다. JS엔진이 boolean으로 type coercion을 하면 false로 인식을 합니다.

&&연산자 역시 ||연산자처럼 원본을 return 합니다.

 

 

&& 연산자의 특징 - false인 값을 찾으면 즉시 연산을 종료합니다.

|| 연산자와는 반대로 false인 값을 찾을 때까지 연산을 합니다.

console.log( 1 && 0 ); // 0
console.log( 1 && 5 ); // 5

console.log( null && 5 ); // null
console.log( 1 && 0 && "Hello World" ); // 0

 

---

 

 

 

 

Short circuit evaluation

---

+ 2022.11.8 추가 : Short circuit evaluation(단락 회로 평가)에 대해 자세히 설명한 글이 있습니다.  -  https://arnopark.tistory.com/522

35. Short Circuiting (단락 회로 평가)

---

|| 연산자는 'true인 값을 찾을 때가지 연산을 실행한다는 특징'을 이용해서, 좌항의 값이 false인 경우 우항의 코드를 실행할 수 있게 해줍니다. && 연산자도 그 반대의 경우에 우항의 코드를 실행할 수 있게 해줍니다.

true || console.log('이 코드는 실행이 되지 않습니다.');
false || console.log('이 코드는 실행이 됩니다.');

예제 코드의 첫 번째 줄은 좌항부터 true가 나오기 때문에 우항의 console.log()가 실행되지 않습니다.

두 번째 줄은 좌항이 false이기 때문에 우항의 console.log()가 실행됩니다.

 

 

주의!

const x = false;

if (!x) {
  console.log("It's false");
}

x || console.log("It's false");

위와 같이, 특정 값이 false인 경우를 걸러낼 필요가 있을 때, if 문 대신에 || 연산자를 사용해서 쉽고 간단하게 기능을 구현할 수 있는 것처럼 보입니다.

하지만 타 개발자들에게 가독성이 오히려 안 좋게 보일 수 있습니다. 그리고 if문을 사용할 때, 코드가 무엇을 구현하고자 하는지를 더 명학화게 드러내줍니다. 그러니 상황에 따라 의논과 협의를 거쳐서 적절하게 사용합시다.

 

---

 

 

 

NOT : !

result = !1;
console.log(result); // false

! 연산자를 이러한 순서로 작동합니다.

1. 피연산자(예제의 1)를 boolean type으로 변환합니다.

2.피연산자의 boolean 값을 그 역으로 바꿉니다. (false -> true / true -> false)

 

console.log( !true ); // false
console.log( !0 ); // true

 

! 연산자의 특징 - 타입 변환

이전에 쓴 타입 변환의 종류 글에서 이중 부정(!!)을 이용해 어떠한 값을 boolean 타입으로 변환할 수 있다고 설명했었습니다.

console.log(!!0); // false